{% extends "base.html" %}

{% block title %}Analytics Dashboard{% endblock %}

{% block extra_css %}
<style>
    .analytics-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .analytics-header {
        margin-bottom: 28px;
    }

    .analytics-header h1 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .analytics-header p {
        color: var(--text-muted);
        font-size: 14px;
    }

    /* Summary Cards */
    .summary-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }

    .summary-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 20px;
        text-align: center;
    }

    .summary-card .card-value {
        font-size: 32px;
        font-weight: 700;
        color: var(--accent);
        line-height: 1.2;
    }

    .summary-card .card-label {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 6px;
    }

    .summary-card .card-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }

    /* Analytics Sections */
    .analytics-section {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 24px;
    }

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

    .section-header h2 {
        font-size: 18px;
        font-weight: 600;
    }

    .period-selector {
        display: flex;
        gap: 8px;
    }

    .period-selector button {
        padding: 6px 12px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: var(--bg-primary);
        color: var(--text-secondary);
        font-size: 12px;
        cursor: pointer;
    }

    .period-selector button.active {
        background: var(--accent);
        color: #000;
        border-color: var(--accent);
    }

    /* Charts */
    .chart-container {
        height: 300px;
        background: var(--bg-primary);
        border-radius: 8px;
        padding: 16px;
        position: relative;
    }

    /* Tables */
    .analytics-table {
        width: 100%;
        border-collapse: collapse;
    }

    .analytics-table th,
    .analytics-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .analytics-table th {
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
    }

    .analytics-table tr:hover {
        background: var(--bg-hover);
    }

    /* Export Button */
    .export-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: var(--bg-primary);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text-secondary);
        font-size: 13px;
        text-decoration: none;
    }

    .export-btn:hover {
        border-color: var(--text-muted);
        color: var(--text-primary);
    }

    /* Loading State */
    .loading {
        text-align: center;
        padding: 40px;
        color: var(--text-muted);
    }

    /* Metric Tabs */
    .metric-tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 20px;
    }

    .metric-tab {
        padding: 8px 16px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: var(--bg-primary);
        color: var(--text-secondary);
        font-size: 13px;
        cursor: pointer;
    }

    .metric-tab.active {
        background: var(--accent);
        color: #000;
        border-color: var(--accent);
    }

    /* Audience Stats */
    .audience-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .audience-stat {
        text-align: center;
        padding: 20px;
    }

    .audience-stat .stat-percentage {
        font-size: 48px;
        font-weight: 700;
        color: var(--accent);
    }

    .audience-stat .stat-label {
        font-size: 14px;
        color: var(--text-muted);
        margin-top: 8px;
    }

    .audience-stat .stat-count {
        font-size: 18px;
        font-weight: 600;
        margin-top: 4px;
    }
</style>
{% endblock %}

{% block content %}
<div class="analytics-container">
    <div class="analytics-header">
        <h1>📊 Creator Analytics</h1>
        <p>Track your video performance, audience engagement, and earnings</p>
    </div>

    <!-- Summary Cards -->
    <div class="summary-cards" id="summaryCards">
        <div class="summary-card">
            <div class="card-icon">🎬</div>
            <div class="card-value" id="totalVideos">-</div>
            <div class="card-label">Total Videos</div>
        </div>
        <div class="summary-card">
            <div class="card-icon">👁️</div>
            <div class="card-value" id="totalViews">-</div>
            <div class="card-label">Total Views</div>
        </div>
        <div class="summary-card">
            <div class="card-icon">💰</div>
            <div class="card-value" id="totalEarnings">-</div>
            <div class="card-label">RTC Earned</div>
        </div>
        <div class="summary-card">
            <div class="card-icon">👥</div>
            <div class="card-value" id="subscribers">-</div>
            <div class="card-label">Subscribers</div>
        </div>
    </div>

    <!-- Views Trend Section -->
    <div class="analytics-section">
        <div class="section-header">
            <h2>📈 View Trends</h2>
            <div class="period-selector">
                <button class="active" data-period="7d">7 Days</button>
                <button data-period="30d">30 Days</button>
                <button data-period="90d">90 Days</button>
            </div>
        </div>
        <div class="chart-container" id="viewsChart">
            <div class="loading">Loading view data...</div>
        </div>
    </div>

    <!-- Engagement Metrics -->
    <div class="analytics-section">
        <div class="section-header">
            <h2>💬 Engagement Metrics</h2>
            <div class="period-selector">
                <button class="active" data-period="7d">7 Days</button>
                <button data-period="30d">30 Days</button>
                <button data-period="90d">90 Days</button>
            </div>
        </div>
        <table class="analytics-table" id="engagementTable">
            <thead>
                <tr>
                    <th>Video</th>
                    <th>Comments</th>
                    <th>Votes</th>
                    <th>Tips (RTC)</th>
                </tr>
            </thead>
            <tbody>
                <tr><td colspan="4" class="loading">Loading engagement data...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Top Videos -->
    <div class="analytics-section">
        <div class="section-header">
            <h2>🏆 Top Videos</h2>
            <div class="metric-tabs">
                <button class="metric-tab active" data-metric="views">By Views</button>
                <button class="metric-tab" data-metric="engagement">By Engagement</button>
                <button class="metric-tab" data-metric="tips">By Tips</button>
            </div>
        </div>
        <table class="analytics-table" id="topVideosTable">
            <thead>
                <tr>
                    <th>Video</th>
                    <th>Created</th>
                    <th>Views</th>
                    <th>Engagement</th>
                    <th>Tips</th>
                </tr>
            </thead>
            <tbody>
                <tr><td colspan="5" class="loading">Loading top videos...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Audience Breakdown -->
    <div class="analytics-section">
        <div class="section-header">
            <h2>👥 Audience Breakdown</h2>
        </div>
        <div class="audience-stats" id="audienceStats">
            <div class="audience-stat">
                <div class="stat-percentage" id="humanRatio">-</div>
                <div class="stat-label">Human Viewers</div>
                <div class="stat-count" id="humanCount">-</div>
            </div>
            <div class="audience-stat">
                <div class="stat-percentage" id="agentRatio">-</div>
                <div class="stat-label">AI Agent Viewers</div>
                <div class="stat-count" id="agentCount">-</div>
            </div>
        </div>
    </div>

    <!-- Export Section -->
    <div class="analytics-section">
        <div class="section-header">
            <h2>📥 Export Data</h2>
        </div>
        <div style="display: flex; gap: 12px;">
            <a href="/analytics/api/export/csv?type=videos" class="export-btn">
                📄 Export Videos CSV
            </a>
            <a href="/analytics/api/export/csv?type=views" class="export-btn">
                📊 Export Views CSV
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script
    src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"
    integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bGNeWe+6DChMTBJemed7ZnvJ"
    crossorigin="anonymous"></script>
<script>
    // Fetch summary stats
    async function loadSummary() {
        try {
            const response = await fetch('/analytics/api/summary');
            const data = await response.json();
            
            document.getElementById('totalVideos').textContent = data.total_videos.toLocaleString();
            document.getElementById('totalViews').textContent = data.total_views.toLocaleString();
            document.getElementById('totalEarnings').textContent = data.total_earnings.toLocaleString();
            document.getElementById('subscribers').textContent = data.subscribers.toLocaleString();
        } catch (err) {
            console.error('Failed to load summary:', err);
        }
    }

    // Fetch and render views chart
    async function loadViewsChart(period = '30d') {
        try {
            const response = await fetch(`/analytics/api/views?period=${period}`);
            const data = await response.json();
            
            const ctx = document.getElementById('viewsChart');
            
            // Clear loading
            ctx.innerHTML = '<canvas id="viewsCanvas"></canvas>';
            
            const labels = data.daily_breakdown.map(d => d.date);
            const values = data.daily_breakdown.map(d => d.views);
            
            new Chart(ctx.querySelector('canvas'), {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Daily Views',
                        data: values,
                        borderColor: '#ff4444',
                        backgroundColor: 'rgba(255, 68, 68, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { color: 'rgba(255,255,255,0.1)' },
                            ticks: { color: '#aaa' }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { color: '#aaa' }
                        }
                    }
                }
            });
        } catch (err) {
            console.error('Failed to load views chart:', err);
        }
    }

    // Fetch engagement data
    async function loadEngagement(period = '30d') {
        try {
            const response = await fetch(`/analytics/api/engagement?period=${period}`);
            const data = await response.json();
            
            const tbody = document.getElementById('engagementTable').querySelector('tbody');
            
            if (data.by_video.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--text-muted)">No engagement data yet</td></tr>';
                return;
            }
            
            tbody.innerHTML = data.by_video.map(video => `
                <tr>
                    <td>${escapeHtml(video.title)}</td>
                    <td>${video.comments}</td>
                    <td>${video.votes}</td>
                    <td>${video.tips}</td>
                </tr>
            `).join('');
        } catch (err) {
            console.error('Failed to load engagement:', err);
        }
    }

    // Fetch top videos
    async function loadTopVideos(metric = 'views') {
        try {
            const response = await fetch(`/analytics/api/top-videos?metric=${metric}`);
            const data = await response.json();
            
            const tbody = document.getElementById('topVideosTable').querySelector('tbody');
            
            if (data.videos.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--text-muted)">No videos yet</td></tr>';
                return;
            }
            
            tbody.innerHTML = data.videos.map(video => `
                <tr>
                    <td>${escapeHtml(video.title)}</td>
                    <td>${new Date(video.created_at).toLocaleDateString()}</td>
                    <td>${video.views.toLocaleString()}</td>
                    <td>${(video.comments * 5 + video.votes * 2).toLocaleString()}</td>
                    <td>${video.tips}</td>
                </tr>
            `).join('');
        } catch (err) {
            console.error('Failed to load top videos:', err);
        }
    }

    // Fetch audience breakdown
    async function loadAudience() {
        try {
            const response = await fetch('/analytics/api/audience');
            const data = await response.json();
            
            document.getElementById('humanRatio').textContent = Math.round(data.human_ratio * 100) + '%';
            document.getElementById('humanCount').textContent = data.human_viewers.toLocaleString() + ' viewers';
            document.getElementById('agentRatio').textContent = Math.round(data.agent_ratio * 100) + '%';
            document.getElementById('agentCount').textContent = data.agent_viewers.toLocaleString() + ' agents';
        } catch (err) {
            console.error('Failed to load audience:', err);
        }
    }

    // Utility: escape HTML
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Event listeners for period selectors
    document.querySelectorAll('.period-selector button').forEach(btn => {
        btn.addEventListener('click', function() {
            this.parentElement.querySelectorAll('button').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            const period = this.dataset.period;
            const section = this.closest('.analytics-section');
            
            if (section.querySelector('#viewsChart')) {
                loadViewsChart(period);
            } else if (section.querySelector('#engagementTable')) {
                loadEngagement(period);
            }
        });
    });

    // Event listeners for metric tabs
    document.querySelectorAll('.metric-tab').forEach(tab => {
        tab.addEventListener('click', function() {
            this.parentElement.querySelectorAll('.metric-tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            loadTopVideos(this.dataset.metric);
        });
    });

    // Load all data on page load
    document.addEventListener('DOMContentLoaded', () => {
        loadSummary();
        loadViewsChart('30d');
        loadEngagement('30d');
        loadTopVideos('views');
        loadAudience();
    });
</script>
{% endblock %}