{% extends "base.html" %}
{% set active_page = "analytics" %}

{% block title %}Analytics — IETF Draft Analyzer{% endblock %}

{% block extra_head %}<script src="/static/js/plotly.min.js"></script>{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-white">Site Analytics</h1>
    <p class="text-slate-400 text-sm mt-1">GDPR-compliant traffic overview. No cookies, no personal data stored. Visitor uniqueness estimated via daily-rotating salted hashes (cannot be correlated across days).</p>
</div>

<!-- Stat cards -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 mb-8">
    <div class="rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-blue-400"></div>
        <div class="text-2xl font-bold text-blue-400">{{ data.stats.total_views }}</div>
        <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">Total Views</div>
    </div>
    <div class="rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 to-emerald-400"></div>
        <div class="text-2xl font-bold text-emerald-400">{{ data.stats.total_visitors }}</div>
        <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">Total Visits</div>
    </div>
    <div class="rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-purple-400"></div>
        <div class="text-2xl font-bold text-purple-400">{{ data.stats.total_downloads }}</div>
        <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">Downloads</div>
    </div>
    <div class="rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-amber-500 to-amber-400"></div>
        <div class="text-2xl font-bold text-amber-400">{{ data.stats.today_views }}</div>
        <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">Today Views</div>
    </div>
    <div class="rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-500 to-cyan-400"></div>
        <div class="text-2xl font-bold text-cyan-400">{{ data.stats.today_visitors }}</div>
        <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">Today Visitors</div>
    </div>
    <div class="rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-rose-500 to-rose-400"></div>
        <div class="text-2xl font-bold text-rose-400">{{ data.stats.week_views }}</div>
        <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">7-Day Views</div>
    </div>
    <div class="rounded-xl border border-slate-800 p-4 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 to-indigo-400"></div>
        <div class="text-2xl font-bold text-indigo-400">{{ data.stats.month_views }}</div>
        <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider">30-Day Views</div>
    </div>
</div>

<!-- Charts row 1: Daily traffic + Hourly pattern -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <h2 class="text-sm font-semibold text-slate-300 mb-3">Daily Traffic (Last 30 Days)</h2>
        <div id="dailyChart" style="height: 300px;"></div>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <h2 class="text-sm font-semibold text-slate-300 mb-3">Hourly Pattern (Last 7 Days)</h2>
        <div id="hourlyChart" style="height: 300px;"></div>
    </div>
</div>

<!-- Charts row 2: Top pages + Top referrers -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <h2 class="text-sm font-semibold text-slate-300 mb-3">Top Pages (Last 30 Days)</h2>
        {% if data.top_pages %}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-700 text-slate-400 text-xs uppercase">
                        <th class="text-left py-2 pr-4">Path</th>
                        <th class="text-right py-2 px-2">Views</th>
                        <th class="text-right py-2 pl-2">Visitors</th>
                    </tr>
                </thead>
                <tbody>
                    {% for page in data.top_pages %}
                    <tr class="border-b border-slate-800/50 hover:bg-slate-800/30">
                        <td class="py-1.5 pr-4 text-slate-300 font-mono text-xs truncate max-w-xs">{{ page.path }}</td>
                        <td class="py-1.5 px-2 text-right text-blue-400">{{ page.views }}</td>
                        <td class="py-1.5 pl-2 text-right text-emerald-400">{{ page.visitors }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-slate-500 text-sm text-center mt-10">No page view data yet</p>
        {% endif %}
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <h2 class="text-sm font-semibold text-slate-300 mb-3">Top Referrers (Last 30 Days)</h2>
        {% if data.top_referrers %}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-700 text-slate-400 text-xs uppercase">
                        <th class="text-left py-2 pr-4">Source</th>
                        <th class="text-right py-2">Visits</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ref in data.top_referrers %}
                    <tr class="border-b border-slate-800/50 hover:bg-slate-800/30">
                        <td class="py-1.5 pr-4 text-slate-300 text-xs">{{ ref.referrer }}</td>
                        <td class="py-1.5 text-right text-amber-400">{{ ref.count }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-slate-500 text-sm text-center mt-10">No referrer data yet</p>
        {% endif %}
    </div>
</div>

<!-- Downloads over time -->
<div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
    <h2 class="text-sm font-semibold text-slate-300 mb-3">Downloads Over Time</h2>
    <div id="downloadsChart" style="height: 250px;"></div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
const PLOTLY_LAYOUT = {
    paper_bgcolor: 'transparent',
    plot_bgcolor: 'transparent',
    font: { color: '#94a3b8', family: 'Inter, system-ui, sans-serif', size: 12 },
    margin: { t: 20, r: 20, b: 40, l: 50 },
    xaxis: { gridcolor: '#1e293b', zerolinecolor: '#334155' },
    yaxis: { gridcolor: '#1e293b', zerolinecolor: '#334155' },
};
const PLOTLY_CONFIG = { responsive: true, displayModeBar: false };

// --- Daily traffic ---
const daily = {{ data.daily | tojson }};
if (daily.dates && daily.dates.length > 0) {
    Plotly.newPlot('dailyChart', [
        {
            x: daily.dates, y: daily.views,
            type: 'scatter', mode: 'lines+markers',
            name: 'Views',
            line: { color: '#3b82f6', width: 2 },
            marker: { size: 4 },
            hovertemplate: '%{x}<br>Views: %{y}<extra></extra>',
        },
        {
            x: daily.dates, y: daily.visitors,
            type: 'scatter', mode: 'lines+markers',
            name: 'Visitors',
            line: { color: '#22c55e', width: 2 },
            marker: { size: 4 },
            hovertemplate: '%{x}<br>Visitors: %{y}<extra></extra>',
        },
    ], {
        ...PLOTLY_LAYOUT,
        legend: { font: { size: 10, color: '#94a3b8' }, orientation: 'h', y: 1.1 },
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Date', font: { size: 11 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Count', font: { size: 11 } } },
    }, PLOTLY_CONFIG);
} else {
    document.getElementById('dailyChart').innerHTML = '<p class="text-slate-500 text-sm text-center mt-20">No traffic data yet — check back after some visits</p>';
}

// --- Hourly pattern ---
const hourly = {{ data.hourly | tojson }};
if (hourly.hours) {
    const hourLabels = hourly.hours.map(h => h.toString().padStart(2, '0') + ':00');
    Plotly.newPlot('hourlyChart', [{
        x: hourLabels, y: hourly.views,
        type: 'bar',
        marker: { color: 'rgba(168, 85, 247, 0.7)', line: { color: '#a855f7', width: 1 } },
        hovertemplate: '%{x}<br>Views: %{y}<extra></extra>',
    }], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Hour (UTC)', font: { size: 11 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Views', font: { size: 11 } } },
    }, PLOTLY_CONFIG);
} else {
    document.getElementById('hourlyChart').innerHTML = '<p class="text-slate-500 text-sm text-center mt-20">No hourly data yet</p>';
}

// --- Downloads ---
const downloads = {{ data.downloads_daily | tojson }};
if (downloads.dates && downloads.dates.length > 0) {
    Plotly.newPlot('downloadsChart', [{
        x: downloads.dates, y: downloads.counts,
        type: 'bar',
        marker: { color: 'rgba(245, 158, 11, 0.7)', line: { color: '#f59e0b', width: 1 } },
        hovertemplate: '%{x}<br>Downloads: %{y}<extra></extra>',
    }], {
        ...PLOTLY_LAYOUT,
        xaxis: { ...PLOTLY_LAYOUT.xaxis, title: { text: 'Date', font: { size: 11 } } },
        yaxis: { ...PLOTLY_LAYOUT.yaxis, title: { text: 'Downloads', font: { size: 11 } } },
    }, PLOTLY_CONFIG);
} else {
    document.getElementById('downloadsChart').innerHTML = '<p class="text-slate-500 text-sm text-center mt-20">No downloads yet</p>';
}
</script>
{% endblock %}