{% extends "base.html" %}
{% block title %}{% trans %}QR Code Analytics Dashboard{% endtrans %}{% endblock %}

{% block content %}
<div class="hero-gradient py-8 px-4">
    <div class="max-w-5xl mx-auto">
        <div class="flex flex-wrap items-center gap-3">
            <a href="/qr-code-generator/my-codes" class="text-white/70 hover:text-white text-sm"><i class="fa fa-arrow-left mr-1"></i>{% trans %}My Codes{% endtrans %}</a>
            <span class="text-white/30">/</span>
            <h1 class="text-2xl font-bold text-white">{% trans %}Analytics Dashboard{% endtrans %}</h1>
        </div>
        <p class="text-white/70 text-sm mt-1">{% trans %}Showing last{% endtrans %} {{ analytics_days }} {% trans %}days of scan data{% endtrans %}</p>
    </div>
</div>

<div class="max-w-5xl mx-auto px-4 py-8">

    <!-- Summary Stats -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
            <p class="text-2xl font-bold text-primary">{{ total_scans }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Total Scans{% endtrans %}</p>
        </div>
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
            <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ total_unique }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Unique Scans{% endtrans %}</p>
        </div>
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
            <p class="text-2xl font-bold text-primary">{{ codes|length }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}QR Codes{% endtrans %}</p>
        </div>
        {% set mobile_pct = 0 %}
        {% for d in device_totals %}{% if d.device_type == 'mobile' %}{% set mobile_pct = (d.cnt / (total_scans or 1) * 100)|round|int %}{% endif %}{% endfor %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
            <p class="text-2xl font-bold text-primary">{{ mobile_pct }}%</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Mobile Scans{% endtrans %}</p>
        </div>
    </div>

    <!-- Daily Scan Chart -->
    {% if daily_totals %}
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 mb-6">
        <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-4">{% trans %}Scans Over Time{% endtrans %}</p>
        <canvas id="dailyChart" height="120"></canvas>
    </div>
    {% endif %}

    <!-- Device Breakdown + Per-Code Table -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-6">
        {% if device_totals %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-4">{% trans %}Device Breakdown{% endtrans %}</p>
            <canvas id="deviceChart" height="160"></canvas>
            <div class="mt-3 space-y-1">
                {% for d in device_totals %}
                <div class="flex justify-between text-xs">
                    <span class="text-gray-600 dark:text-gray-400 capitalize">{{ d.device_type }}</span>
                    <span class="font-semibold text-gray-800 dark:text-gray-200">{{ d.cnt }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <div class="sm:col-span-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-4">{% trans %}Top QR Codes{% endtrans %}</p>
            {% if codes %}
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-left text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800">
                            <th class="pb-2 pr-3 font-medium">{% trans %}Label / Type{% endtrans %}</th>
                            <th class="pb-2 font-medium text-right">{% trans %}Scans{% endtrans %}</th>
                            <th class="pb-2 pl-3 font-medium text-right">{% trans %}Details{% endtrans %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for qr in codes %}
                        <tr class="border-b border-gray-50 dark:border-gray-800/50">
                            <td class="py-2 pr-3">
                                <p class="font-medium text-gray-800 dark:text-gray-200 truncate max-w-[200px]">{{ qr.label or qr.qr_type }}</p>
                                <p class="text-xs text-gray-400">{{ qr.qr_type }}</p>
                            </td>
                            <td class="py-2 text-right font-semibold text-gray-800 dark:text-gray-200">{{ qr.scan_count }}</td>
                            <td class="py-2 pl-3 text-right">
                                <a href="/qr-code-generator/analytics/{{ qr.id }}" class="text-xs text-primary hover:underline">{% trans %}View{% endtrans %}</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-sm text-gray-400 text-center py-8">{% trans %}No QR codes yet.{% endtrans %}</p>
            {% endif %}
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function(){
    var isDark = document.documentElement.classList.contains('dark');
    var gridColor = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)';
    var textColor = isDark ? '#9ca3af' : '#6b7280';

    {% if daily_totals %}
    var dailyLabels = {{ daily_totals | map(attribute='scan_date') | list | tojson }};
    var dailyCounts = {{ daily_totals | map(attribute='cnt') | list | tojson }};
    new Chart(document.getElementById('dailyChart'), {
        type: 'bar',
        data: {
            labels: dailyLabels,
            datasets: [{
                label: '{% trans %}Scans{% endtrans %}',
                data: dailyCounts,
                backgroundColor: 'rgba(99,102,241,0.75)',
                borderRadius: 5,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { color: gridColor }, ticks: { color: textColor } },
                y: { grid: { color: gridColor }, ticks: { color: textColor, precision: 0 } },
            }
        }
    });
    {% endif %}

    {% if device_totals %}
    var deviceLabels = {{ device_totals | map(attribute='device_type') | list | tojson }};
    var deviceCounts = {{ device_totals | map(attribute='cnt') | list | tojson }};
    new Chart(document.getElementById('deviceChart'), {
        type: 'doughnut',
        data: {
            labels: deviceLabels,
            datasets: [{
                data: deviceCounts,
                backgroundColor: ['rgba(99,102,241,0.8)','rgba(16,185,129,0.8)','rgba(245,158,11,0.8)'],
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
        }
    });
    {% endif %}
})();
</script>
{% endblock %}