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

{% block title %}Modifier le questionnaire - {{ questionnaire.title }}{% endblock %}

{% block content %}
<h1 class="text-3xl font-bold text-gray-800 mb-6">Modifier le questionnaire : {{ questionnaire.title }}</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">
            Mettre à jour
        </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 (parts → questions → choices) #}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const partsContainer = document.getElementById('parts');
    const addPartBtn = document.getElementById('add-part');
    const partPrototypeHtml = partsContainer ? partsContainer.dataset.prototype : '';

    // remplace __name__ par index
    function replacePrototypePlaceholders(html, index) {
        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;
        if (container.id) {
            // si l'id finit par _questions ou _choices etc.
            const m = container.id.match(/_([a-zA-Z0-9]+)$/);
            if (m && m[1]) return m[1];
            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) {
                    const re = new RegExp('\\[' + collectionKey + '\\]\\[\\d+\\]', 'g');
                    name = name.replace(re, '[' + collectionKey + '][' + idx + ']');
                } else {
                    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;
            });
        });
    }

    function wireRemoveButton(btn, parentSelector) {
        btn.addEventListener('click', () => {
            const toRemove = btn.closest(parentSelector) || btn.parentElement;
            if (toRemove) {
                const container = toRemove.parentElement;
                toRemove.remove();
                reindexCollection(container);
                if (container === partsContainer) {
                    reindexCollection(partsContainer);
                }
            }
        });
    }

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

    // add part
    if (addPartBtn) {
        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);
            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) or dataset.prototype present
        const questionsContainer = Array.from(partBlock.querySelectorAll('[id]')).find(el => /_questions$/.test(el.id)) || partBlock.querySelector('[data-prototype]');
        const qc = questionsContainer;

        if (!qc) {
            return;
        }

        if (!qc.dataset.collection) {
            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));
        reindexCollection(qc);
    }

    // addQuestion
    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);

        reindexCollection(questionsContainer);
        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 or has prototype)
        const choicesContainer = Array.from(qDiv.querySelectorAll('[id]')).find(el => /_choices$/.test(el.id)) || qDiv.querySelector('[data-prototype]');
        if (!choicesContainer) {
            return;
        }

        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');
        });

        reindexCollection(choicesContainer);
    }

    // addChoice
    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>';

        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);

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

        reindexCollection(choicesContainer);
        const questionsContainer = choicesContainer.closest('[id$="_questions"], [data-collection="questions"]');
        if (questionsContainer) reindexCollection(questionsContainer);
    }

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