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

{% block body %}
<div class="max-w-3xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-bold mb-8">Ustawienia strony</h1>

    {% for message in app.flashes('success') %}
    <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 text-sm">
        {{ message }}
    </div>
    {% endfor %}

    <form method="post" action="{{ path('app_admin_settings') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('admin_action') }}">

        {# ── Tryb konserwacji ── #}
        <div class="bg-white rounded-2xl p-8 border border-gray-200 mb-6">
            <h2 class="text-xl font-bold text-dark mb-6">Tryb konserwacji</h2>

            <label class="flex items-center justify-between py-4">
                <div>
                    <p class="font-semibold text-dark">Strona „Wkrótce startujemy"</p>
                    <p class="text-sm text-gray-500 mt-1">Gdy włączony, wszystkie publiczne strony przekierowują na stronę startową z formularzem zapisu</p>
                </div>
                <div class="relative">
                    <input type="hidden" name="maintenance_mode" value="0">
                    <input type="checkbox" name="maintenance_mode" value="1" {{ settings.maintenanceMode ? 'checked' : '' }}
                        class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:ring-4 peer-focus:ring-scout/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-scout cursor-pointer"></div>
                </div>
            </label>
        </div>

        {# ── Widoczność sekcji ── #}
        <div class="bg-white rounded-2xl p-8 border border-gray-200">
            <h2 class="text-xl font-bold text-dark mb-6">Widoczność sekcji</h2>

            <label class="flex items-center justify-between py-4 border-b border-gray-100">
                <div>
                    <p class="font-semibold text-dark">Monetyzacja</p>
                    <p class="text-sm text-gray-500 mt-1">Cennik, przyciski „Pobierz" i strona zakupu pakietów</p>
                </div>
                <div class="relative">
                    <input type="hidden" name="monetization_enabled" value="0">
                    <input type="checkbox" name="monetization_enabled" value="1" {{ settings.monetizationEnabled ? 'checked' : '' }}
                        class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:ring-4 peer-focus:ring-scout/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-scout cursor-pointer"></div>
                </div>
            </label>
        </div>

        {# ── Języki dodatkowe ── #}
        <div class="bg-white rounded-2xl p-8 border border-gray-200 mt-6">
            <h2 class="text-xl font-bold text-dark mb-2">Języki dodatkowe</h2>
            <p class="text-sm text-gray-500 mb-6">Polski jest zawsze aktywny. Włącz dodatkowe wersje językowe strony.</p>

            <div class="space-y-3">
                {# Polski — zawsze aktywny #}
                <div class="flex items-center justify-between py-3 px-4 bg-gray-50 rounded-xl border border-gray-100">
                    <div class="flex items-center gap-3">
                        <span class="text-xl">🇵🇱</span>
                        <div>
                            <p class="font-semibold text-dark">Polski</p>
                            <p class="text-xs text-gray-400">Język domyślny</p>
                        </div>
                    </div>
                    <span class="px-3 py-1 bg-scout/10 text-scout text-xs font-bold rounded-full">Aktywny</span>
                </div>

                {# Dodatkowe języki #}
                {% for locale in available_locales %}
                {% set label = locale_labels[locale] %}
                {% set enabled = locale in settings.enabledLocales %}
                <label class="flex items-center justify-between py-3 px-4 rounded-xl border transition cursor-pointer {{ enabled ? 'border-scout/30 bg-scout/5' : 'border-gray-100 hover:border-gray-200' }}">
                    <div class="flex items-center gap-3">
                        <span class="text-xl">{{ label.flag }}</span>
                        <div>
                            <p class="font-semibold text-dark">{{ label.name }}</p>
                            <p class="text-xs text-gray-400">{{ locale|upper }}</p>
                        </div>
                    </div>
                    <div class="relative">
                        <input type="checkbox" name="enabled_locales[]" value="{{ locale }}" {{ enabled ? 'checked' : '' }}
                            class="sr-only peer">
                        <div class="w-11 h-6 bg-gray-200 peer-focus:ring-4 peer-focus:ring-scout/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-scout cursor-pointer"></div>
                    </div>
                </label>
                {% endfor %}
            </div>
        </div>

        <div class="mt-6 flex justify-end">
            <button type="submit" class="px-6 py-3 bg-dark text-white font-semibold rounded-full hover:bg-dark/90 transition">
                Zapisz ustawienia
            </button>
        </div>
    </form>

    {# ── Porządki danych (RODO) ── #}
    {% set to_delete = retention|reduce((sum, n) => sum + n, 0) %}
    <div id="porzadki" class="bg-white rounded-2xl p-8 border {{ retention_due ? 'border-blitz' : 'border-gray-200' }} mt-8 scroll-mt-24">
        <div class="flex flex-wrap items-start justify-between gap-4 mb-4">
            <div>
                <h2 class="text-xl font-bold text-dark">Porządki danych</h2>
                <p class="text-sm text-gray-500 mt-1">Usuwa dane po okresach z polityki prywatności (pkt 3.5). Rób to raz w miesiącu.</p>
            </div>
            <p class="text-sm {{ retention_due ? 'text-blitz font-semibold' : 'text-gray-500' }}">
                {% if settings.dataRetentionAt %}Ostatnio: {{ settings.dataRetentionAt|date('d.m.Y H:i') }}{% else %}Jeszcze nie robione{% endif %}
                {% if retention_due %}<br>Czas na porządki (co {{ retention_every_days }} dni){% endif %}
            </p>
        </div>
        <table class="w-full text-sm mb-6">
            <tbody>
            {% for label, count in retention %}
                <tr class="border-b border-gray-50 last:border-0">
                    <td class="py-2 text-gray-600">{{ label }}</td>
                    <td class="py-2 text-right tabular-nums font-semibold {{ count > 0 ? 'text-blitz' : 'text-gray-400' }}">{{ count }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <form method="post" action="{{ path('app_admin_data_retention') }}"
              data-controller="confirm" data-confirm-message-value="Usunąć {{ to_delete }} rekordów po okresie przechowywania? Tego nie da się cofnąć." data-confirm-confirm-label-value="Usuń" data-action="submit->confirm#submit">
            <input type="hidden" name="_token" value="{{ csrf_token('admin_action') }}">
            <button type="submit" class="px-6 py-3 rounded-full font-semibold transition {{ to_delete > 0 ? 'bg-blitz text-white hover:bg-blitz/90' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                {{ to_delete > 0 ? 'Usuń ' ~ to_delete ~ ' przeterminowanych rekordów' : 'Zrób porządki (nic do usunięcia)' }}
            </button>
        </form>
    </div>

    <div class="mt-8 p-6 bg-cream rounded-2xl border border-gray-200">
        <h3 class="font-bold text-dark mb-2">Co ukrywa wyłączenie monetyzacji?</h3>
        <ul class="text-sm text-gray-600 space-y-1">
            <li>- Link „Cennik" w nawigacji i stopce</li>
            <li>- Przycisk „Pobierz" w nawigacji (zamieniony na „Wkrótce")</li>
            <li>- Sekcja cennik na stronie głównej</li>
            <li>- CTA „Pobierz za darmo" w hero strony głównej</li>
            <li>- Strona /cennik (przekierowanie na stronę główną)</li>
        </ul>
    </div>

    <div class="mt-4 p-6 bg-cream rounded-2xl border border-gray-200">
        <h3 class="font-bold text-dark mb-2">Języki — jak to działa?</h3>
        <ul class="text-sm text-gray-600 space-y-1">
            <li>- Włączenie języka dodaje go do przełącznika na stronie</li>
            <li>- Strona będzie dostępna pod prefiksem np. <code class="bg-gray-100 px-1 rounded">/en/postacie</code>, <code class="bg-gray-100 px-1 rounded">/uk/bajki</code></li>
            <li>- Plik tłumaczeń: <code class="bg-gray-100 px-1 rounded">translations/messages.{locale}.yaml</code></li>
            <li>- Treści bajek wymagają osobnych szablonów per język</li>
        </ul>
    </div>
</div>
{% endblock %}