{% extends 'base.html.twig' %}

{% block title %}Nuevo evento{% endblock %}

{% block body %}
<div class="container container--narrow">
    <div class="page-header">
        <h1 class="page-title">Nuevo evento</h1>
        <p class="page-subtitle">Grupo: {{ grupo.nombre }}</p>
    </div>

    <div class="glass-card">
        {{ form_start(form, {attr: {novalidate: 'novalidate', id: 'evento-form'}}) }}

            <div class="form-group">
                {{ form_label(form.titulo, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.titulo, {attr: {class: 'form-control', autofocus: true}}) }}
                {{ form_errors(form.titulo) }}
            </div>

            <div class="form-group">
                {{ form_label(form.descripcion, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.descripcion, {attr: {class: 'form-control'}}) }}
            </div>

            <div class="form-group">
                <label class="form-label">Juego (opcional)</label>
                <input type="hidden" id="juego-id-input" name="juego_id" value="">

                <div id="juego-selector">
                    <div style="margin-bottom:.75rem">
                        <button type="button" id="btn-sin-juego" class="btn btn--ghost btn--sm" style="background:var(--color-fill-3,#eee)">
                            Sin juego específico
                        </button>
                    </div>

                    {% if topJuegos is defined and topJuegos|length > 0 %}
                    <p class="form-hint" style="margin-bottom:.5rem">Más deseados por el grupo:</p>
                    <div id="top-juegos-grid" style="display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem">
                        {% for juego in topJuegos %}
                        <button type="button" class="juego-card btn btn--ghost btn--sm"
                                data-id="{{ juego.id }}"
                                data-nombre="{{ juego.nombre|e('html_attr') }}"
                                data-imagen="{{ juego.imagenUrl ?? '' }}"
                                style="display:flex;align-items:center;gap:.4rem;padding:.3rem .6rem">
                            {% if juego.imagenUrl %}
                            <img src="{{ juego.imagenUrl }}" alt="{{ juego.nombre }}" style="height:32px;border-radius:3px;object-fit:cover">
                            {% endif %}
                            <span>{{ juego.nombre }}</span>
                        </button>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <div style="position:relative">
                        <input type="text" id="juego-buscar" class="form-control" placeholder="Buscar en la colección…" autocomplete="off">
                        <div id="juego-buscar-resultados" style="display:none;position:absolute;z-index:100;background:var(--color-bg-2,#1e1e2e);border:1px solid var(--color-border,#444);border-radius:6px;max-height:220px;overflow-y:auto;width:100%;top:calc(100% + 4px)"></div>
                    </div>
                </div>

                <div id="juego-elegido" style="display:none;align-items:center;gap:.5rem;margin-top:.5rem;padding:.4rem .75rem;background:var(--color-fill-3,#333);border-radius:6px">
                    <img id="juego-elegido-img" src="" alt="" style="height:36px;border-radius:3px;object-fit:cover;display:none">
                    <span id="juego-elegido-nombre" style="flex:1;font-weight:500"></span>
                    <button type="button" id="btn-quitar-juego" class="btn btn--ghost btn--sm">✕ Quitar</button>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Fechas propuestas</label>
                <div id="fechas-container" data-prototype="{{ form_widget(form.fechas.vars.prototype)|e('html_attr') }}">
                    {% for fechaField in form.fechas %}
                    <div class="fecha-row">
                        {{ form_widget(fechaField, {attr: {class: 'form-control'}}) }}
                        <button type="button" class="btn btn--ghost btn--sm remove-fecha">✕</button>
                    </div>
                    {% endfor %}
                </div>
                <button type="button" id="add-fecha" class="btn btn--ghost btn--sm" style="margin-top:.5rem">+ Añadir fecha</button>
                {{ form_errors(form.fechas) }}
            </div>

            <button type="submit" class="btn btn--primary btn--full">Crear evento</button>

        {{ form_end(form) }}
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
(function () {
    /* ── Selector de juego ── */
    const todosJuegos   = {{ todosJuegosJson|raw }};
    const hiddenInput   = document.getElementById('juego-id-input');
    const selectorWrap  = document.getElementById('juego-selector');
    const elegidoWrap   = document.getElementById('juego-elegido');
    const elegidoImg    = document.getElementById('juego-elegido-img');
    const elegidoNombre = document.getElementById('juego-elegido-nombre');
    const buscarInput   = document.getElementById('juego-buscar');
    const resultadosDiv = document.getElementById('juego-buscar-resultados');

    function escHtml(t) {
        const d = document.createElement('div');
        d.textContent = String(t ?? '');
        return d.innerHTML;
    }

    function seleccionar(id, nombre, imagen) {
        hiddenInput.value = id;
        elegidoNombre.textContent = nombre;
        if (imagen) {
            elegidoImg.src = imagen;
            elegidoImg.style.display = 'block';
        } else {
            elegidoImg.style.display = 'none';
        }
        elegidoWrap.style.display = 'flex';
        selectorWrap.style.display = 'none';
        resultadosDiv.style.display = 'none';
    }

    function limpiar() {
        hiddenInput.value = '';
        elegidoWrap.style.display = 'none';
        selectorWrap.style.display = '';
        buscarInput.value = '';
        resultadosDiv.style.display = 'none';
    }

    document.getElementById('btn-sin-juego').addEventListener('click', limpiar);
    document.getElementById('btn-quitar-juego').addEventListener('click', limpiar);

    document.querySelectorAll('.juego-card').forEach(btn => {
        btn.addEventListener('click', () => seleccionar(btn.dataset.id, btn.dataset.nombre, btn.dataset.imagen));
    });

    buscarInput.addEventListener('input', function () {
        const q = this.value.trim().toLowerCase();
        if (q.length < 2) { resultadosDiv.style.display = 'none'; return; }
        const matches = todosJuegos.filter(j => j.nombre.toLowerCase().includes(q)).slice(0, 15);
        if (matches.length === 0) { resultadosDiv.style.display = 'none'; return; }
        resultadosDiv.innerHTML = matches.map(j =>
            `<button type="button"
                     data-id="${escHtml(j.id)}" data-nombre="${escHtml(j.nombre)}" data-imagen="${escHtml(j.imagenUrl ?? '')}"
                     style="display:flex;align-items:center;gap:.4rem;width:100%;padding:.4rem .6rem;background:none;border:none;cursor:pointer;text-align:left;color:inherit">
                ${j.imagenUrl ? `<img src="${escHtml(j.imagenUrl)}" alt="" style="height:28px;border-radius:3px;object-fit:cover;flex-shrink:0">` : ''}
                <span>${escHtml(j.nombre)}</span>
            </button>`
        ).join('');
        resultadosDiv.style.display = 'block';
        resultadosDiv.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', () => seleccionar(btn.dataset.id, btn.dataset.nombre, btn.dataset.imagen));
        });
    });

    document.addEventListener('click', e => {
        if (!buscarInput.contains(e.target) && !resultadosDiv.contains(e.target)) {
            resultadosDiv.style.display = 'none';
        }
    });
}());

(function () {
    /* ── Selector de fechas ── */
    const container = document.getElementById('fechas-container');
    const proto     = container.dataset.prototype;
    let idx         = container.querySelectorAll('.fecha-row').length;

    document.getElementById('add-fecha').addEventListener('click', () => {
        const html = proto.replace(/__name__/g, idx++);
        const row  = document.createElement('div');
        row.className = 'fecha-row';
        row.innerHTML = html.replace('class="', 'class="form-control ') + '<button type="button" class="btn btn--ghost btn--sm remove-fecha">✕</button>';
        container.appendChild(row);
    });

    container.addEventListener('click', (e) => {
        if (e.target.classList.contains('remove-fecha')) {
            e.target.closest('.fecha-row').remove();
        }
    });
})();
</script>
{% endblock %}