{% extends 'base.html.twig' %}

{% block title %}Analytics Dashboard — Shamra Academia{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --ad-primary: #6d28d9;
            --ad-primary-light: #ede9fe;
            --ad-success: #10b981;
            --ad-danger: #ef4444;
            --ad-warning: #f59e0b;
            --ad-info: #3b82f6;
            --ad-bg: #f1f5f9;
            --ad-card: #ffffff;
            --ad-border: #e2e8f0;
            --ad-text: #1e293b;
            --ad-muted: #64748b;
        }

        .ad-wrap {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            background: var(--ad-bg);
            min-height: 100vh;
        }

        .ad-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .ad-header h1 {
            font-size: 22px;
            color: var(--ad-text);
            margin: 0;
        }

        .ad-header-meta {
            font-size: 12px;
            color: var(--ad-muted);
        }

        /* Tabs */
        .ad-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 20px;
            background: var(--ad-card);
            padding: 6px;
            border-radius: 12px;
            border: 1px solid var(--ad-border);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .ad-tab {
            padding: 8px 14px;
            border: none;
            background: transparent;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            color: var(--ad-muted);
            font-size: 13px;
            white-space: nowrap;
            transition: all 0.2s;
        }
        .ad-tab:hover { background: var(--ad-primary-light); color: var(--ad-primary); }
        .ad-tab.active { background: var(--ad-primary); color: #fff; }

        .ad-tab-content { display: none; }
        .ad-tab-content.active { display: block; }

        /* KPI Cards */
        .ad-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .ad-kpi {
            background: var(--ad-card);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid var(--ad-border);
            position: relative;
            overflow: hidden;
        }

        .ad-kpi-icon {
            font-size: 20px;
            margin-bottom: 8px;
        }

        .ad-kpi-value {
            font-size: 28px;
            font-weight: 800;
            color: var(--ad-text);
            line-height: 1.2;
        }

        .ad-kpi-label {
            font-size: 13px;
            color: var(--ad-muted);
            margin-top: 4px;
        }

        .ad-kpi-change {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            margin-top: 6px;
        }
        .ad-kpi-change.up { background: #d1fae5; color: #065f46; }
        .ad-kpi-change.down { background: #fee2e2; color: #991b1b; }
        .ad-kpi-change.neutral { background: #e2e8f0; color: #475569; }

        /* Charts & Cards */
        .ad-charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .ad-chart-card {
            background: var(--ad-card);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid var(--ad-border);
        }

        .ad-chart-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--ad-text);
            margin: 0 0 16px;
        }

        /* Tables */
        .ad-table-wrap {
            overflow-x: auto;
        }

        .ad-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .ad-table th {
            text-align: left;
            padding: 10px 12px;
            background: #f8fafc;
            color: var(--ad-muted);
            font-weight: 600;
            border-bottom: 2px solid var(--ad-border);
            font-size: 12px;
            text-transform: uppercase;
        }

        .ad-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--ad-border);
            color: var(--ad-text);
        }

        .ad-table tr:hover td { background: #f8fafc; }

        /* Progress bars */
        .ad-bar {
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
        }
        .ad-bar-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        /* Badge */
        .ad-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
        }
        .ad-badge-green { background: #d1fae5; color: #065f46; }
        .ad-badge-red { background: #fee2e2; color: #991b1b; }
        .ad-badge-blue { background: #dbeafe; color: #1e40af; }
        .ad-badge-yellow { background: #fef3c7; color: #92400e; }
        .ad-badge-purple { background: #ede9fe; color: #5b21b6; }

        /* Loading */
        .ad-loading {
            text-align: center;
            padding: 40px;
            color: var(--ad-muted);
        }
        .ad-loading i { font-size: 24px; margin-bottom: 8px; }

        /* Responsive */
        @media (max-width: 768px) {
            .ad-wrap { padding: 12px; }
            .ad-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .ad-charts-grid { grid-template-columns: 1fr; }
            .ad-kpi-value { font-size: 22px; }
            .ad-header h1 { font-size: 18px; }
        }
        @media (max-width: 480px) {
            .ad-kpi-grid { grid-template-columns: 1fr 1fr; }
        }
    </style>
{% endblock %}

{% block body %}
<div class="ad-wrap">

    <div class="ad-header">
        <div>
            <h1>📊 Analytics Dashboard</h1>
            <div class="ad-header-meta">Shamra Academia — Business Intelligence</div>
        </div>
        <div class="ad-header-meta" id="ad-last-updated"></div>
    </div>

    <!-- Tabs -->
    <div class="ad-tabs" id="ad-tabs">
        <button class="ad-tab active" data-tab="overview">📊 Overview</button>
        <button class="ad-tab" data-tab="users">👥 Users</button>
        <button class="ad-tab" data-tab="engagement">🔥 Engagement</button>
        <button class="ad-tab" data-tab="revenue">💰 Revenue</button>
        <button class="ad-tab" data-tab="ai-ops">🤖 AI Ops</button>
    </div>

    <!-- Tab: Overview -->
    <div class="ad-tab-content active" id="tab-overview">
        <div class="ad-loading"><i class="fa fa-spinner fa-spin"></i><br>Loading overview...</div>
    </div>

    <!-- Tab: Users -->
    <div class="ad-tab-content" id="tab-users">
        <div class="ad-loading"><i class="fa fa-spinner fa-spin"></i><br>Loading users...</div>
    </div>

    <!-- Tab: Engagement -->
    <div class="ad-tab-content" id="tab-engagement">
        <div class="ad-loading"><i class="fa fa-spinner fa-spin"></i><br>Loading engagement...</div>
    </div>

    <!-- Tab: Revenue -->
    <div class="ad-tab-content" id="tab-revenue">
        <div class="ad-loading"><i class="fa fa-spinner fa-spin"></i><br>Loading revenue...</div>
    </div>

    <!-- Tab: AI Ops -->
    <div class="ad-tab-content" id="tab-ai-ops">
        <div class="ad-loading"><i class="fa fa-spinner fa-spin"></i><br>Loading AI operations...</div>
    </div>

</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
    <script>
    (function() {
        'use strict';

        var loadedTabs = {};
        var charts = {};

        // ── Tab Switching ──────────────────────────────────
        document.querySelectorAll('.ad-tab').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var tab = this.dataset.tab;
                document.querySelectorAll('.ad-tab').forEach(function(b) { b.classList.remove('active'); });
                document.querySelectorAll('.ad-tab-content').forEach(function(c) { c.classList.remove('active'); });
                this.classList.add('active');
                document.getElementById('tab-' + tab).classList.add('active');
                loadTab(tab);
            });
        });

        function loadTab(tab) {
            if (loadedTabs[tab]) return;
            loadedTabs[tab] = true;

            var endpoints = {
                'overview': '/jim19ud83/dashboard/api/overview',
                'users': '/jim19ud83/dashboard/api/users',
                'engagement': '/jim19ud83/dashboard/api/engagement',
                'revenue': '/jim19ud83/dashboard/api/revenue',
                'ai-ops': '/jim19ud83/dashboard/api/ai-ops'
            };

            fetch(endpoints[tab])
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.success) {
                        renderTab(tab, data.data);
                    } else {
                        document.getElementById('tab-' + tab).innerHTML = '<div class="ad-loading" style="color:var(--ad-danger);">Error: ' + (data.error || 'Unknown') + '</div>';
                    }
                })
                .catch(function(err) {
                    document.getElementById('tab-' + tab).innerHTML = '<div class="ad-loading" style="color:var(--ad-danger);">Failed to load data</div>';
                });
        }

        // ── Render Overview ────────────────────────────────
        function renderTab(tab, data) {
            switch(tab) {
                case 'overview': renderOverview(data); break;
                case 'users': renderUsers(data); break;
                case 'engagement': renderEngagement(data); break;
                case 'revenue': renderRevenue(data); break;
                case 'ai-ops': renderAiOps(data); break;
            }
            document.getElementById('ad-last-updated').textContent = 'Updated: ' + new Date().toLocaleTimeString();
        }

        function renderOverview(data) {
            var s = data.stats;
            var el = document.getElementById('tab-overview');
            el.innerHTML = '' +
                '<div class="ad-kpi-grid">' +
                    kpiCard('👥', s.dau, 'DAU (Active Today)', changeTag(s.dau, s.dau_yesterday)) +
                    kpiCard('📝', s.signups_today, 'New Signups', changeTag(s.signups_today, s.signups_yesterday)) +
                    kpiCard('💰', '$' + s.mrr, 'MRR', '') +
                    kpiCard('🤖', s.ops_today, 'AI Ops Today', changeTag(s.ops_today, s.ops_yesterday)) +
                    kpiCard('⚡', s.credits_today, 'Credits Used', '') +
                    kpiCard('🎯', data.ai_health.success_rate + '%', 'AI Success (24h)', '') +
                    kpiCard('⏱️', (data.ai_health.avg_latency || 0) + 'ms', 'Avg Latency', '') +
                    kpiCard('👤', num(s.total_users), 'Total Users', '') +
                '</div>' +
                '<div class="ad-charts-grid">' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">📈 Signups (30 days)</h3><canvas id="chart-signups"></canvas></div>' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">🔥 Feature Usage (7 days)</h3><canvas id="chart-features"></canvas></div>' +
                '</div>';

            // Signup trend chart
            if (data.signup_trend && data.signup_trend.length > 0) {
                createLineChart('chart-signups',
                    data.signup_trend.map(function(r) { return r.date.substring(5); }),
                    data.signup_trend.map(function(r) { return r.count; }),
                    'Signups', '#6d28d9'
                );
            }

            // Feature usage donut
            if (data.feature_usage && data.feature_usage.length > 0) {
                var featureLabels = { 'chat': '💬 Chat', 'playground': '✍️ Writing', 'ocr': '📄 OCR', 'research_chat': '🔍 Research Chat', 'related_work': '📚 Related Work', 'ai_detection': '🛡 AI Detection', 'summarize': '📝 Summarize', 'other': '⚙️ Other' };
                createDonutChart('chart-features',
                    data.feature_usage.map(function(r) { return featureLabels[r.feature] || r.feature; }),
                    data.feature_usage.map(function(r) { return r.count; })
                );
            }
        }

        function renderUsers(data) {
            var el = document.getElementById('tab-users');
            el.innerHTML = '' +
                '<div class="ad-kpi-grid">' +
                    kpiCard('👤', num(data.total), 'Total Users', '') +
                    kpiCard('📅', num(data.dau), 'DAU', '') +
                    kpiCard('📆', num(data.wau), 'WAU', '') +
                    kpiCard('📊', num(data.mau), 'MAU', '') +
                    kpiCard('📌', data.stickiness + '%', 'Stickiness (DAU/MAU)', '') +
                '</div>' +
                '<div class="ad-charts-grid">' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">🌍 Top Countries</h3>' + renderSimpleTable(['Country', 'Users'], data.by_country.map(function(r) { return [r.country, r.count]; })) + '</div>' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">🔄 Top Returning Users (30d)</h3>' + renderSimpleTable(['User', 'Requests'], data.top_returning.map(function(r) { return [r.email, r.request_count]; })) + '</div>' +
                '</div>';
        }

        function renderEngagement(data) {
            var el = document.getElementById('tab-engagement');
            var s = data.search;
            el.innerHTML = '' +
                '<div class="ad-kpi-grid">' +
                    kpiCard('🔍', num(s.total_queries), 'Searches (7d)', '') +
                    kpiCard('👥', num(s.unique_users), 'Unique Searchers', '') +
                    kpiCard('📊', Math.round(s.avg_results || 0), 'Avg Results/Query', '') +
                    kpiCard('📝', num(data.social.posts_7d), 'Social Posts (7d)', '') +
                '</div>' +
                '<div class="ad-charts-grid">' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">🔍 Top Queries (24h)</h3>' + renderSimpleTable(['Query', 'Count', 'Avg Results'], data.top_queries.map(function(r) { return [r.query_text, r.count, Math.round(r.avg_results || 0)]; })) + '</div>' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">🔥 Feature Adoption (30d unique users)</h3>' + renderSimpleTable(['Feature', 'Unique Users'], data.feature_adoption.slice(0, 15).map(function(r) { return [r.operation_type, r.unique_users]; })) + '</div>' +
                '</div>';
        }

        function renderRevenue(data) {
            var el = document.getElementById('tab-revenue');
            el.innerHTML = '' +
                '<div class="ad-kpi-grid">' +
                    kpiCard('💰', '$' + data.mrr, 'MRR', '') +
                    kpiCard('🆓', num(data.trial_count), 'Trial Users', '') +
                    kpiCard('✅', num(data.trial_converted), 'Converted', '') +
                    kpiCard('📈', data.conversion_rate + '%', 'Trial→Paid', '') +
                '</div>' +
                '<div class="ad-charts-grid">' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">💳 Subscription Tiers</h3><canvas id="chart-tiers"></canvas></div>' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">📊 Tier Details</h3>' + renderSimpleTable(['Tier', 'Users', 'Revenue', 'Utilization'], data.tiers.map(function(r) { return [r.tier, r.count, '$' + r.revenue, r.utilization + '%']; })) + '</div>' +
                '</div>';

            if (data.tiers && data.tiers.length > 0) {
                createDonutChart('chart-tiers',
                    data.tiers.map(function(r) { return r.tier; }),
                    data.tiers.map(function(r) { return parseInt(r.count); })
                );
            }
        }

        function renderAiOps(data) {
            var el = document.getElementById('tab-ai-ops');
            var b = data.budget;
            el.innerHTML = '' +
                '<div class="ad-kpi-grid">' +
                    kpiCard('💵', '$' + b.week, 'Cost (7d)', budgetBar(b.week, b.week_limit)) +
                    kpiCard('📅', '$' + b.month, 'Cost (30d)', budgetBar(b.month, b.month_limit)) +
                '</div>' +
                '<div class="ad-charts-grid">' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">🤖 Operations by Type (7d)</h3>' + renderSimpleTable(['Operation', 'Count', 'Success%', 'Avg Latency', 'Cost'], data.by_operation.map(function(r) { var sr = r.count > 0 ? Math.round(r.success_count/r.count*100) : 100; return [r.operation_type, r.count, sr + '%', (r.avg_latency||0) + 'ms', '$' + (r.total_cost||0)]; })) + '</div>' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">📊 Models (7d)</h3>' + renderSimpleTable(['Model', 'Calls', 'Cost'], data.by_model.map(function(r) { return [r.model || 'unknown', r.count, '$' + (r.cost||0)]; })) + '</div>' +
                '</div>' +
                '<div class="ad-charts-grid">' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">📉 Error Trend (7d)</h3><canvas id="chart-errors"></canvas></div>' +
                    '<div class="ad-chart-card"><h3 class="ad-chart-title">❌ Top Errors</h3>' + renderSimpleTable(['Error', 'Count'], data.top_errors.map(function(r) { return [r.error, r.count]; })) + '</div>' +
                '</div>';

            if (data.error_trend && data.error_trend.length > 0) {
                createLineChart('chart-errors',
                    data.error_trend.map(function(r) { return r.date.substring(5); }),
                    data.error_trend.map(function(r) { return r.errors; }),
                    'Errors', '#ef4444'
                );
            }
        }

        // ── Helpers ────────────────────────────────────────
        function kpiCard(icon, value, label, extra) {
            return '<div class="ad-kpi"><div class="ad-kpi-icon">' + icon + '</div><div class="ad-kpi-value">' + value + '</div><div class="ad-kpi-label">' + label + '</div>' + (extra || '') + '</div>';
        }

        function changeTag(current, previous) {
            if (previous === 0 && current === 0) return '<span class="ad-kpi-change neutral">—</span>';
            if (previous === 0) return '<span class="ad-kpi-change up">↑ new</span>';
            var pct = Math.round(((current - previous) / previous) * 100);
            if (pct > 0) return '<span class="ad-kpi-change up">↑ ' + pct + '%</span>';
            if (pct < 0) return '<span class="ad-kpi-change down">↓ ' + Math.abs(pct) + '%</span>';
            return '<span class="ad-kpi-change neutral">→ 0%</span>';
        }

        function budgetBar(current, limit) {
            var pct = Math.min(100, Math.round((current / limit) * 100));
            var color = pct < 60 ? '#10b981' : (pct < 80 ? '#f59e0b' : '#ef4444');
            return '<div style="margin-top:8px;"><div class="ad-bar"><div class="ad-bar-fill" style="width:' + pct + '%;background:' + color + ';"></div></div><div style="font-size:11px;color:var(--ad-muted);margin-top:4px;">' + pct + '% of $' + limit + ' limit</div></div>';
        }

        function num(n) { return (n || 0).toLocaleString(); }

        function renderSimpleTable(headers, rows) {
            var html = '<div class="ad-table-wrap"><table class="ad-table"><thead><tr>';
            headers.forEach(function(h) { html += '<th>' + h + '</th>'; });
            html += '</tr></thead><tbody>';
            rows.forEach(function(row) {
                html += '<tr>';
                row.forEach(function(cell) { html += '<td>' + (cell !== null && cell !== undefined ? cell : '—') + '</td>'; });
                html += '</tr>';
            });
            if (rows.length === 0) html += '<tr><td colspan="' + headers.length + '" style="text-align:center;color:var(--ad-muted);">No data</td></tr>';
            html += '</tbody></table></div>';
            return html;
        }

        function createLineChart(canvasId, labels, data, label, color) {
            var ctx = document.getElementById(canvasId);
            if (!ctx) return;
            if (charts[canvasId]) charts[canvasId].destroy();
            charts[canvasId] = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: label,
                        data: data,
                        borderColor: color,
                        backgroundColor: color + '20',
                        fill: true,
                        tension: 0.3,
                        pointRadius: 3,
                        pointHoverRadius: 6,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
                }
            });
        }

        function createDonutChart(canvasId, labels, data) {
            var ctx = document.getElementById(canvasId);
            if (!ctx) return;
            var colors = ['#6d28d9','#3b82f6','#10b981','#f59e0b','#ef4444','#ec4899','#8b5cf6','#06b6d4','#84cc16','#f97316'];
            if (charts[canvasId]) charts[canvasId].destroy();
            charts[canvasId] = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{ data: data, backgroundColor: colors.slice(0, data.length), borderWidth: 2, borderColor: '#fff' }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { position: 'bottom', labels: { padding: 12, font: { size: 12 } } } }
                }
            });
        }

        // ── Auto-refresh ───────────────────────────────────
        setInterval(function() {
            loadedTabs = {};
            var activeTab = document.querySelector('.ad-tab.active');
            if (activeTab) loadTab(activeTab.dataset.tab);
        }, 300000); // 5 minutes

        // ── Initial Load ───────────────────────────────────
        loadTab('overview');
    })();
    </script>
{% endblock %}