{% extends 'base.html.twig' %}
{% block title %}Tracking — Admin | TROPO{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="mb-8">
        <a href="{{ path('app_admin_dashboard') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; Dashboard</a>
        <h1 class="text-3xl font-bold mt-1">Tracking</h1>
    </div>

    {# Stats tiles #}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="bg-white rounded-2xl p-5 border border-gray-200">
            <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Wizytorzy</p>
            <p class="text-3xl font-extrabold text-dark mt-1">{{ totalVisitors }}</p>
        </div>
        <div class="bg-white rounded-2xl p-5 border-2" style="border-color: color-mix(in srgb, var(--color-scout) 30%, transparent)">
            <p class="text-xs font-medium uppercase tracking-wider" style="color: var(--color-scout)">Zidentyfikowani</p>
            <p class="text-3xl font-extrabold text-dark mt-1">{{ identifiedCount }}</p>
        </div>
        <div class="bg-white rounded-2xl p-5 border border-gray-200">
            <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">Odsłony łącznie</p>
            <p class="text-3xl font-extrabold text-dark mt-1">{{ totalPageViews }}</p>
        </div>
        <div class="bg-white rounded-2xl p-5 border-2" style="border-color: color-mix(in srgb, var(--color-echo) 30%, transparent)">
            <p class="text-xs font-medium uppercase tracking-wider" style="color: var(--color-echo)">Odsłony dziś</p>
            <p class="text-3xl font-extrabold text-dark mt-1">{{ todayPageViews }}</p>
        </div>
    </div>

    {# Filters #}
    <form method="get" class="bg-white rounded-2xl border border-gray-200 p-4 mb-6">
        <div class="flex flex-wrap items-center gap-3">
            <select name="filter" class="text-sm border border-gray-300 rounded-lg px-3 py-2 bg-white">
                <option value="all" {{ filter == 'all' ? 'selected' }}>Wszyscy</option>
                <option value="identified" {{ filter == 'identified' ? 'selected' }}>Zidentyfikowani</option>
                <option value="anonymous" {{ filter == 'anonymous' ? 'selected' }}>Anonimowi</option>
            </select>
            <input type="text" name="q" value="{{ search }}" placeholder="Szukaj email lub cookie ID…" class="text-sm border border-gray-300 rounded-lg px-3 py-2 flex-1 min-w-48">
            <button type="submit" class="px-4 py-2 bg-dark text-white text-sm font-semibold rounded-lg hover:bg-gray-800 transition">Filtruj</button>
            {% if filter != 'all' or search %}
                <a href="{{ path('app_admin_tracking') }}" class="text-sm text-gray-500 hover:text-dark transition">Wyczyść</a>
            {% endif %}
        </div>
    </form>

    {# Visitors table #}
    <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-200">
                    <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3">Wizytator</th>
                    <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3 hidden md:table-cell">Cookie ID</th>
                    <th class="text-center text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3">Odsłony</th>
                    <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3 hidden sm:table-cell">Pierwsza wizyta</th>
                    <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3">Ostatnia wizyta</th>
                    <th class="text-right text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3"></th>
                </tr>
            </thead>
            <tbody>
                {% for visitor in visitors %}
                <tr class="border-b border-gray-100 hover:bg-gray-50 transition">
                    <td class="px-4 py-3">
                        {% if visitor.email %}
                            <div class="flex items-center gap-2">
                                <span class="inline-flex w-2 h-2 rounded-full shrink-0" style="background: var(--color-scout)"></span>
                                <span class="text-sm font-semibold text-dark">{{ visitor.email }}</span>
                            </div>
                        {% else %}
                            <div class="flex items-center gap-2">
                                <span class="inline-flex w-2 h-2 rounded-full bg-gray-300 shrink-0"></span>
                                <span class="text-sm text-gray-400">Anonimowy</span>
                            </div>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell">
                        <code class="text-xs text-gray-400 font-mono">{{ visitor.cookieId[:8] }}…</code>
                    </td>
                    <td class="px-4 py-3 text-center">
                        <span class="inline-flex px-2 py-0.5 text-xs font-bold rounded-full bg-gray-100 text-gray-700">{{ visitor.pageViews|length }}</span>
                    </td>
                    <td class="px-4 py-3 hidden sm:table-cell">
                        <span class="text-sm text-gray-500">{{ visitor.firstSeenAt|date('d.m.Y H:i') }}</span>
                    </td>
                    <td class="px-4 py-3">
                        <span class="text-sm text-gray-500">{{ visitor.lastSeenAt|date('d.m.Y H:i') }}</span>
                    </td>
                    <td class="px-4 py-3 text-right">
                        <a href="{{ path('app_admin_tracking_show', {id: visitor.id}) }}" class="px-3 py-1.5 bg-scout/10 text-scout text-xs font-semibold rounded-lg hover:bg-scout/20 transition">Szczegóły</a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-4 py-12 text-center text-gray-400">Brak danych o wizytach.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <p class="text-xs text-gray-400 mt-3">Wyświetlono max. 100 najnowszych wizytatorów.</p>
</div>
{% endblock %}