{% extends 'base.html.twig' %}
{% block title %}Wizytator {{ visitor.email ?? visitor.cookieId[:8] ~ '…' }} — 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_tracking') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; Tracking</a>
        <h1 class="text-3xl font-bold mt-1">
            {% if visitor.email %}
                {{ visitor.email }}
            {% else %}
                Anonimowy wizytator
            {% endif %}
        </h1>
    </div>

    {# Visitor info card #}
    <div class="bg-white rounded-2xl border border-gray-200 p-6 mb-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div>
                <p class="text-xs text-gray-400 font-medium uppercase tracking-wider mb-1">Status</p>
                {% if visitor.email %}
                    <span class="inline-flex px-2.5 py-1 text-xs font-semibold rounded-full bg-scout/10 text-scout">Zidentyfikowany</span>
                {% else %}
                    <span class="inline-flex px-2.5 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-500">Anonimowy</span>
                {% endif %}
            </div>
            <div>
                <p class="text-xs text-gray-400 font-medium uppercase tracking-wider mb-1">Cookie ID</p>
                <code class="text-sm text-gray-600 font-mono break-all">{{ visitor.cookieId }}</code>
            </div>
            <div>
                <p class="text-xs text-gray-400 font-medium uppercase tracking-wider mb-1">Pierwsza wizyta</p>
                <p class="text-sm text-gray-700">{{ visitor.firstSeenAt|date('d.m.Y H:i:s') }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 font-medium uppercase tracking-wider mb-1">Ostatnia wizyta</p>
                <p class="text-sm text-gray-700">{{ visitor.lastSeenAt|date('d.m.Y H:i:s') }}</p>
            </div>
        </div>
        {% if visitor.userAgent %}
        <div class="mt-4 pt-4 border-t border-gray-100">
            <p class="text-xs text-gray-400 font-medium uppercase tracking-wider mb-1">User Agent</p>
            <p class="text-xs text-gray-500 font-mono break-all">{{ visitor.userAgent }}</p>
        </div>
        {% endif %}
    </div>

    {# Page views timeline #}
    <h2 class="text-xl font-bold mb-4">Historia odsłon ({{ pageViews|length }})</h2>

    <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">Data</th>
                    <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3">Ścieżka</th>
                    <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3 hidden md:table-cell">Referrer</th>
                    <th class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3 hidden lg:table-cell">UTM</th>
                </tr>
            </thead>
            <tbody>
                {% for pv in pageViews %}
                <tr class="border-b border-gray-100 hover:bg-gray-50 transition">
                    <td class="px-4 py-3">
                        <span class="text-sm text-gray-500 whitespace-nowrap">{{ pv.createdAt|date('d.m.Y H:i:s') }}</span>
                    </td>
                    <td class="px-4 py-3">
                        <code class="text-sm font-mono text-dark">{{ pv.path }}</code>
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell">
                        {% if pv.referrer %}
                            <span class="text-xs text-gray-500 break-all">{{ pv.referrer|length > 60 ? pv.referrer[:60] ~ '…' : pv.referrer }}</span>
                        {% else %}
                            <span class="text-xs text-gray-300">—</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 hidden lg:table-cell">
                        {% if pv.utmSource or pv.utmMedium or pv.utmCampaign %}
                            <div class="flex flex-wrap gap-1">
                                {% if pv.utmSource %}
                                    <span class="inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded bg-nova/10 text-nova">{{ pv.utmSource }}</span>
                                {% endif %}
                                {% if pv.utmMedium %}
                                    <span class="inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded bg-blitz/10 text-blitz">{{ pv.utmMedium }}</span>
                                {% endif %}
                                {% if pv.utmCampaign %}
                                    <span class="inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded bg-echo/10 text-echo">{{ pv.utmCampaign }}</span>
                                {% endif %}
                            </div>
                        {% else %}
                            <span class="text-xs text-gray-300">—</span>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" class="px-4 py-12 text-center text-gray-400">Brak odsłon.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}