{# templates/questionnaire/new.html.twig #}
{% extends 'admin/dashboard.html.twig' %}

{% block title %}Créer un nouveau questionnaire{% endblock %}

{% block content %}
<h1 class="text-3xl font-bold text-gray-800 mb-6">Créer un nouveau questionnaire</h1>

<div class="bg-white rounded-2xl shadow-lg p-8">
    {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

    {# Titre du questionnaire #}
    <div>
        {{ form_label(form.title, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
        {{ form_widget(form.title, {'attr': {
            'class': 'w-full px-3 py-2 rounded-lg border border-gray-200 shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500'
        }}) }}
        {{ form_errors(form.title) }}
    </div>

    {# Container pour les parties - on stocke le prototype Symfony dans data-prototype #}
    <div id="parts" data-collection="parts"
         data-prototype="{{ form_widget(form.parts.vars.prototype)|e('html_attr') }}"
         class="space-y-6">
        {% for part in form.parts %}
            <div class="part-block p-4 bg-gray-50 rounded-lg shadow-sm relative mb-4">
                {{ form_row(part, {'attr': {'class': 'space-y-2'}}) }}
                <button type="button" class="remove-part absolute top-2 right-2 text-red-500 hover:text-red-700">Supprimer la partie</button>
            </div>
        {% endfor %}
    </div>

    <div class="flex gap-2 items-center">
        <button type="button" id="add-part" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition">
            Ajouter une partie
        </button>
        <span class="text-sm text-gray-500">Max 5 parties • max 30 questions totales</span>
    </div>

    <div>
        <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-md hover:bg-indigo-700 transition">
            Enregistrer
        </button>
    </div>

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

<a href="{{ path('app_questionnaire_index') }}" class="inline-block mt-4 text-indigo-600 hover:text-indigo-800">&larr; Retour à la liste</a>

{# Script : gère add/remove et réindexation pour collections imbriquées #}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const partsContainer = document.getElementById('parts');
    const addPartBtn = document.getElementById('add-part');
    const partPrototypeHtml = partsContainer.dataset.prototype || '';

    // -------------------------
    // Helpers : remplacement prototype
    // -------------------------
    function replacePrototypePlaceholders(html, index) {
        // remplace __name__ par index (Symfony prototype placeholder)
        return html.replace(/__name__/g, index);
    }

    // Déduit le "collection key" depuis l'id du container (ex: questionnaire_parts_0_questions -> questions)
    function getCollectionKey(container) {
        if (!container) return null;
        if (container.dataset && container.dataset.collection) return container.dataset.collection;
        // try infer from id suffix
        if (container.id) {
            const m = container.id.match(/_([a-zA-Z0-9]+)$/);
            if (m && m[1]) return m[1];
            // if id exactly 'parts' fallback
            if (container.id === 'parts') return 'parts';
        }
        return null;
    }

    // Remplace uniquement le segment [collectionKey][\d+] dans name et _collectionKey_\d+ dans id/for
    function reindexCollection(container) {
        if (!container) return;
        const children = Array.from(container.children).filter(c => c.nodeType === 1);
        const collectionKey = getCollectionKey(container);
        children.forEach((child, idx) => {
            // update names
            child.querySelectorAll('[name]').forEach(el => {
                let name = el.name;
                if (!name) return;
                if (collectionKey) {
                    // remplace [collectionKey][<number>] par [collectionKey][idx]
                    const re = new RegExp('\\[' + collectionKey + '\\]\\[\\d+\\]', 'g');
                    name = name.replace(re, '[' + collectionKey + '][' + idx + ']');
                } else {
                    // fallback: replace last numeric bracket
                    name = name.replace(/\[(\d+)\](?!.*\[\d+\])/, '[' + idx + ']');
                }
                el.name = name;
            });

            // update ids
            child.querySelectorAll('[id]').forEach(el => {
                let id = el.id;
                if (!id) return;
                if (collectionKey) {
                    const reId = new RegExp('_' + collectionKey + '_\\d+', 'g');
                    id = id.replace(reId, '_' + collectionKey + '_' + idx);
                } else {
                    id = id.replace(/_(\d+)(?!.*_\d+)/, '_' + idx);
                }
                el.id = id;
            });

            // update labels for
            child.querySelectorAll('label[for]').forEach(lb => {
                let f = lb.htmlFor;
                if (!f) return;
                if (collectionKey) {
                    const reFor = new RegExp('_' + collectionKey + '_\\d+', 'g');
                    f = f.replace(reFor, '_' + collectionKey + '_' + idx);
                } else {
                    f = f.replace(/_(\d+)(?!.*_\d+)/, '_' + idx);
                }
                lb.htmlFor = f;
            });

            // If the child has nested collections (questions/choices), we may also want to reindex those separately later.
        });
    }

    // Ajoute un listener pour bouton remove (générique)
    function wireRemoveButton(btn, parentToReindex) {
        btn.addEventListener('click', () => {
            const toRemove = btn.closest(parentToReindex) || btn.parentElement;
            if (toRemove) {
                const container = toRemove.parentElement;
                toRemove.remove();
                // reindex the container where element was removed
                reindexCollection(container);
                // if the container is questions, reindex parts too (ids may need consistency)
                if (container === partsContainer) {
                    reindexCollection(partsContainer);
                }
            }
        });
    }

    // -------------------------
    // Setup initial parts already rendered
    // -------------------------
    partsContainer.querySelectorAll('.part-block').forEach(pb => setupPart(pb));

    // -------------------------
    // add part
    // -------------------------
    addPartBtn.addEventListener('click', () => {
        if (partsContainer.children.length >= 5) {
            alert('Max 5 parties autorisées.');
            return;
        }
        const index = partsContainer.children.length;
        const newHtml = replacePrototypePlaceholders(partPrototypeHtml, index);

        const wrapper = document.createElement('div');
        wrapper.className = 'part-block p-4 bg-gray-50 rounded-lg shadow-sm relative mb-4';
        wrapper.innerHTML = newHtml + '<button type="button" class="remove-part absolute top-2 right-2 text-red-500 hover:text-red-700">Supprimer la partie</button>';

        partsContainer.appendChild(wrapper);

        setupPart(wrapper);
        // réindexer les parts (et leurs ids)
        reindexCollection(partsContainer);
    });

    // -------------------------
    // setupPart : gère questions à l'intérieur d'une part
    // -------------------------
    function setupPart(partBlock) {
        // remove button
        const removeBtn = partBlock.querySelector('.remove-part');
        if (removeBtn) {
            wireRemoveButton(removeBtn, '.part-block');
        }

        // find questions container (id ends with _questions)
        const questionsContainer = Array.from(partBlock.querySelectorAll('[id]')).find(el => /_questions$/.test(el.id));
        // fallback: find an element with data-prototype that likely is questions container
        const possible = partBlock.querySelector('[data-prototype]');
        const qc = questionsContainer || possible;

        if (!qc) {
            // nothing to do if no questions collection found
            return;
        }

        // Attempt to mark collection attribute for better reindex detection
        if (!qc.dataset.collection) {
            // set data-collection to 'questions' if id ends with _questions or name includes [questions]
            if (qc.id && qc.id.endsWith('_questions')) qc.dataset.collection = 'questions';
            else qc.dataset.collection = getCollectionKey(qc) || 'questions';
        }

        // add 'Ajouter une question' button if not present
        if (!partBlock.querySelector('.add-question-btn')) {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.textContent = 'Ajouter une question';
            btn.className = 'add-question-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition mb-4';
            partBlock.appendChild(btn);
            btn.addEventListener('click', () => addQuestion(qc, partBlock));
        }

        // setup existing questions
        Array.from(qc.children).filter(c => c.nodeType === 1).forEach(qb => setupQuestion(qb, qc));
        // ensure indices correct
        reindexCollection(qc);
    }

    // -------------------------
    // addQuestion: ajoute une question dans questionsContainer
    // -------------------------
    function addQuestion(questionsContainer, partBlock) {
        if (questionsContainer.children.length >= 8) {
            alert('Max 8 questions par partie.');
            return;
        }
        const qIndex = questionsContainer.children.length;
        const qPrototype = questionsContainer.dataset.prototype || '';
        if (!qPrototype) {
            console.warn('Aucun prototype trouvé pour questions. Vérifie que Symfony a rendu data-prototype sur le container questions.');
            return;
        }
        const newHtml = replacePrototypePlaceholders(qPrototype, qIndex);

        const qDiv = document.createElement('div');
        qDiv.className = 'question-block p-4 bg-white rounded-lg shadow-sm relative mb-4';
        qDiv.innerHTML = newHtml + '<button type="button" class="remove-question absolute top-2 right-2 text-red-500 hover:text-red-700">Supprimer la question</button>';

        questionsContainer.appendChild(qDiv);

        setupQuestion(qDiv, questionsContainer);

        // réindexer questionsContainer
        reindexCollection(questionsContainer);
        // et réindexer la partie parent (parts) pour garder les indices cohérents
        reindexCollection(partsContainer);
    }

    // -------------------------
    // setupQuestion : choices inside question
    // -------------------------
    function setupQuestion(qDiv, questionsContainer) {
        // remove question button
        const remove = qDiv.querySelector('.remove-question');
        if (remove) {
            wireRemoveButton(remove, '.question-block');
        }

        // style inputs texte (question content)
        qDiv.querySelectorAll('input[type="text"]').forEach(input => {
            input.classList.add('w-full', 'px-3', 'py-2', 'rounded-lg', 'border', 'border-gray-200', 'shadow-sm', 'focus:outline-none', 'focus:ring-1', 'focus:ring-indigo-500', 'mb-2');
        });

        // find choices container inside the question (id ends with _choices)
        const choicesContainer = Array.from(qDiv.querySelectorAll('[id]')).find(el => /_choices$/.test(el.id)) || qDiv.querySelector('[data-prototype]');
        if (!choicesContainer) {
            return;
        }

        // mark data-collection if not present
        if (!choicesContainer.dataset.collection) {
            if (choicesContainer.id && choicesContainer.id.endsWith('_choices')) choicesContainer.dataset.collection = 'choices';
            else choicesContainer.dataset.collection = getCollectionKey(choicesContainer) || 'choices';
        }

        // add choice button if not present
        if (!qDiv.querySelector('.add-choice-btn')) {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.textContent = 'Ajouter un choix';
            btn.className = 'add-choice-btn bg-yellow-500 text-white px-2 py-1 rounded-md hover:bg-yellow-600 mb-2';
            qDiv.appendChild(btn);
            btn.addEventListener('click', () => addChoice(choicesContainer, qDiv));
        }

        // wire existing choice remove buttons
        qDiv.querySelectorAll('.remove-choice').forEach(rc => {
            rc.addEventListener('click', (e) => {
                const row = e.target.closest('.choice-row') || e.target.closest('div');
                if (row) {
                    const container = row.parentElement;
                    row.remove();
                    reindexCollection(container);
                }
            });
        });

        // style existing choice inputs
        choicesContainer.querySelectorAll('input[type="text"]').forEach(input => {
            input.classList.add('w-full', 'px-3', 'py-2', 'rounded-lg', 'border', 'border-gray-200', 'shadow-sm', 'focus:outline-none', 'focus:ring-1', 'focus:ring-indigo-500', 'mb-1');
        });

        // ensure indices correct
        reindexCollection(choicesContainer);
    }

    // -------------------------
    // addChoice: ajoute un choix dans choicesContainer
    // -------------------------
    function addChoice(choicesContainer, qDiv) {
        if (choicesContainer.children.length >= 5) {
            alert('Max 5 choix par question.');
            return;
        }
        const cIndex = choicesContainer.children.length;
        const prototype = choicesContainer.dataset.prototype || '';
        if (!prototype) {
            console.warn('Aucun prototype trouvé pour choices. Vérifie que Symfony a rendu data-prototype sur le container choices.');
            return;
        }
        const newHtml = replacePrototypePlaceholders(prototype, cIndex);

        const choiceDiv = document.createElement('div');
        choiceDiv.className = 'choice-row mb-2 flex items-start gap-2';
        choiceDiv.innerHTML = newHtml + '<button type="button" class="remove-choice text-red-500 ml-2">X</button>';

        // style the text input inside choiceDiv
        choiceDiv.querySelectorAll('input[type="text"]').forEach(input => {
            input.classList.add('w-full', 'px-3', 'py-2', 'rounded-lg', 'border', 'border-gray-200', 'shadow-sm', 'focus:outline-none', 'focus:ring-1', 'focus:ring-indigo-500', 'mb-1');
        });

        choicesContainer.appendChild(choiceDiv);

        // wire remove
        const rem = choiceDiv.querySelector('.remove-choice');
        rem.addEventListener('click', () => {
            const container = choiceDiv.parentElement;
            choiceDiv.remove();
            reindexCollection(container);
        });

        // reindex choices container
        reindexCollection(choicesContainer);
        // and reindex questions container (to keep naming consistent)
        const questionsContainer = choicesContainer.closest('[id$="_questions"], [data-collection="questions"]');
        if (questionsContainer) reindexCollection(questionsContainer);
    }

});
</script>
{% endblock %}