// ===============================
// 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"
    }
];

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

// ===============================
// 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;
}

// Prévisu des nouvelles images
beforeInput.addEventListener("change", function () {
    const file = this.files[0];
    if (!file) return;

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

afterInput.addEventListener("change", function () {
    const file = this.files[0];
    if (!file) return;

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

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

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

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

    // Ici ce serait un fetch vers l'API en vrai.
    successMsg.classList.remove("d-none");

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

// Init
loadPairData();