document.addEventListener("DOMContentLoaded", () => {
    const btnOpenForm = document.getElementById("btnOpenForm");
    const btnCloseForm = document.getElementById("btnCloseForm");
    const formModal = document.getElementById("formModal");
    const step1 = document.getElementById("step1");
    const step2 = document.getElementById("step2");
    const btnGoStep2 = document.getElementById("btnGoStep2");
    const btnBackStep1 = document.getElementById("btnBackStep1");
    const btnAddCoasterField = document.getElementById("btnAddCoasterField");
    const coastersDynamicContainer = document.getElementById("coastersDynamicContainer");
    const multiStepForm = document.getElementById("multiStepForm");
    
    let coasterIndex = 1;

    btnOpenForm.addEventListener("click", () => formModal.style.display = "flex");
    btnCloseForm.addEventListener("click", () => formModal.style.display = "none");
    window.addEventListener("click", (e) => { if (e.target === formModal) formModal.style.display = "none"; });

    btnGoStep2.addEventListener("click", () => {
        const nomParc = document.querySelector("input[name='nom_parc']").value.trim();
        const pays = document.querySelector("input[name='pays']").value.trim();
        const gps = document.querySelector("input[name='gps']").value.trim();

        if (nomParc !== "" && pays !== "" && gps !== "") {
            step1.classList.remove("active-pane");
            step2.classList.add("active-pane");
        } else {
            alert("Veuillez renseigner les champs obligatoires (*) de l'Étape 1.");
        }
    });

    btnBackStep1.addEventListener("click", () => {
        step2.classList.remove("active-pane");
        step1.classList.add("active-pane");
    });

    btnAddCoasterField.addEventListener("click", () => {
        const newCoasterCard = document.createElement("div");
        newCoasterCard.className = "ap-coaster-block-card";
        newCoasterCard.innerHTML = `
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">
                <h6 style="margin:0; font-size:0.9rem; font-weight:800;">Attraction #${coasterIndex + 1}</h6>
                <button type="button" class="ap-btn-remove" style="background:none; border:none; color:#ef4444; font-weight:700; cursor:pointer; font-size:0.8rem;">Supprimer</button>
            </div>
            <div class="ap-form-grid-three">
                <div class="ap-field-group"><label>Nom *</label><input type="text" name="coasters[${coasterIndex}][nom]" class="ap-input coaster-name-input"></div>
                <div class="ap-field-group"><label>Année</label><input type="number" name="coasters[${coasterIndex}][annee]" class="ap-input"></div>
                <div class="ap-field-group"><label>Constructeur</label><input type="text" name="coasters[${coasterIndex}][constructeur]" class="ap-input"></div>
                <div class="ap-field-group"><label>Hauteur</label><input type="text" name="coasters[${coasterIndex}][hauteur]" class="ap-input"></div>
                <div class="ap-field-group"><label>Longueur</label><input type="text" name="coasters[${coasterIndex}][longueur]" class="ap-input"></div>
                <div class="ap-field-group"><label>Vitesse</label><input type="text" name="coasters[${coasterIndex}][vitesse]" class="ap-input"></div>
                <div class="ap-field-group">
                    <label>Statut</label>
                    <select name="coasters[${coasterIndex}][statut]" class="ap-input">
                        <option value="Ouvert">Ouvert</option>
                        <option value="Fermé">Fermé (Exclu de la carte)</option>
                        <option value="En Maintenance">En Maintenance</option>
                    </select>
                </div>
            </div>
        `;
        coastersDynamicContainer.appendChild(newCoasterCard);
        coasterIndex++;

        newCoasterCard.querySelector(".ap-btn-remove").addEventListener("click", () => newCoasterCard.remove());
    });

    multiStepForm.addEventListener("submit", (e) => {
        const firstCoaster = document.querySelector(".coaster-name-input").value.trim();
        if (firstCoaster === "") {
            e.preventDefault();
            alert("Veuillez attribuer un nom à votre première attraction.");
        }
    });
});