document.addEventListener("DOMContentLoaded", function () {
    // Funzione per caricare il contenuto del popup
    async function loadPopupContent(iddatadb) {
        const popupContent = document.getElementById("popupContent");
        if (!popupContent) {
            console.error("Elemento popupContent non trovato");
            return;
        }
        try {
            console.log("Caricamento contenuto per iddatadb:", iddatadb);
            const response = await fetch(
                `photos_popup.php?iddatadb=${iddatadb}`,
            );
            if (!response.ok)
                throw new Error("Errore nella risposta del server");
            popupContent.innerHTML = await response.text();
            attachPhotoEventListeners(iddatadb);
        } catch (error) {
            popupContent.innerHTML = `<p>Errore durante il caricamento: ${error.message}</p>`;
            console.error("Errore in loadPopupContent:", error);
        }
    }

    // Funzione per gestire la webcam
    function setupWebcam(iddatadb) {
        const openWebcamBtn = document.getElementById("openWebcamBtn");
        const webcamArea = document.getElementById("webcamArea");
        const webcamVideo = document.getElementById("webcamVideo");
        const captureBtn = document.getElementById("captureBtn");
        const closeWebcamBtn = document.getElementById("closeWebcamBtn");
        let stream = null;

        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            console.warn("La webcam non è supportata dal browser.");
            if (openWebcamBtn) openWebcamBtn.style.display = "none";
            return;
        }

        if (
            !openWebcamBtn ||
            !webcamArea ||
            !webcamVideo ||
            !captureBtn ||
            !closeWebcamBtn
        ) {
            console.error("Elementi webcam mancanti");
            return;
        }

        // Apri la webcam
        openWebcamBtn.addEventListener("click", async () => {
            try {
                stream = await navigator.mediaDevices.getUserMedia({
                    video: true,
                });
                webcamVideo.srcObject = stream;
                webcamArea.style.display = "block";
                openWebcamBtn.style.display = "none";
                dropArea.style.display = "none";
            } catch (error) {
                alert("Errore nell'accesso alla webcam: " + error.message);
            }
        });

        // Cattura la foto
        captureBtn.addEventListener("click", () => {
            const canvas = document.createElement("canvas");
            canvas.width = webcamVideo.videoWidth;
            canvas.height = webcamVideo.videoHeight;
            canvas
                .getContext("2d")
                .drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);

            // Converti l'immagine in un file
            canvas.toBlob(async (blob) => {
                const file = new File(
                    [blob],
                    `webcam_photo_${Date.now()}.jpg`,
                    { type: "image/jpeg" },
                );
                const loader = document.getElementById("loader");
                if (loader) {
                    console.log("Mostro loader per upload webcam");
                    loader.style.display = "flex";
                }
                await handleFiles([file], iddatadb);
                closeWebcam();
            }, "image/jpeg");
        });

        // Chiudi la webcam
        closeWebcamBtn.addEventListener("click", () => {
            closeWebcam();
        });

        function closeWebcam() {
            if (stream) {
                stream.getTracks().forEach((track) => track.stop());
                webcamVideo.srcObject = null;
                webcamArea.style.display = "none";
                openWebcamBtn.style.display = "block";
                dropArea.style.display = "block";
            }
        }
    }

    // Funzione per attaccare gli event listener al contenuto del popup
    function attachPhotoEventListeners(iddatadb) {
        const dropArea = document.getElementById("dropArea");
        const photoInput = document.getElementById("photoInput");
        const photosModal = document.getElementById("photosModal");

        if (!dropArea || !photoInput || !photosModal) {
            console.error("Elementi mancanti:", {
                dropArea,
                photoInput,
                photosModal,
            });
            return;
        }

        console.log("Event listener associati per iddatadb:", iddatadb);

        // Gestione drag-and-drop
        const preventDefaults = (e) => {
            e.preventDefault();
            e.stopPropagation();
        };

        ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        ["dragenter", "dragover"].forEach((eventName) => {
            dropArea.addEventListener(
                eventName,
                () => dropArea.classList.add("highlight"),
                false,
            );
        });

        ["dragleave", "drop"].forEach((eventName) => {
            dropArea.addEventListener(
                eventName,
                () => dropArea.classList.remove("highlight"),
                false,
            );
        });

        dropArea.addEventListener(
            "drop",
            (e) => {
                console.log("Evento drop attivato");
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    handleFiles(files, iddatadb);
                }
            },
            false,
        );

        dropArea.addEventListener(
            "click",
            () => {
                console.log("Click su dropArea, apro input file");
                photoInput.click();
            },
            false,
        );

        photoInput.addEventListener(
            "change",
            (e) => {
                console.log("Evento change su photoInput");
                const files = e.target.files;
                if (files.length > 0) {
                    handleFiles(files, iddatadb);
                }
                // Resetta l'input per consentire il caricamento dello stesso file
                e.target.value = "";
            },
            false,
        );

        // Gestione rimozione foto
        document.querySelectorAll(".delete-photo-btn").forEach((button) => {
            button.addEventListener("click", async function () {
                const photoId = this.getAttribute("data-photo-id");
                if (confirm("Sei sicuro di voler eliminare questa foto?")) {
                    try {
                        const response = await fetch("delete_photo.php", {
                            method: "POST",
                            headers: {
                                "Content-Type":
                                    "application/x-www-form-urlencoded",
                            },
                            body: `photo_id=${photoId}`,
                        });
                        const result = await response.json();
                        if (result.success) {
                            loadPopupContent(iddatadb);
                        } else {
                            alert(
                                "Errore durante l'eliminazione: " +
                                    result.message,
                            );
                        }
                    } catch (error) {
                        alert(
                            "Errore durante l'eliminazione: " + error.message,
                        );
                    }
                }
            });
        });

        // Gestione ingrandimento immagini
        document.querySelectorAll(".thumbnail").forEach((img) => {
            img.addEventListener("click", function () {
                console.log("Click su thumbnail, apro modale immagine");
                const enlargedImage = document.getElementById("enlargedImage");
                enlargedImage.src = this.src;
                document.getElementById("imageModal").style.display = "block";
            });
        });

        // Gestione chiusura modale immagine
        const imageCloseBtn = document.querySelector(".image-modal-close");
        if (imageCloseBtn) {
            imageCloseBtn.addEventListener("click", () => {
                console.log("Chiusura modale immagine");
                document.getElementById("imageModal").style.display = "none";
            });
        }
        document
            .getElementById("imageModal")
            .addEventListener("click", function (event) {
                if (event.target === this) {
                    console.log(
                        "Chiusura modale immagine cliccando sullo sfondo",
                    );
                    this.style.display = "none";
                }
            });

        // Inizializza la gestione della webcam
        setupWebcam(iddatadb);

        // Assicurati che il loader sia nascosto all'apertura del popup
        const loader = document.getElementById("loader");
        if (loader) {
            console.log("Nascondo loader all'apertura del popup");
            loader.style.display = "none";
        }
    }

    // Funzione per gestire il caricamento dei file
    async function handleFiles(files, iddatadb) {
        const loader = document.getElementById("loader");
        if (!loader) {
            console.error("Elemento loader non trovato");
            return;
        }

        if (!files || files.length === 0) {
            console.warn("Nessun file da caricare");
            return;
        }

        for (const file of files) {
            if (!file.type.startsWith("image/")) {
                alert("Per favore, carica solo immagini!");
                continue;
            }

            console.log("Inizio upload del file:", file.name);
            loader.style.display = "flex";

            const formData = new FormData();
            formData.append("photo", file);
            formData.append("iddatadb", iddatadb);
            try {
                const response = await fetch("upload_photo.php", {
                    method: "POST",
                    body: formData,
                });
                const result = await response.json();
                if (result.success) {
                    console.log(
                        "Upload completato con successo, ricarico popup",
                    );
                    loadPopupContent(iddatadb);
                } else {
                    alert("Errore durante il caricamento: " + result.message);
                }
            } catch (error) {
                alert("Errore durante il caricamento: " + error.message);
            } finally {
                console.log("Nascondo loader dopo upload");
                loader.style.display = "none";
            }
        }
    }

    // Gestione del pulsante Photos
    const photosButtons = document.querySelectorAll(".photos-btn");
    const photosModal = document.getElementById("photosModal");
    const closeBtn = document.querySelector(".close-btn");

    if (photosButtons.length && photosModal && closeBtn) {
        photosButtons.forEach((button) => {
            button.addEventListener("click", function () {
                console.log(
                    "Pulsante Photos cliccato per iddatadb:",
                    this.getAttribute("data-iddatadb"),
                );
                const iddatadb = this.getAttribute("data-iddatadb");
                loadPopupContent(iddatadb);
                photosModal.style.display = "block";
                document.querySelector(".overlay").style.display = "none";
            });
        });

        closeBtn.addEventListener("click", function () {
            console.log("Chiusura modale photos");
            photosModal.style.display = "none";
            document.querySelector(".overlay").style.display = "none";
            document.body.style.pointerEvents = "auto";
        });

        window.addEventListener("click", function (event) {
            if (event.target === photosModal) {
                console.log("Chiusura modale photos cliccando sullo sfondo");
                photosModal.style.display = "none";
                document.querySelector(".overlay").style.display = "none";
                document.body.style.pointerEvents = "auto";
            }
        });
    } else {
        console.error("Elementi mancanti:", {
            photosButtons,
            photosModal,
            closeBtn,
        });
    }
});