{% extends 'base.html.twig' %}
{% block title %}Karty przygód — Admin | Tropo{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <a href="{{ path('app_admin_dashboard') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; Dashboard</a>
            <h1 class="text-3xl font-bold mt-1">Karty przygód</h1>
            <p class="text-sm text-gray-500 mt-1">Gra planszowa — {{ cards|length }} kart{% if typFilter %} ({{ typFilter }}){% endif %}</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ path('app_admin_adventure_cards_board') }}" class="px-4 py-2 bg-white border border-gray-300 text-sm font-semibold rounded-lg hover:bg-gray-50 transition" target="_blank">Plansza</a>
            <a href="{{ path('app_admin_adventure_cards_board_pdf') }}" class="px-4 py-2 bg-white border border-gray-300 text-sm font-semibold rounded-lg hover:bg-gray-50 transition">Plansza PDF</a>
            <a href="{{ path('app_admin_adventure_cards_export_pdf') }}" class="px-4 py-2 bg-white border border-gray-300 text-sm font-semibold rounded-lg hover:bg-gray-50 transition">Karty PDF</a>
            <a href="{{ asset('data/board/zasady.pdf') }}" class="px-4 py-2 bg-white border border-gray-300 text-sm font-semibold rounded-lg hover:bg-gray-50 transition" target="_blank">Zasady PDF</a>
            <a href="{{ path('app_admin_adventure_cards_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_adventure_cards_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>

                <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 kart przygód</h3>
                        <p class="text-sm text-gray-500 mb-6">Czy chcesz usunąć wszystkie obecne karty 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_adventure_card_new') }}" class="px-5 py-2.5 bg-blitz text-white font-semibold rounded-xl hover:bg-blitz/90 transition text-sm">+ Nowa karta</a>
        </div>
    </div>

    {% for flash in app.flashes('success') %}
        <div class="mb-6 bg-echo/10 border border-echo/30 text-echo rounded-xl px-4 py-3 text-sm font-medium">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="mb-6 bg-red-50 border border-red-200 text-red-600 rounded-xl px-4 py-3 text-sm font-medium">{{ flash }}</div>
    {% endfor %}

    {% set typeStyles = {
        'TROP': {'bg': 'rgba(53,120,229,0.1)', 'text': '#3578E5'},
        'RAZEM': {'bg': 'rgba(22,163,74,0.1)', 'text': '#16A34A'},
        'MYŚL': {'bg': 'rgba(124,58,237,0.1)', 'text': '#7C3AED'},
        'DZIAŁAJ': {'bg': 'rgba(232,97,42,0.1)', 'text': '#E8612A'},
        'PRZESZKODA': {'bg': 'rgba(239,68,68,0.1)', 'text': '#EF4444'}
    } %}

    {% set totalCards = cards|length %}

    {# Typ filters #}
    <div class="flex flex-wrap gap-2 mb-3">
        <span class="text-xs text-gray-400 font-semibold self-center mr-1">Typ:</span>
        <a href="{{ path('app_admin_adventure_cards') }}"
           class="px-3 py-1.5 text-xs font-semibold rounded-lg transition {{ not typFilter and not taliaFilter ? 'bg-dark text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            Wszystkie
        </a>
        {% for type in types %}
        <a href="{{ path('app_admin_adventure_cards', {typ: type}) }}"
           class="px-3 py-1.5 text-xs font-semibold rounded-lg transition {{ typFilter == type ? 'bg-dark text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            {{ type }} ({{ typCounts[type] ?? 0 }})
        </a>
        {% endfor %}
    </div>

    {# Talia filters #}
    <div class="flex flex-wrap gap-2 mb-6">
        <span class="text-xs text-gray-400 font-semibold self-center mr-1">Talia:</span>
        {% for deck in decks %}
        <a href="{{ path('app_admin_adventure_cards', {talia: deck}) }}"
           class="px-3 py-1.5 text-xs font-semibold rounded-lg transition {{ taliaFilter == deck ? 'bg-nova text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            {{ deck }} ({{ taliaCounts[deck] ?? 0 }})
        </a>
        {% endfor %}
    </div>

    {# Status filters #}
    <div class="flex flex-wrap gap-2 mb-6">
        <span class="text-xs text-gray-400 font-semibold self-center mr-1">Status:</span>
        <a href="{{ path('app_admin_adventure_cards', {status: 'accepted'}) }}"
           class="px-3 py-1.5 text-xs font-semibold rounded-lg transition {{ statusFilter == 'accepted' ? 'bg-echo text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            Zaakceptowane ({{ acceptedCount }})
        </a>
        <a href="{{ path('app_admin_adventure_cards', {status: 'pending'}) }}"
           class="px-3 py-1.5 text-xs font-semibold rounded-lg transition {{ statusFilter == 'pending' ? 'bg-blitz text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            Oczekujące ({{ pendingCount }})
        </a>
    </div>

    <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50 text-gray-500 uppercase text-xs tracking-wider">
                    <th class="px-6 py-3 text-center font-semibold w-16">Status</th>
                    <th class="px-6 py-3 text-left font-semibold">Talia</th>
                    <th class="px-6 py-3 text-left font-semibold">Typ</th>
                    <th class="px-6 py-3 text-left font-semibold">Nazwa</th>
                    <th class="px-6 py-3 text-left font-semibold">Opis</th>
                    <th class="px-6 py-3 text-right font-semibold">Akcje</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for card in cards %}
                <tr class="hover:bg-gray-50 transition" id="row-{{ card.id }}">
                    <td class="px-6 py-4 text-center">
                        <button
                            id="accept-btn-{{ card.id }}"
                            class="text-lg cursor-pointer transition-transform hover:scale-110"
                            onclick="toggleAccepted({{ card.id }}, '{{ csrf_token('admin_action') }}')"
                            title="{{ card.accepted ? 'Zaakceptowana' : 'Oczekuje' }}"
                        >{{ card.accepted ? '✅' : '⏳' }}</button>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">{{ card.talia ?? '—' }}</td>
                    <td class="px-6 py-4">
                        {% set style = typeStyles[card.typ] ?? {'bg': 'rgba(107,114,128,0.1)', 'text': '#6B7280'} %}
                        <span class="inline-flex px-2.5 py-0.5 text-xs font-bold rounded-full" style="background: {{ style.bg }}; color: {{ style.text }}">{{ card.typ }}</span>
                    </td>
                    <td class="px-6 py-4 font-semibold text-dark">{{ card.nazwa }}</td>
                    <td class="px-6 py-4 text-gray-600 text-sm max-w-md">{{ card.opis }}</td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex justify-end gap-2">
                            <button type="button"
                                class="px-3 py-1.5 bg-scout/10 text-scout text-xs font-semibold rounded-lg hover:bg-scout/20 transition"
                                onclick="openEdit({{ card.id }}, '{{ card.talia|e('js') }}', '{{ card.typ|e('js') }}', '{{ card.nazwa|e('js') }}', '{{ card.opis|e('js') }}')"
                            >Edytuj</button>
                            <button
                                type="button"
                                class="px-3 py-1.5 bg-red-50 text-red-600 text-xs font-semibold rounded-lg hover:bg-red-100 transition"
                                onclick="deleteCard(this, {{ card.id }}, '{{ card.nazwa|e('js') }}', '{{ csrf_token('admin_action') }}')"
                            >Usuń</button>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-gray-400">
                        Brak kart przygód. Dodaj pierwszą lub zaimportuj z JSON!
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Edit drawer -->
<div id="edit-drawer-overlay" class="fixed inset-0 z-50 bg-black/40 hidden" onclick="closeEdit()"></div>
<div id="edit-drawer" class="fixed top-0 right-0 z-50 h-full w-[420px] max-w-[90vw] bg-white shadow-2xl border-l border-gray-200 hidden">
    <div class="h-full flex flex-col">
        <div class="flex items-center justify-between px-8 py-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-dark">Edytuj kartę</h2>
            <button onclick="closeEdit()" class="text-gray-400 hover:text-dark transition text-2xl leading-none">&times;</button>
        </div>
        <form id="edit-form" method="post" class="flex-1 overflow-y-auto px-8 py-6 space-y-6" onsubmit="return submitEdit(event)">
            <input type="hidden" name="_token" value="{{ csrf_token('admin_action') }}">

            <div>
                <label for="edit-talia" class="block text-sm font-semibold text-dark mb-2">Talia</label>
                <select name="talia" id="edit-talia"
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-scout/30 focus:border-scout outline-none transition">
                    <option value="">— Bez talii —</option>
                    {% for deck in decks %}
                    <option value="{{ deck }}">{{ deck }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label for="edit-typ" class="block text-sm font-semibold text-dark mb-2">Typ karty</label>
                <select name="typ" id="edit-typ" required
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-scout/30 focus:border-scout outline-none transition">
                    {% for type in types %}
                    <option value="{{ type }}">{{ type }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label for="edit-nazwa" class="block text-sm font-semibold text-dark mb-2">Nazwa</label>
                <input type="text" name="nazwa" id="edit-nazwa" required
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-scout/30 focus:border-scout outline-none transition">
            </div>

            <div>
                <label for="edit-opis" class="block text-sm font-semibold text-dark mb-2">Opis</label>
                <textarea name="opis" id="edit-opis" rows="4" required
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-scout/30 focus:border-scout outline-none transition resize-y"></textarea>
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="px-6 py-3 bg-blitz text-white font-semibold rounded-xl hover:bg-blitz/90 transition">Zapisz zmiany</button>
                <button type="button" onclick="closeEdit()" class="px-6 py-3 border border-gray-200 text-gray-600 font-semibold rounded-xl hover:bg-gray-50 transition">Anuluj</button>
            </div>
        </form>
    </div>
</div>

<script>
var editId = null;

async function toggleAccepted(id, token) {
    var btn = document.getElementById('accept-btn-' + id);
    btn.style.opacity = '0.4';
    try {
        var res = await fetch('/admin/karty-przygod/' + id + '/toggle-accepted', {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-Token': token },
        });
        var data = await res.json();
        if (data.ok) {
            btn.textContent = data.accepted ? '✅' : '⏳';
            btn.title = data.accepted ? 'Zaakceptowana' : 'Oczekuje';
        }
    } catch(e) {}
    btn.style.opacity = '1';
}

function openEdit(id, talia, typ, nazwa, opis) {
    editId = id;
    document.getElementById('edit-talia').value = talia || '';
    document.getElementById('edit-typ').value = typ;
    document.getElementById('edit-nazwa').value = nazwa;
    document.getElementById('edit-opis').value = opis;
    document.getElementById('edit-drawer-overlay').classList.remove('hidden');
    document.getElementById('edit-drawer').classList.remove('hidden');
}

function closeEdit() {
    document.getElementById('edit-drawer').classList.add('hidden');
    document.getElementById('edit-drawer-overlay').classList.add('hidden');
}

async function submitEdit(e) {
    e.preventDefault();
    var form = document.getElementById('edit-form');
    var btn = form.querySelector('button[type="submit"]');
    btn.disabled = true;
    btn.textContent = 'Zapisuję...';

    var formData = new FormData(form);
    try {
        var res = await fetch('/admin/karty-przygod/' + editId + '/edytuj', {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            body: formData,
        });
        var data = await res.json();
        if (data.ok) {
            closeEdit();
            location.reload();
        }
    } catch(err) {}
    btn.disabled = false;
    btn.textContent = 'Zapisz zmiany';
    return false;
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeEdit();
});

async function deleteCard(btn, id, nazwa, token) {
    const row = btn.closest('tr');
    row.style.transition = 'opacity 0.3s';
    row.style.opacity = '0.4';
    btn.disabled = true;
    btn.textContent = '...';

    try {
        const res = await fetch('/admin/karty-przygod/' + id + '/usun', {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-Token': token },
        });
        const data = await res.json();
        if (data.ok) {
            row.style.opacity = '0';
            setTimeout(function() { row.remove(); }, 300);
        } else {
            row.style.opacity = '1';
            btn.disabled = false;
            btn.textContent = 'Usuń';
        }
    } catch(e) {
        row.style.opacity = '1';
        btn.disabled = false;
        btn.textContent = 'Usuń';
    }
}
</script>

{% endblock %}