{% extends "base.html" %}
{% block title %}{% trans %}QR Analytics{% endtrans %} — {{ qr.label or ('QR #' ~ qr.id) }}{% endblock %}

{% block content %}
<div class="hero-gradient py-8 px-4 text-center">
    <h1 class="text-2xl sm:text-3xl font-bold text-white drop-shadow mb-1">
        <i class="fa fa-chart-bar mr-2"></i>{% trans %}Scan Analytics{% endtrans %}
    </h1>
    <p class="text-white/75 text-sm">{{ qr.label or ('QR #' ~ qr.id) }}</p>
</div>

<div class="max-w-6xl mx-auto px-4 py-8">
    <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
        <a href="/qr-code-generator/my-codes" class="text-sm text-gray-500 dark:text-gray-400 hover:text-primary">
            <i class="fa fa-arrow-left mr-1"></i>{% trans %}Back to My QR Codes{% endtrans %}
        </a>
        {% if csv_allowed %}
        <a href="/qr-code-generator/analytics/{{ qr.id }}/export.csv"
           class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition">
            <i class="fa fa-download"></i>{% trans %}Export CSV{% endtrans %}
        </a>
        {% else %}
        <span class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm text-gray-400 cursor-not-allowed"
              title="{% trans %}CSV export requires a higher plan{% endtrans %}">
            <i class="fa fa-download"></i>{% trans %}Export CSV{% endtrans %}
            <span class="text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-1.5 py-0.5 rounded ml-1">{% trans %}Upgrade{% endtrans %}</span>
        </span>
        {% endif %}
    </div>

    <!-- Stats cards -->
    <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-xs text-gray-500 dark:text-gray-400 mb-1">{% trans %}Total Scans{% endtrans %}</p>
            <p class="text-2xl font-bold text-primary">{{ total_scans or qr.scan_count or 0 }}</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-xs text-gray-500 dark:text-gray-400 mb-1">{% trans %}Unique Scans{% endtrans %}</p>
            <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ unique_scans or 0 }}</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-xs text-gray-500 dark:text-gray-400 mb-1">{% trans %}Type{% endtrans %}</p>
            <p class="text-lg font-bold text-gray-800 dark:text-white capitalize">{{ qr.qr_type }}</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-xs text-gray-500 dark:text-gray-400 mb-1">{% trans %}Created{% endtrans %}</p>
            <p class="text-sm font-bold text-gray-800 dark:text-white">{{ qr.created_at[:10] if qr.created_at else '—' }}</p>
        </div>
    </div>

    <!-- Chart -->
    {% if scans %}
    <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-700 dark:text-gray-200 mb-4">{% trans %}Scans Over Time{% endtrans %}</p>
        <canvas id="scans-chart" height="100"></canvas>
    </div>
    {% endif %}

    <!-- Device breakdown -->
    {% if device_breakdown %}
    <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-700 dark:text-gray-200 mb-4">{% trans %}Device Breakdown{% endtrans %}</p>
        <div class="flex flex-wrap gap-4">
            {% for d in device_breakdown %}
            <div class="flex items-center gap-2">
                {% if d.device_type == 'mobile' %}
                  <i class="fa fa-mobile-alt text-blue-500 w-4 text-center"></i>
                {% elif d.device_type == 'tablet' %}
                  <i class="fa fa-tablet-alt text-purple-500 w-4 text-center"></i>
                {% else %}
                  <i class="fa fa-desktop text-gray-500 w-4 text-center"></i>
                {% endif %}
                <span class="text-sm text-gray-700 dark:text-gray-300 capitalize">{{ d.device_type }}</span>
                <span class="text-sm font-semibold text-gray-800 dark:text-white">{{ d.cnt }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Country breakdown (GPS plan feature) -->
    {% if gps_allowed and country_breakdown %}
    <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-700 dark:text-gray-200 mb-4">{% trans %}Country Breakdown{% endtrans %}</p>
        <div class="space-y-2">
            {% for c in country_breakdown %}
            <div class="flex justify-between items-center text-sm">
                <span class="text-gray-700 dark:text-gray-300">{{ c.country or 'Unknown' }}</span>
                <span class="font-semibold text-gray-800 dark:text-white">{{ c.cnt }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% elif not gps_allowed %}
    <div class="rounded-xl border border-gray-200 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 mb-6 flex items-start gap-3">
        <i class="fa fa-map-marker-alt text-amber-500 mt-0.5"></i>
        <div>
            <p class="text-xs font-semibold text-amber-700 dark:text-amber-400">{% trans %}Country / GPS Analytics{% endtrans %}</p>
            <p class="text-xs text-amber-600 dark:text-amber-500">
                {% trans %}<a href="/pricing" class="underline font-semibold">Upgrade your plan</a> to see country-level and GPS location analytics{% endtrans %}
            </p>
        </div>
    </div>
    {% endif %}

    <!-- Recent scans table -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">{% trans %}Scan Log{% endtrans %}</p>
            {% if recent %}
            <span class="text-xs text-gray-400">{{ recent | length }} {% trans %}entries{% endtrans %}</span>
            {% endif %}
        </div>
        {% if recent %}
        <div class="overflow-x-auto -mx-2">
            <table class="w-full text-sm min-w-[700px]">
                <thead>
                    <tr class="text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800">
                        <th class="text-left pb-2 px-2">{% trans %}Date / Time{% endtrans %}</th>
                        <th class="text-left pb-2 px-2">{% trans %}Device{% endtrans %}</th>
                        <th class="text-left pb-2 px-2">{% trans %}Browser{% endtrans %}</th>
                        <th class="text-left pb-2 px-2">{% trans %}OS{% endtrans %}</th>
                        <th class="text-left pb-2 px-2">{% trans %}Country{% endtrans %}</th>
                        <th class="text-left pb-2 px-2">{% trans %}GPS Location{% endtrans %}</th>
                        <th class="text-left pb-2 px-2">{% trans %}Referrer{% endtrans %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for scan in recent %}
                    <tr class="border-b border-gray-50 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50">
                        <!-- Date / unique badge -->
                        <td class="py-2 px-2 whitespace-nowrap">
                            <span class="text-gray-600 dark:text-gray-400">{{ scan.scanned_at[:16] if scan.scanned_at else '—' }}</span>
                            {% if scan.is_unique %}
                            <span class="ml-1 text-[9px] px-1 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded font-semibold uppercase tracking-wide">NEW</span>
                            {% endif %}
                        </td>
                        <!-- Device type icon -->
                        <td class="py-2 px-2 capitalize text-gray-600 dark:text-gray-400">
                            {% if scan.device_type == 'mobile' %}
                              <i class="fa fa-mobile-alt text-blue-400 mr-1"></i>
                            {% elif scan.device_type == 'tablet' %}
                              <i class="fa fa-tablet-alt text-purple-400 mr-1"></i>
                            {% else %}
                              <i class="fa fa-desktop text-gray-400 mr-1"></i>
                            {% endif %}
                            {{ scan.device_type or '—' }}
                        </td>
                        <!-- Browser -->
                        <td class="py-2 px-2 text-gray-600 dark:text-gray-400">
                            {% set br = scan.browser or '' %}
                            {% if 'Chrome' in br %}<i class="fa fa-chrome text-yellow-500 mr-1"></i>
                            {% elif 'Firefox' in br %}<i class="fa fa-firefox text-orange-500 mr-1"></i>
                            {% elif 'Safari' in br %}<i class="fa fa-safari text-blue-500 mr-1"></i>
                            {% elif 'Edge' in br %}<i class="fa fa-edge text-blue-600 mr-1"></i>
                            {% else %}<i class="fa fa-globe text-gray-400 mr-1"></i>{% endif %}
                            {{ br or '—' }}
                        </td>
                        <!-- OS -->
                        <td class="py-2 px-2 text-gray-600 dark:text-gray-400">
                            {% set os = scan.os_name or '' %}
                            {% if 'iOS' in os or 'macOS' in os %}<i class="fa fa-apple text-gray-600 dark:text-gray-400 mr-1"></i>
                            {% elif 'Android' in os %}<i class="fa fa-android text-green-500 mr-1"></i>
                            {% elif 'Windows' in os %}<i class="fa fa-windows text-blue-500 mr-1"></i>
                            {% elif 'Linux' in os or 'ChromeOS' in os %}<i class="fa fa-linux text-gray-500 mr-1"></i>
                            {% else %}<i class="fa fa-question-circle text-gray-300 mr-1"></i>{% endif %}
                            {{ os or '—' }}
                        </td>
                        <!-- Country -->
                        <td class="py-2 px-2 text-gray-600 dark:text-gray-400">
                            {{ scan.country or '—' }}
                        </td>
                        <!-- GPS / Google Maps -->
                        <td class="py-2 px-2">
                            {% if scan.latitude and scan.longitude %}
                            <a href="https://www.google.com/maps?q={{ scan.latitude }},{{ scan.longitude }}"
                               target="_blank" rel="noopener noreferrer"
                               class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800 hover:bg-green-100 transition font-mono whitespace-nowrap">
                                <i class="fa fa-map-marker-alt text-red-500"></i>
                                {{ "%.5f"|format(scan.latitude) }}, {{ "%.5f"|format(scan.longitude) }}
                            </a>
                            {% else %}
                            <span class="text-xs text-gray-300 dark:text-gray-600">—</span>
                            {% endif %}
                        </td>
                        <!-- Referrer -->
                        <td class="py-2 px-2 text-gray-400 dark:text-gray-500 max-w-[180px] truncate text-xs">
                            {{ scan.referer or '—' }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-gray-400 text-sm text-center py-4">{% trans %}No scans recorded in the selected period{% endtrans %}</p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block page_scripts %}
{% if scans %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function(){
    var labels = {{ scans | map(attribute='scan_date') | list | tojson }};
    var data   = {{ scans | map(attribute='cnt')       | list | tojson }};
    var isDark = document.documentElement.classList.contains('dark');
    var gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.07)';
    var textColor = isDark ? '#94a3b8' : '#64748b';
    new Chart(document.getElementById('scans-chart'), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '{% trans %}Scans{% endtrans %}',
                data: data,
                backgroundColor: 'rgba(59,130,246,0.7)',
                borderRadius: 4,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { color: gridColor }, ticks: { color: textColor } },
                y: { grid: { color: gridColor }, ticks: { color: textColor, stepSize: 1 }, beginAtZero: true }
            }
        }
    });
})();
</script>
{% endif %}
{% endblock %}