<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KPI Dashboard - FanLuv Admin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .env-dev { border-color: #10b981; }
        .env-prod { border-color: #ef4444; }
        .loading-spinner {
            border: 3px solid #f3f4f6;
            border-top: 3px solid #3b82f6;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-gray-900 text-white">
    <!-- ヘッダー -->
    <header class="bg-gray-800 border-b border-gray-700">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <div class="flex items-center gap-4">
                    <h1 class="text-2xl font-bold">KPI Dashboard</h1>
                    <a href="/admin.html" class="text-sm text-blue-400 hover:text-blue-300">← Admin Tool</a>
                </div>
                
                <!-- ユーザー情報とログアウト -->
                <div class="flex items-center gap-4">
                    <div id="env-indicator" class="px-3 py-1 rounded-full text-sm">
                        <!-- 環境インジケーター -->
                    </div>
                    <div class="flex items-center gap-3">
                        <!-- 環境表示 -->
                        <div id="env-indicator" class="px-3 py-1 rounded-full text-sm"></div>
                        <div class="text-right">
                            <div class="text-xs text-gray-400">ログイン中</div>
                            <div class="text-sm font-medium" id="username-display">-</div>
                        </div>
                        <button onclick="changeEnvironment()"
                                class="px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium transition duration-200">
                            環境変更
                        </button>
                        <button onclick="logout()"
                                class="px-3 py-2 bg-red-600 hover:bg-red-700 rounded text-sm font-medium transition duration-200">
                            ログアウト
                        </button>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </header>

    <!-- メインコンテンツ -->
    <main class="container mx-auto px-4 py-8">
        <!-- サマリーカード -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <!-- DAU -->
            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                <h3 class="text-sm text-gray-400 mb-2">DAU (本日)</h3>
                <div class="text-3xl font-bold" id="dau-value">-</div>
                <div class="text-sm text-gray-500 mt-1" id="dau-change"></div>
            </div>
            
            <!-- WAU -->
            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                <h3 class="text-sm text-gray-400 mb-2">WAU (7日間)</h3>
                <div class="text-3xl font-bold" id="wau-value">-</div>
                <div class="text-sm text-gray-500 mt-1" id="wau-change"></div>
            </div>
            
            <!-- MAU -->
            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                <h3 class="text-sm text-gray-400 mb-2">MAU (30日間)</h3>
                <div class="text-3xl font-bold" id="mau-value">-</div>
                <div class="text-sm text-gray-500 mt-1" id="mau-change"></div>
            </div>
            
            <!-- 新規登録 -->
            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                <h3 class="text-sm text-gray-400 mb-2">本日の新規登録</h3>
                <div class="text-3xl font-bold" id="new-users-value">-</div>
                <div class="text-sm text-gray-500 mt-1" id="new-users-change"></div>
            </div>
        </div>

        <!-- 本日のアクティビティ詳細 -->
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
            <h2 class="text-xl font-semibold mb-4">本日のアクティビティ詳細</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center">
                    <div class="text-2xl font-bold" id="login-count">-</div>
                    <div class="text-sm text-gray-400 mt-1">ログイン</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold" id="chat-count">-</div>
                    <div class="text-sm text-gray-400 mt-1">チャット</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold" id="image-count">-</div>
                    <div class="text-sm text-gray-400 mt-1">画像生成</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold" id="character-count">-</div>
                    <div class="text-sm text-gray-400 mt-1">キャラ作成</div>
                </div>
            </div>
        </div>

        <!-- 期間選択 -->
        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 mb-6">
            <div class="flex items-center gap-4">
                <span class="text-sm text-gray-400">グラフ表示期間:</span>
                
                <!-- プリセットボタン -->
                <div class="flex gap-2">
                    <button onclick="selectPresetPeriod(7)" class="px-3 py-1 text-sm rounded bg-gray-700 hover:bg-gray-600 preset-btn">7日</button>
                    <button onclick="selectPresetPeriod(30)" class="px-3 py-1 text-sm rounded bg-blue-600 hover:bg-blue-700 preset-btn">30日</button>
                    <button onclick="selectPresetPeriod(90)" class="px-3 py-1 text-sm rounded bg-gray-700 hover:bg-gray-600 preset-btn">90日</button>
                    <button onclick="selectPresetPeriod(365)" class="px-3 py-1 text-sm rounded bg-gray-700 hover:bg-gray-600 preset-btn">1年</button>
                </div>
                
                <!-- カスタム日付範囲 -->
                <div class="flex items-center gap-2">
                    <span class="text-sm text-gray-400">カスタム:</span>
                    <input type="date" id="start-date" class="px-2 py-1 text-sm bg-gray-700 rounded border border-gray-600 text-white">
                    <span class="text-sm text-gray-400">〜</span>
                    <input type="date" id="end-date" class="px-2 py-1 text-sm bg-gray-700 rounded border border-gray-600 text-white">
                    <button onclick="applyCustomPeriod()" class="px-3 py-1 text-sm bg-green-600 hover:bg-green-700 rounded">適用</button>
                </div>
                
                <button onclick="refreshData()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded ml-auto">
                    更新
                </button>
            </div>
        </div>

        <!-- DAU推移セクション -->
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
            <h2 class="text-xl font-semibold mb-4">DAU推移（過去30日）</h2>
            <canvas id="dau-trend-chart"></canvas>
        </div>

        <!-- グラフセクション -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- 日次アクティビティトレンド -->
            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                <h2 class="text-xl font-semibold mb-4">日次アクティビティ（過去30日）</h2>
                <canvas id="daily-activity-chart"></canvas>
            </div>
            
            <!-- 継続率 -->
            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                <h2 class="text-xl font-semibold mb-4">継続率トレンド</h2>
                <canvas id="retention-chart"></canvas>
            </div>
        </div>



        <!-- 決済額推移セクション -->
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
            <h2 class="text-xl font-semibold mb-4">決済額推移（過去30日）</h2>
            <canvas id="revenue-trend-chart"></canvas>
        </div>
        
        <!-- MRR推移セクション -->
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
            <h2 class="text-xl font-semibold mb-4">MRR推移（月間定期収益）</h2>
            <canvas id="mrr-trend-chart"></canvas>
        </div>

        <!-- 課金データ -->
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
            <h2 class="text-xl font-semibold mb-4">課金データ（過去30日）</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center">
                    <div class="text-2xl font-bold text-green-400" id="new-subs">-</div>
                    <div class="text-sm text-gray-400 mt-1">新規契約</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-red-400" id="cancellations">-</div>
                    <div class="text-sm text-gray-400 mt-1">解約</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-blue-400" id="payments-success">-</div>
                    <div class="text-sm text-gray-400 mt-1">支払成功</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-orange-400" id="payments-failed">-</div>
                    <div class="text-sm text-gray-400 mt-1">支払失敗</div>
                </div>
            </div>
        </div>

        <!-- データテーブル -->
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold">継続率データ</h2>
                <button onclick="exportCSV()" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-sm">
                    CSV出力
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-700">
                            <th class="text-left py-2">登録日</th>
                            <th class="text-center py-2">D1</th>
                            <th class="text-center py-2">D3</th>
                            <th class="text-center py-2">D7</th>
                            <th class="text-center py-2">D14</th>
                            <th class="text-center py-2">D30</th>
                        </tr>
                    </thead>
                    <tbody id="retention-table">
                        <tr>
                            <td colspan="6" class="text-center py-4 text-gray-500">データ読み込み中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <!-- ローディング表示 -->
    <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
        <div class="loading-spinner"></div>
    </div>

    <script>
        // 認証チェック
        function checkAuth() {
            const authToken = sessionStorage.getItem('kpiAuthToken');
            const environment = sessionStorage.getItem('kpiEnvironment');

            if (!authToken || !environment) {
                // 認証がない場合はエントリーページへ
                window.location.href = '/kpi-entry.html';
                return false;
            }
            return true;
        }

        // ページ読み込み時に認証チェック
        if (!checkAuth()) {
            // リダイレクトされるので以降の処理は実行されない
        }

        // ログアウト処理
        function logout() {
            sessionStorage.removeItem('kpiAuthToken');
            sessionStorage.removeItem('kpiAuthUsername');
            sessionStorage.removeItem('kpiEnvironment');
            window.location.href = '/kpi-entry.html';
        }

        // 環境変更（再ログイン）
        function changeEnvironment() {
            if (confirm('環境を変更するには再ログインが必要です。続行しますか？')) {
                logout();
            }
        }

        // 環境設定
        let currentEnv = sessionStorage.getItem('kpiEnvironment') || 'development';
        const API_URLS = {
            development: 'https://fanluv-kpi-dev-api.ailovedirector.workers.dev',
            production: 'https://fanluv-kpi-prod-api.app-1d4.workers.dev'
        };

        // チャート変数
        let dailyActivityChart = null;
        let retentionChart = null;
        let dauTrendChart = null;
        let revenueTrendChart = null;
        let mrrTrendChart = null;
        
        // 期間設定
        let selectedDays = 30;
        let selectedEndDate = null;

        // 初期化
        window.addEventListener('DOMContentLoaded', () => {
            // ユーザー情報表示
            const username = sessionStorage.getItem('kpiAuthUsername');
            if (username) {
                document.getElementById('username-display').textContent = username;
            }

            // 環境表示を更新
            updateEnvironmentUI();

            // データ読み込み
            initializeDateInputs();
            loadKPIData();
            loadDAUMetrics();
            loadRevenueMetrics();
        });


        function updateEnvironmentUI() {
            const envIndicator = document.getElementById('env-indicator');

            if (currentEnv === 'development') {
                envIndicator.innerHTML = '🟢 開発環境';
                envIndicator.className = 'px-3 py-1 rounded-full text-sm bg-green-900/50 text-green-400';
            } else {
                envIndicator.innerHTML = '🔴 本番環境';
                envIndicator.className = 'px-3 py-1 rounded-full text-sm bg-red-900/50 text-red-400';
            }
        }

        // データ読み込み
        async function loadKPIData() {
            showLoading(true);

            try {
                const apiUrl = API_URLS[currentEnv];
                const authHeader = sessionStorage.getItem('kpiAuthToken');

                if (!authHeader) {
                    window.location.href = '/kpi-entry.html';
                    return;
                }

                // 複数のエンドポイントから並列でデータ取得
                const [summaryRes, metricsRes, retentionRes] = await Promise.all([
                    fetch(`${apiUrl}/api/kpi/summary`, {
                        headers: { 'Authorization': authHeader }
                    }),
                    fetch(`${apiUrl}/api/kpi/metrics?period=daily&days=30`, {
                        headers: { 'Authorization': authHeader }
                    }),
                    fetch(`${apiUrl}/api/kpi/retention`, {
                        headers: { 'Authorization': authHeader }
                    })
                ]);

                if (!summaryRes.ok || !metricsRes.ok || !retentionRes.ok) {
                    throw new Error('データ取得に失敗しました');
                }

                const [summary, metrics, retention] = await Promise.all([
                    summaryRes.json(),
                    metricsRes.json(),
                    retentionRes.json()
                ]);

                // データを結合して更新
                const combinedData = {
                    summary: summary.data,  // APIレスポンスのdataプロパティを使用
                    daily: metrics.metrics || [],
                    retention: retention.retention || []
                };

                updateDashboard(combinedData);

            } catch (error) {
                console.error('Failed to load KPI data:', error);
                alert('KPIデータの読み込みに失敗しました: ' + error.message);
            } finally {
                showLoading(false);
            }
        }

        // ダッシュボード更新
        function updateDashboard(data) {
            // サマリーカード更新
            if (data.summary) {
                document.getElementById('dau-value').textContent = data.summary.today?.dau || 0;
                document.getElementById('wau-value').textContent = data.summary.wau || 0;
                document.getElementById('mau-value').textContent = data.summary.mau || 0;
                document.getElementById('new-users-value').textContent = data.summary.today?.new_users || 0;
                
                // アクティビティ詳細
                document.getElementById('login-count').textContent = data.summary.today?.logins || 0;
                document.getElementById('chat-count').textContent = data.summary.today?.chats || 0;
                document.getElementById('image-count').textContent = data.summary.today?.images || 0;
                document.getElementById('character-count').textContent = data.summary.today?.characters || 0;
            }
            
            // 課金データ
            if (data.billing) {
                document.getElementById('new-subs').textContent = data.billing.new_subscriptions || 0;
                document.getElementById('cancellations').textContent = data.billing.cancellations || 0;
                document.getElementById('payments-success').textContent = data.billing.successful_payments || 0;
                document.getElementById('payments-failed').textContent = data.billing.failed_payments || 0;
            }
            
            // 日次アクティビティチャート
            if (data.daily) {
                updateDailyActivityChart(data.daily);
            }
            
            // 継続率データ
            if (data.retention) {
                updateRetentionTable(data.retention);
                updateRetentionChart(data.retention);
            }
        }

        // 日次アクティビティチャート更新
        function updateDailyActivityChart(dailyData) {
            const ctx = document.getElementById('daily-activity-chart').getContext('2d');
            
            const sortedData = dailyData.sort((a, b) => a.date.localeCompare(b.date));
            const labels = sortedData.map(d => d.date.slice(5)); // MM-DD形式
            
            if (dailyActivityChart) {
                dailyActivityChart.destroy();
            }
            
            dailyActivityChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '新規登録',
                            data: sortedData.map(d => d.new_users || 0),
                            borderColor: 'rgb(34, 197, 94)',
                            backgroundColor: 'rgba(34, 197, 94, 0.1)',
                            tension: 0.1
                        },
                        {
                            label: 'ログイン',
                            data: sortedData.map(d => d.logins || 0),
                            borderColor: 'rgb(59, 130, 246)',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            tension: 0.1
                        },
                        {
                            label: 'チャット',
                            data: sortedData.map(d => d.chats || 0),
                            borderColor: 'rgb(168, 85, 247)',
                            backgroundColor: 'rgba(168, 85, 247, 0.1)',
                            tension: 0.1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: 'rgb(156, 163, 175)'
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(75, 85, 99, 0.3)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(75, 85, 99, 0.3)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)'
                            }
                        }
                    }
                }
            });
        }

        // 継続率チャート更新
        function updateRetentionChart(retentionData) {
            const ctx = document.getElementById('retention-chart').getContext('2d');
            
            // 日付ごとにグループ化
            const groupedData = {};
            retentionData.forEach(r => {
                if (!groupedData[r.registration_date]) {
                    groupedData[r.registration_date] = {};
                }
                groupedData[r.registration_date][`D${r.retention_day}`] = r.retention_rate;
            });
            
            // 最新10日分のデータを取得
            const dates = Object.keys(groupedData).sort().slice(-10);
            
            if (retentionChart) {
                retentionChart.destroy();
            }
            
            retentionChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: dates.map(d => d.slice(5)), // MM-DD形式
                    datasets: [
                        {
                            label: 'D1',
                            data: dates.map(d => groupedData[d]?.D1 || null),
                            borderColor: 'rgb(239, 68, 68)',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            tension: 0.1
                        },
                        {
                            label: 'D7',
                            data: dates.map(d => groupedData[d]?.D7 || null),
                            borderColor: 'rgb(59, 130, 246)',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            tension: 0.1
                        },
                        {
                            label: 'D30',
                            data: dates.map(d => groupedData[d]?.D30 || null),
                            borderColor: 'rgb(34, 197, 94)',
                            backgroundColor: 'rgba(34, 197, 94, 0.1)',
                            tension: 0.1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + 
                                           (context.parsed.y ? context.parsed.y.toFixed(1) + '%' : 'N/A');
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            grid: {
                                color: 'rgba(75, 85, 99, 0.3)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)',
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(75, 85, 99, 0.3)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)'
                            }
                        }
                    }
                }
            });
        }

        // 継続率テーブル更新
        function updateRetentionTable(retentionData) {
            const tbody = document.getElementById('retention-table');
            
            // 日付ごとにグループ化
            const groupedData = {};
            retentionData.forEach(r => {
                if (!groupedData[r.registration_date]) {
                    groupedData[r.registration_date] = {};
                }
                groupedData[r.registration_date][`D${r.retention_day}`] = r.retention_rate;
            });
            
            // テーブル生成
            const rows = Object.keys(groupedData)
                .sort((a, b) => b.localeCompare(a)) // 新しい順
                .slice(0, 20) // 最新20件
                .map(date => {
                    const data = groupedData[date];
                    return `
                        <tr class="border-b border-gray-700">
                            <td class="py-2">${date}</td>
                            <td class="text-center py-2">${formatRetention(data.D1)}</td>
                            <td class="text-center py-2">${formatRetention(data.D3)}</td>
                            <td class="text-center py-2">${formatRetention(data.D7)}</td>
                            <td class="text-center py-2">${formatRetention(data.D14)}</td>
                            <td class="text-center py-2">${formatRetention(data.D30)}</td>
                        </tr>
                    `;
                }).join('');
            
            tbody.innerHTML = rows || '<tr><td colspan="6" class="text-center py-4 text-gray-500">データなし</td></tr>';
        }

        function formatRetention(value) {
            if (value === undefined || value === null) {
                return '-';
            }
            return value.toFixed(1) + '%';
        }

        // CSV出力
        function exportCSV() {
            // TODO: 実装
            alert('CSV出力機能は準備中です');
        }

        // データ更新
        function refreshData() {
            loadKPIData();
        }

        // ローディング表示
        function showLoading(show) {
            const overlay = document.getElementById('loading-overlay');
            if (show) {
                overlay.classList.remove('hidden');
            } else {
                overlay.classList.add('hidden');
            }
        }
        
        // DAUメトリクスを読み込み
        async function loadDAUMetrics() {
            try {
                const apiUrl = API_URLS[currentEnv];
                const authHeader = sessionStorage.getItem('kpiAuthToken');

                if (!authHeader) {
                    window.location.href = '/kpi-entry.html';
                    return;
                }

                let url = `${apiUrl}/api/kpi/metrics`;

                // 終了日が指定されている場合
                if (selectedEndDate) {
                    const endDate = new Date(selectedEndDate);
                    const startDate = new Date(endDate);
                    startDate.setDate(startDate.getDate() - selectedDays);
                    const startDateStr = startDate.toISOString().split('T')[0];
                    url += `?start=${startDateStr}&end=${selectedEndDate}`;
                } else {
                    // プリセット期間の場合、今日から過去にN日分
                    const endDate = new Date();
                    const startDate = new Date();
                    startDate.setDate(startDate.getDate() - selectedDays);
                    const startDateStr = startDate.toISOString().split('T')[0];
                    const endDateStr = endDate.toISOString().split('T')[0];
                    url += `?start=${startDateStr}&end=${endDateStr}`;
                }
                
                const response = await fetch(url, {
                    headers: {
                        'Authorization': authHeader
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                updateDAUChart(data);
                
            } catch (error) {
                console.error('Failed to load DAU metrics:', error);
            }
        }
        
        // DAUチャート更新
        function updateDAUChart(data) {
            const ctx = document.getElementById('dau-trend-chart').getContext('2d');
            
            if (dauTrendChart) {
                dauTrendChart.destroy();
            }
            
            const metrics = data.metrics || [];
            const reversedMetrics = [...metrics].reverse(); // 古い日付を先に
            
            dauTrendChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: reversedMetrics.map(m => m.date.slice(5)), // MM-DD形式
                    datasets: [
                        {
                            label: 'DAU（デイリーアクティブユーザー）',
                            data: reversedMetrics.map(m => m.dau),
                            borderColor: 'rgb(59, 130, 246)',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            tension: 0.1,
                            fill: true,
                            yAxisID: 'y'
                        },
                        {
                            label: '新規ユーザー',
                            data: reversedMetrics.map(m => m.new_users),
                            borderColor: 'rgb(34, 197, 94)',
                            backgroundColor: 'rgba(34, 197, 94, 0.1)',
                            tension: 0.1,
                            fill: true,
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        tooltip: {
                            callbacks: {
                                afterLabel: function(context) {
                                    if (context.datasetIndex === 0) { // DAU
                                        const metric = reversedMetrics[context.dataIndex];
                                        if (metric.dau_change_day !== null) {
                                            const change = metric.dau_change_day;
                                            const sign = change >= 0 ? '+' : '';
                                            return `前日比: ${sign}${change}`;
                                        }
                                    }
                                    return '';
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(75, 85, 99, 0.2)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: 'DAU',
                                color: 'rgb(156, 163, 175)'
                            },
                            grid: {
                                color: 'rgba(75, 85, 99, 0.2)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '新規ユーザー',
                                color: 'rgb(156, 163, 175)'
                            },
                            grid: {
                                drawOnChartArea: false
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)'
                            }
                        }
                    }
                }
            });
        }
        
        // 決済額とMRRメトリクスを読み込み
        async function loadRevenueMetrics() {
            try {
                const apiUrl = API_URLS[currentEnv];
                const authHeader = sessionStorage.getItem('kpiAuthToken');

                if (!authHeader) {
                    window.location.href = '/kpi-entry.html';
                    return;
                }

                let url = `${apiUrl}/api/kpi/metrics`;

                // 終了日が指定されている場合
                if (selectedEndDate) {
                    const endDate = new Date(selectedEndDate);
                    const startDate = new Date(endDate);
                    startDate.setDate(startDate.getDate() - selectedDays);
                    const startDateStr = startDate.toISOString().split('T')[0];
                    url += `?start=${startDateStr}&end=${selectedEndDate}`;
                } else {
                    // プリセット期間の場合、今日から過去にN日分
                    const endDate = new Date();
                    const startDate = new Date();
                    startDate.setDate(startDate.getDate() - selectedDays);
                    const startDateStr = startDate.toISOString().split('T')[0];
                    const endDateStr = endDate.toISOString().split('T')[0];
                    url += `?start=${startDateStr}&end=${endDateStr}`;
                }
                
                const response = await fetch(url, {
                    headers: {
                        'Authorization': authHeader
                    }
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                updateRevenueChart(data);
                updateMRRChart(data);
                
            } catch (error) {
                console.error('Failed to load revenue metrics:', error);
            }
        }
        
        // 決済額推移チャート更新
        function updateRevenueChart(data) {
            const ctx = document.getElementById('revenue-trend-chart').getContext('2d');
            
            if (revenueTrendChart) {
                revenueTrendChart.destroy();
            }
            
            const metrics = data.metrics || [];
            const reversedMetrics = [...metrics].reverse();
            
            revenueTrendChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: reversedMetrics.map(m => m.date.slice(5)), // MM-DD形式
                    datasets: [
                        {
                            label: '新規契約',
                            data: reversedMetrics.map(m => m.revenue_new_subscription || 0),
                            backgroundColor: 'rgba(74, 222, 128, 0.7)',  // 緑色
                            borderColor: 'rgb(74, 222, 128)',
                            borderWidth: 1
                        },
                        {
                            label: '契約更新',
                            data: reversedMetrics.map(m => m.revenue_renewal || 0),
                            backgroundColor: 'rgba(96, 165, 250, 0.7)',  // 青色
                            borderColor: 'rgb(96, 165, 250)',
                            borderWidth: 1
                        },
                        {
                            label: 'プラン変更',
                            data: reversedMetrics.map(m => m.revenue_plan_change || 0),
                            backgroundColor: 'rgba(251, 191, 36, 0.7)',  // 黄色
                            borderColor: 'rgb(251, 191, 36)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            stacked: true,
                            grid: {
                                color: 'rgba(75, 85, 99, 0.2)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        y: {
                            stacked: true,
                            title: {
                                display: true,
                                text: '金額 ($)',
                                color: 'rgb(156, 163, 175)'
                            },
                            grid: {
                                color: 'rgba(75, 85, 99, 0.2)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)',
                                callback: function(value) {
                                    return '$' + value.toFixed(2);
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed.y !== null) {
                                        label += '$' + context.parsed.y.toFixed(2);
                                    }
                                    return label;
                                },
                                afterBody: function(context) {
                                    const dataIndex = context[0].dataIndex;
                                    const total = context.map(c => c.parsed.y).reduce((a, b) => a + b, 0);
                                    return '合計: $' + total.toFixed(2);
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // MRR推移チャート更新
        function updateMRRChart(data) {
            const ctx = document.getElementById('mrr-trend-chart').getContext('2d');
            
            if (mrrTrendChart) {
                mrrTrendChart.destroy();
            }
            
            const metrics = data.metrics || [];
            const reversedMetrics = [...metrics].reverse();
            
            mrrTrendChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: reversedMetrics.map(m => m.date.slice(5)),
                    datasets: [
                        {
                            label: 'MRR（月間定期収益）',
                            data: reversedMetrics.map(m => m.mrr_total || 0),
                            borderColor: 'rgb(168, 85, 247)',
                            backgroundColor: 'rgba(168, 85, 247, 0.1)',
                            tension: 0.1,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return 'MRR: $' + context.parsed.y.toFixed(2);
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(75, 85, 99, 0.2)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'MRR ($)',
                                color: 'rgb(156, 163, 175)'
                            },
                            grid: {
                                color: 'rgba(75, 85, 99, 0.2)'
                            },
                            ticks: {
                                color: 'rgb(156, 163, 175)',
                                callback: function(value) {
                                    return '$' + value.toFixed(2);
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // 日付入力を初期化
        function initializeDateInputs() {
            const today = new Date();
            const endDateInput = document.getElementById('end-date');
            const startDateInput = document.getElementById('start-date');
            
            // デフォルトで今日を終了日に設定
            endDateInput.value = formatDateForInput(today);
            
            // デフォルトで30日前を開始日に設定
            const startDate = new Date(today);
            startDate.setDate(startDate.getDate() - 30);
            startDateInput.value = formatDateForInput(startDate);
        }
        
        // 日付をinput用にフォーマット
        function formatDateForInput(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        
        // プリセット期間を選択
        function selectPresetPeriod(days) {
            selectedDays = days;
            selectedEndDate = null; // プリセット選択時はend_dateパラメータを使わない
            
            // ボタンのスタイル更新
            document.querySelectorAll('.preset-btn').forEach(btn => {
                btn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
                btn.classList.add('bg-gray-700', 'hover:bg-gray-600');
            });
            event.target.classList.remove('bg-gray-700', 'hover:bg-gray-600');
            event.target.classList.add('bg-blue-600', 'hover:bg-blue-700');
            
            // 日付入力も更新
            const today = new Date();
            const startDate = new Date(today);
            startDate.setDate(startDate.getDate() - days);
            
            document.getElementById('end-date').value = formatDateForInput(today);
            document.getElementById('start-date').value = formatDateForInput(startDate);
            
            // データをリロード
            refreshData();
        }
        
        // カスタム期間を適用
        function applyCustomPeriod() {
            const startDateInput = document.getElementById('start-date').value;
            const endDateInput = document.getElementById('end-date').value;
            
            if (!startDateInput || !endDateInput) {
                alert('開始日と終了日を両方選択してください');
                return;
            }
            
            const startDate = new Date(startDateInput);
            const endDate = new Date(endDateInput);
            
            if (startDate > endDate) {
                alert('開始日は終了日より前である必要があります');
                return;
            }
            
            // 日数を計算
            const diffTime = Math.abs(endDate - startDate);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            
            selectedDays = diffDays;
            selectedEndDate = endDateInput;
            
            // プリセットボタンのスタイルをリセット
            document.querySelectorAll('.preset-btn').forEach(btn => {
                btn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
                btn.classList.add('bg-gray-700', 'hover:bg-gray-600');
            });
            
            // データをリロード
            refreshData();
        }
        
        // データ更新
        function refreshData() {
            loadKPIData();
            loadDAUMetrics();
            loadRevenueMetrics();
        }
    </script>
</body>
</html>