{% extends 'base.html.twig' %}
{% block title %}Misje | Panel admina{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-3xl font-bold">Misje ({{ missions|length }})</h1>
        <div class="flex items-center gap-4">
            <a href="{{ path('app_admin_missions_export') }}" class="px-4 py-2 bg-white border border-gray-300 text-sm font-semibold rounded-lg hover:bg-gray-50 transition">
                Eksportuj JSON
            </a>
            <div data-controller="import-modal">
                <form data-import-modal-target="form" method="post" action="{{ path('app_admin_missions_import') }}" enctype="multipart/form-data" class="flex items-center gap-2">
                    <input type="hidden" name="_token" value="{{ csrf_token('admin_action') }}">
                    <input type="hidden" name="fresh" data-import-modal-target="fresh" value="0">
                    <label class="cursor-pointer px-4 py-2 bg-white border border-gray-300 text-sm font-semibold rounded-lg hover:bg-gray-50 transition">
                        <input type="file" name="json_file" accept=".json" class="hidden" data-import-modal-target="file" data-action="change->import-modal#fileChanged">
                        Importuj JSON
                    </label>
                </form>

                {# Import confirm modal #}
                <div data-import-modal-target="modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60">
                    <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl border border-gray-200">
                        <h3 class="text-lg font-bold mb-2">Import misji</h3>
                        <p class="text-sm text-gray-500 mb-6">Czy chcesz usunąć wszystkie obecne misje i oznaki przed importem?</p>
                        <div class="flex gap-3">
                            <button data-action="import-modal#submitFresh" class="flex-1 px-4 py-2.5 bg-red-600 text-white font-semibold rounded-xl hover:bg-red-700 transition text-sm">
                                Usuń i importuj
                            </button>
                            <button data-action="import-modal#submitMerge" class="flex-1 px-4 py-2.5 bg-dark text-white font-semibold rounded-xl hover:bg-dark/90 transition text-sm">
                                Dopisz do obecnych
                            </button>
                            <button data-action="import-modal#cancel" class="px-4 py-2.5 bg-gray-100 text-gray-600 font-semibold rounded-xl hover:bg-gray-200 transition text-sm">
                                Anuluj
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <a href="{{ path('app_admin_dashboard') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; Dashboard</a>
        </div>
    </div>

    {# Filters #}
    <form method="get" class="bg-white rounded-2xl p-6 border border-gray-200 mb-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-4">
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Szukaj</label>
                <input type="text" name="search" value="{{ filters.search }}" placeholder="Tytuł lub ID..."
                    class="w-full px-3 py-2 rounded-lg border border-gray-300 text-sm focus:border-scout focus:ring-1 focus:ring-scout/20 outline-none">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Postać</label>
                <select name="character" class="w-full px-3 py-2 rounded-lg border border-gray-300 text-sm">
                    <option value="">Wszystkie</option>
                    <option value="scout" {{ filters.character == 'scout' ? 'selected' }}>Scout</option>
                    <option value="blitz" {{ filters.character == 'blitz' ? 'selected' }}>Blitz</option>
                    <option value="nova" {{ filters.character == 'nova' ? 'selected' }}>Nova</option>
                    <option value="echo" {{ filters.character == 'echo' ? 'selected' }}>Echo</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Lokalizacja</label>
                <select name="location" class="w-full px-3 py-2 rounded-lg border border-gray-300 text-sm">
                    <option value="">Wszystkie</option>
                    <option value="home" {{ filters.location == 'home' ? 'selected' }}>Dom</option>
                    <option value="park" {{ filters.location == 'park' ? 'selected' }}>Teren</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Trudność</label>
                <select name="difficulty" class="w-full px-3 py-2 rounded-lg border border-gray-300 text-sm">
                    <option value="">Wszystkie</option>
                    <option value="easy" {{ filters.difficulty == 'easy' ? 'selected' }}>Łatwy</option>
                    <option value="medium" {{ filters.difficulty == 'medium' ? 'selected' }}>Średni</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Kategoria</label>
                <select name="category" class="w-full px-3 py-2 rounded-lg border border-gray-300 text-sm">
                    <option value="">Wszystkie</option>
                    {% for cat in categories %}
                        <option value="{{ cat }}" {{ filters.category == cat ? 'selected' }}>{{ cat|capitalize }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Pakiet</label>
                <select name="package_id" class="w-full px-3 py-2 rounded-lg border border-gray-300 text-sm">
                    <option value="">Wszystkie</option>
                    <option value="free" {{ filters.package_id == 'free' ? 'selected' }}>Free</option>
                    <option value="base" {{ filters.package_id == 'base' ? 'selected' }}>Base</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full px-4 py-2 bg-dark text-white font-semibold rounded-lg text-sm hover:bg-dark/90 transition">
                    Filtruj
                </button>
            </div>
        </div>
    </form>

    {# Mission table #}
    {% if missions|length > 0 %}
    <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200 bg-gray-50">
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">ID</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Tytuł</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Postać</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Lokalizacja</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Trudność</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Kategoria</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Pakiet</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Czas</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Kroków</th>
                        <th class="px-4 py-3 text-left font-semibold text-gray-600">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% set charColors = {scout: 'scout', blitz: 'blitz', nova: 'nova', echo: 'echo'} %}
                    {% for mission in missions %}
                    {% set review = reviews[mission.id] ?? null %}
                    <tr class="border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition"
                        onclick="window.location='{{ path('app_admin_mission_show', {id: mission.id}) }}'">
                        <td class="px-4 py-3 font-mono text-xs text-gray-400">{{ mission.id }}</td>
                        <td class="px-4 py-3 font-medium text-dark">{{ mission.title ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold text-white bg-{{ charColors[mission.character] ?? 'gray-400' }}">
                                {{ mission.character ?? '—' }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-gray-600 capitalize">{{ mission.location ?? '—' }}</td>
                        <td class="px-4 py-3 text-gray-600 capitalize">{{ mission.difficulty ?? '—' }}</td>
                        <td class="px-4 py-3 text-gray-600 capitalize">{{ mission.category ?? '—' }}</td>
                        <td class="px-4 py-3">
                            {% if mission.packageId == 'free' %}
                                <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700">Free</span>
                            {% else %}
                                <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-700">Base</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-gray-600">{{ mission.estimatedMinutes }} min</td>
                        <td class="px-4 py-3 text-gray-600">{{ mission.steps|length }}</td>
                        <td class="px-4 py-3">
                            {% if review %}
                                {% if review.status == 'approved' %}
                                    <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700">Zatwierdzona</span>
                                {% elseif review.status == 'needs_work' %}
                                    <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">Do poprawki</span>
                                {% elseif review.status == 'rejected' %}
                                    <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">Odrzucona</span>
                                {% endif %}
                            {% else %}
                                <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-500">Brak</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="bg-white rounded-2xl p-12 border border-gray-200 text-center">
        <p class="text-gray-500">Brak misji do wyświetlenia. Dodaj plik <code>public/data/missions.json</code>.</p>
    </div>
    {% endif %}
</div>

{% endblock %}