{% 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", linki do sklepów App Store / Google Play</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>

    <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>- Przyciski App Store / Google Play</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 %}