// ===============================
// Données simulées
// (mêmes IDs que dans la liste !)
// ===============================
const galleryPairs = [
    {
        id: 1,
        titre: "Petit chien poils longs",
        type: "Chien",
        avant: "../../img/avant1.jpg",
        apres: "../../img/apres1.jpg"
    },
    {
        id: 2,
        titre: "Coupe ciseaux",
        type: "Chat",
        avant: "../../img/avant2.jpg",
        apres: "../../img/apres2.jpg"
    }
];

// ===============================
// Formats d'images autorisés
// ===============================
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];

// Sélecteurs
const editForm = document.getElementById("editPairForm");
const pairIdInput = document.getElementById("pairId");
const titleInput = document.getElementById("pairTitle");
const typeSelect = document.getElementById("pairType");
const beforeInput = document.getElementById("beforeImage");
const afterInput = document.getElementById("afterImage");
const beforePreview = document.getElementById("beforePreview");
const afterPreview = document.getElementById("afterPreview");

const successMsg = document.getElementById("successMsg");
const errorMsg = document.getElementById("errorMsg");
const errorFormat = document.getElementById("errorFormat");

// ===============================
// Récup ID dans l'URL
// ===============================
function getPairIdFromUrl() {
    const params = new URLSearchParams(window.location.search);
    const idParam = params.get("id");

    if (!idParam) {
        // pas d'id → retour à la liste
        window.location.href = "../liste_avant_apres/liste_avant_apres.html";
        return null;
    }

    return parseInt(idParam, 10);
}

// ===============================
// Charger la paire
// ===============================
function loadPairData() {
    const id = getPairIdFromUrl();
    if (!id) return;

    const pair = galleryPairs.find(p => p.id === id);

    if (!pair) {
        errorMsg.textContent = "Paire introuvable.";
        errorMsg.classList.remove("d-none");
        editForm.classList.add("d-none");
        return;
    }

    pairIdInput.value = pair.id;
    titleInput.value = pair.titre;
    typeSelect.value = pair.type;
    beforePreview.src = pair.avant;
    afterPreview.src = pair.apres;
}

// ===============================
// Gestion du changement d'image
// ===============================
function handleImageChange(inputEl, previewEl) {
    const file = inputEl.files[0];
    if (!file) return;

    // Vérification format
    if (!allowedTypes.includes(file.type)) {
        // Format non autorisé
        errorFormat.classList.remove("d-none");
        inputEl.value = "";       // reset du champ
        previewEl.src = "";       // reset de la prévisu
        return;
    }

    // Format OK → on cache le message d'erreur
    errorFormat.classList.add("d-none");

    const reader = new FileReader();
    reader.onload = e => {
        previewEl.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

// Prévisu des nouvelles images + contrôle format
beforeInput.addEventListener("change", function () {
    handleImageChange(beforeInput, beforePreview);
});

afterInput.addEventListener("change", function () {
    handleImageChange(afterInput, afterPreview);
});

// Soumission
editForm.addEventListener("submit", function (e) {
    e.preventDefault();

    errorMsg.classList.add("d-none");
    successMsg.classList.add("d-none");
    errorFormat.classList.add("d-none");

    if (!titleInput.value.trim()) {
        errorMsg.textContent = "Le titre est obligatoire.";
        errorMsg.classList.remove("d-none");
        return;
    }

    // Double check format côté submit (au cas où)
    const filesToCheck = [beforeInput.files[0], afterInput.files[0]];
    for (const file of filesToCheck) {
        if (!file || !allowedTypes.includes(file.type)) {
            errorFormat.classList.remove("d-none");
            return;
        }
    }

    
    successMsg.classList.remove("d-none");

    setTimeout(() => {
        window.location.href = "../liste_avant_apres/liste_avant_apres.html";
    }, 1500);
});

// Init
loadPairData();