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

{% block body %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="mb-8 flex flex-wrap items-end justify-between gap-4">
        <div>
            <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">Lejek PWA</h1>
            <p class="text-sm text-gray-500 mt-1">Anonimowe zdarzenia z aplikacji (bez imion, urządzenie jako hash).</p>
        </div>
        <div class="flex gap-2">
            {% for p in periods %}
                <a href="{{ path('app_admin_pwa_funnel', {dni: p}) }}"
                   class="px-3 py-1.5 rounded-lg text-sm font-semibold border {{ p == days ? 'bg-dark text-white border-dark' : 'bg-white text-gray-600 border-gray-200' }}">{{ p }} dni</a>
            {% endfor %}
        </div>
    </div>

    {% set base = steps|first.devices %}
    <div class="grid grid-cols-2 lg:grid-cols-3 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">Urządzenia</p>
            <p class="text-3xl font-extrabold text-dark mt-1">{{ retention.cohort ?? 0 }}</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">Wróciło po ≥1 dniu</p>
            <p class="text-3xl font-extrabold text-dark mt-1">{{ retention.d1 ?? 0 }}</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">Wróciło po ≥7 dniach</p>
            <p class="text-3xl font-extrabold text-dark mt-1">{{ retention.d7 ?? 0 }}</p>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-200 overflow-x-auto mb-8">
        <table class="w-full text-sm">
            <thead class="text-left text-xs uppercase tracking-wider text-gray-500 border-b border-gray-200">
                <tr><th class="px-5 py-3">Krok</th><th class="px-5 py-3 text-right">Urządzenia</th><th class="px-5 py-3 text-right">% otwarć</th><th class="px-5 py-3 text-right">Zdarzenia</th></tr>
            </thead>
            <tbody>
                {% for s in steps %}
                <tr class="border-b border-gray-100 last:border-0">
                    <td class="px-5 py-3 font-medium text-dark">{{ s.label }} <span class="text-xs text-gray-400 font-mono">{{ s.name }}</span></td>
                    <td class="px-5 py-3 text-right tabular-nums">{{ s.devices }}</td>
                    <td class="px-5 py-3 text-right tabular-nums">{{ base > 0 ? (100 * s.devices / base)|round ~ '%' : '—' }}</td>
                    <td class="px-5 py-3 text-right tabular-nums text-gray-500">{{ s.total }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <h2 class="text-lg font-bold mb-3">Najczęściej kończone misje</h2>
    {% if topMissions is empty %}
        <p class="text-sm text-gray-500">Brak danych w tym okresie.</p>
    {% else %}
        <ol class="bg-white rounded-2xl border border-gray-200 divide-y divide-gray-100 text-sm">
            {% for m in topMissions %}
                <li class="px-5 py-2.5 flex justify-between"><span class="font-mono">{{ m.mission ?? '—' }}</span><span class="tabular-nums">{{ m.completed }}</span></li>
            {% endfor %}
        </ol>
    {% endif %}
</div>
{% endblock %}