{% extends 'base.html.twig' %}
{% block title %}Misja {{ mission.id }} | Panel admina{% endblock %}

{% block body %}
{% set charColors = {scout: 'scout', blitz: 'blitz', nova: 'nova', echo: 'echo'} %}
{% set charColor = charColors[mission.character] ?? 'gray-400' %}

<div class="max-w-4xl mx-auto px-4 py-12"
     data-controller="inline-edit"
     data-inline-edit-url-value="{{ path('app_admin_mission_update_field', {id: mission.id}) }}"
     data-inline-edit-csrf-value="{{ csrf_token('admin_action') }}">
    {# Back link #}
    <a href="{{ path('app_admin_missions') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; Wszystkie misje</a>

    {# Header #}
    <div class="mt-4 bg-white rounded-2xl p-8 border-2 border-{{ charColor }}/30 mb-8">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <p class="text-xs font-mono text-gray-400 mb-1">{{ mission.id }}</p>
                <h1 class="text-2xl font-bold text-dark editable" contenteditable="true" data-field="title">{{ mission.title ?? 'Bez tytułu' }}</h1>
            </div>
            <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-{{ charColor }}">
                    {{ mission.character ?? '—' }}
                </span>
                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 capitalize">
                    {{ mission.location ?? '—' }}
                </span>
                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 capitalize">
                    {{ mission.difficulty ?? '—' }}
                </span>
                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700">
                    <span class="editable" contenteditable="true" data-field="estimatedMinutes">{{ mission.estimatedMinutes }}</span> min
                </span>
            </div>
        </div>

        {# Intro dialog #}
        {% if mission.introDialog %}
        <div class="mt-6">
            <p class="text-xs font-semibold text-gray-400 uppercase mb-2">Intro dialog</p>
            <div class="bg-{{ charColor }}/5 border-l-4 border-{{ charColor }} rounded-r-xl p-4">
                <p class="text-sm text-dark italic editable" contenteditable="true" data-field="introDialog">{{ mission.introDialog }}</p>
            </div>
        </div>
        {% endif %}

        {# Parent instructions #}
        {% if mission.preparation.parent_instructions|default %}
        <details class="mt-4">
            <summary class="text-xs font-semibold text-gray-400 uppercase cursor-pointer hover:text-gray-600">Instrukcje dla rodzica</summary>
            <div class="mt-2 bg-yellow-50 border border-yellow-200 rounded-xl p-4">
                <p class="text-sm text-gray-700 editable" contenteditable="true" data-field="preparation" data-key="parent_instructions">{{ mission.preparation.parent_instructions }}</p>
            </div>
        </details>
        {% endif %}
    </div>

    {# Steps #}
    {% if mission.steps %}
    <h2 class="text-xl font-bold mb-4">Kroki ({{ mission.steps|length }})</h2>
    <div class="space-y-6">
        {% for step in mission.steps %}
        <div class="bg-white rounded-2xl p-6 border border-gray-200">
            <div class="flex items-center gap-3 mb-4">
                <span class="w-8 h-8 rounded-full bg-{{ charColor }} text-white text-sm font-bold flex items-center justify-center">
                    {{ loop.index }}
                </span>
                <h3 class="font-bold text-dark editable" contenteditable="true" data-field="steps" data-step="{{ loop.index0 }}" data-key="title">{{ step.title ?? 'Krok ' ~ loop.index }}</h3>
            </div>

            {# Character dialog #}
            {% if step.character_dialog is defined and step.character_dialog %}
            <div class="bg-{{ charColor }}/5 border-l-4 border-{{ charColor }} rounded-r-xl p-4 mb-3">
                <p class="text-sm italic editable" contenteditable="true" data-field="steps" data-step="{{ loop.index0 }}" data-key="character_dialog">{{ step.character_dialog }}</p>
            </div>
            {% endif %}

            {# Riddle / question #}
            {% if step.riddle_text is defined and step.riddle_text %}
            <div class="bg-purple-50 border border-purple-200 rounded-xl p-4 mb-3">
                <p class="text-xs font-semibold text-purple-500 uppercase mb-1">Zagadka</p>
                <p class="text-sm font-medium text-dark editable" contenteditable="true" data-field="steps" data-step="{{ loop.index0 }}" data-key="riddle_text">{{ step.riddle_text }}</p>
            </div>
            {% endif %}

            {# Answer options (choice) #}
            {% if step.answer_options is defined and step.answer_options %}
            <div class="mb-3">
                <p class="text-xs font-semibold text-gray-400 uppercase mb-2">Odpowiedzi</p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    {% for option in step.answer_options %}
                    <div class="px-3 py-2 rounded-lg text-sm border flex items-center gap-1 {{ option == (step.answer ?? step.correct_answer ?? '') ? 'bg-green-50 border-green-300 text-green-700 font-semibold' : 'bg-gray-50 border-gray-200 text-gray-600' }}">
                        <span class="editable flex-1" contenteditable="true" data-field="steps" data-step="{{ loop.parent.loop.index0 }}" data-key="answer_options" data-option-index="{{ loop.index0 }}">{{ option }}</span>
                        {% if option == (step.answer ?? step.correct_answer ?? '') %}
                            <span class="ml-1 text-green-500 shrink-0">✓</span>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% elseif step.answer is defined and step.answer %}
            <div class="mb-3">
                <p class="text-xs font-semibold text-gray-400 uppercase mb-1">Odpowiedź</p>
                <p class="text-sm font-semibold text-green-700 bg-green-50 border border-green-200 rounded-lg px-3 py-2 editable" contenteditable="true" data-field="steps" data-step="{{ loop.index0 }}" data-key="answer">{{ step.answer }}</p>
            </div>
            {% endif %}

            {# Hint #}
            {% if step.hint is defined and step.hint %}
            <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-3 mb-3">
                <p class="text-xs font-semibold text-yellow-600 uppercase mb-1">Podpowiedź</p>
                <p class="text-sm text-gray-700 editable" contenteditable="true" data-field="steps" data-step="{{ loop.index0 }}" data-key="hint">{{ step.hint }}</p>
            </div>
            {% endif %}

            {# Fun fact #}
            {% if step.fun_fact is defined and step.fun_fact %}
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-3 mb-3">
                <p class="text-xs font-semibold text-blue-600 uppercase mb-1">Ciekawostka</p>
                <p class="text-sm text-gray-700 editable" contenteditable="true" data-field="steps" data-step="{{ loop.index0 }}" data-key="fun_fact">{{ step.fun_fact }}</p>
            </div>
            {% endif %}

            {# Success dialog #}
            {% if step.success_dialog is defined and step.success_dialog %}
            <div class="bg-green-50 border-l-4 border-green-400 rounded-r-xl p-3">
                <p class="text-xs font-semibold text-green-600 uppercase mb-1">Po sukcesie</p>
                <p class="text-sm italic text-green-800 editable" contenteditable="true" data-field="steps" data-step="{{ loop.index0 }}" data-key="success_dialog">{{ step.success_dialog }}</p>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {# Completion #}
    {% if mission.completionDialog or mission.badge %}
    <div class="mt-8 bg-white rounded-2xl p-6 border-2 border-green-200">
        <h2 class="text-xl font-bold mb-4 text-green-700">Zakończenie</h2>
        {% if mission.completionDialog %}
        <div class="bg-green-50 border-l-4 border-green-400 rounded-r-xl p-4 mb-3">
            <p class="text-sm italic editable" contenteditable="true" data-field="completionDialog">{{ mission.completionDialog }}</p>
        </div>
        {% endif %}
        <div class="flex gap-4">
            {% if mission.badge %}
            <div class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
                Odznaka: {{ mission.badge.name }}
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {# Review panel #}
    <div class="mt-8 bg-white rounded-2xl p-6 border border-gray-200">
        <h2 class="text-xl font-bold mb-4">Status misji</h2>

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

        {% if review %}
        <div class="mb-4 p-3 bg-gray-50 rounded-xl text-sm">
            <p>Obecny status:
                {% if review.status == 'approved' %}
                    <span class="font-semibold text-green-700">Zatwierdzona</span>
                {% elseif review.status == 'needs_work' %}
                    <span class="font-semibold text-yellow-700">Do poprawki</span>
                {% elseif review.status == 'rejected' %}
                    <span class="font-semibold text-red-700">Odrzucona</span>
                {% endif %}
            </p>
            {% if review.notes %}
            <p class="mt-2 text-gray-600">Notatki: {{ review.notes }}</p>
            {% endif %}
            {% if review.reviewedAt %}
            <p class="mt-1 text-gray-400 text-xs">Ostatnia zmiana: {{ review.reviewedAt|date('Y-m-d H:i') }} przez {{ review.reviewedBy ?? '—' }}</p>
            {% endif %}
        </div>
        {% endif %}

        <form method="post" action="{{ path('app_admin_mission_review', {id: mission.id}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('admin_action') }}">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Notatki</label>
                <textarea name="notes" rows="3" placeholder="np. zagadka w kroku 2 za trudna dla 6-latka"
                    class="w-full px-4 py-3 rounded-xl border border-gray-300 text-sm focus:border-scout focus:ring-1 focus:ring-scout/20 outline-none">{{ review ? review.notes : '' }}</textarea>
            </div>
            <div class="flex flex-wrap gap-3">
                <button type="submit" name="status" value="approved"
                    class="px-5 py-2.5 bg-green-600 text-white font-semibold rounded-xl hover:bg-green-700 transition text-sm">
                    Zatwierdź
                </button>
                <button type="submit" name="status" value="needs_work"
                    class="px-5 py-2.5 bg-yellow-500 text-white font-semibold rounded-xl hover:bg-yellow-600 transition text-sm">
                    Do poprawki
                </button>
                <button type="submit" name="status" value="rejected"
                    class="px-5 py-2.5 bg-red-600 text-white font-semibold rounded-xl hover:bg-red-700 transition text-sm">
                    Odrzuć
                </button>
            </div>
        </form>
    </div>

    {# Navigation #}
    <div class="mt-8 flex justify-between">
        <a href="{{ path('app_admin_missions') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; Wszystkie misje</a>
    </div>
</div>

<style>
    .editable { cursor: text; border-radius: 0.375rem; transition: box-shadow 0.15s, background 0.15s; }
    .editable:hover { box-shadow: 0 0 0 2px rgba(53,120,229,0.15); }
    .editable:focus { outline: none; box-shadow: 0 0 0 2px rgba(53,120,229,0.4); background: rgba(255,255,255,0.8); }
    .editable.saving { opacity: 0.6; }
    .editable.saved { box-shadow: 0 0 0 2px rgba(22,163,74,0.4); }
    .editable.error { box-shadow: 0 0 0 2px rgba(220,38,38,0.4); }
</style>
{% endblock %}