window.addEventListener("load", function () {

    let uploadedImages = [];
    let currentImageIndex = 0;

    // 📌 مراقبة رفع الصور
    const observer = new MutationObserver(() => {

        const fileInputs = document.querySelectorAll(
            '.s-product-options-option[data-option-type="image"] input[type="file"]'
        );

        if (!fileInputs.length) return;

        fileInputs.forEach((input, index) => {

            if (input.dataset.listenerAdded) return;
            input.dataset.listenerAdded = "true";

            input.addEventListener("change", function (e) {

                const file = e.target.files[0];
                if (!file) return;

                const reader = new FileReader();

                reader.onload = function (event) {

                    uploadedImages[index] = event.target.result;

                    // أول صورة تتحط تلقائي
                    if (uploadedImages.length === 1) {
                        currentImageIndex = 0;
                    }

                    updateMainPreview();
                    updateGallery();
                    updateLightboxPreview();

                };

                reader.readAsDataURL(file);

            });

        });

    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });


    // =========================
    // الصورة الأساسية
    // =========================
    function updateMainPreview() {

        const sliderImage = document.querySelector(".details-slider img");

        if (!sliderImage || !uploadedImages[currentImageIndex]) return;

        const wrapper = sliderImage.parentElement;

        wrapper.style.position = "relative";

        let userImg = wrapper.querySelector(".user-preview");

        if (!userImg) {

            userImg = document.createElement("img");

            userImg.className = "user-preview";

            userImg.style.position = "absolute";
            userImg.style.top = "0";
            userImg.style.left = "0";
            userImg.style.width = "100%";
            userImg.style.height = "100%";
            userImg.style.objectFit = "cover";

            /* الصورة ورا الفريم */
            userImg.style.zIndex = "1";

            wrapper.appendChild(userImg);

            /* الفريم فوق */
            sliderImage.style.position = "relative";
            sliderImage.style.zIndex = "2";
        }

        userImg.src = uploadedImages[currentImageIndex];
    }


    // =========================
    // الجاليري تحت
    // =========================
    function updateGallery() {

        const slider = document.querySelector(".details-slider");

        if (!slider) return;

        let oldGallery = slider.querySelector(".custom-user-gallery");

        if (oldGallery) oldGallery.remove();

        const gallery = document.createElement("div");

        gallery.className = "custom-user-gallery";

        gallery.style.display = "flex";
        gallery.style.gap = "10px";
        gallery.style.justifyContent = "center";
        gallery.style.marginTop = "15px";
        gallery.style.flexWrap = "wrap";

        uploadedImages.forEach((imgSrc, index) => {

            if (!imgSrc) return;

            const thumb = document.createElement("img");

            thumb.src = imgSrc;

            thumb.style.width = "80px";
            thumb.style.height = "80px";
            thumb.style.objectFit = "cover";
            thumb.style.borderRadius = "10px";
            thumb.style.cursor = "pointer";
            thumb.style.border = "2px solid #ddd";
            thumb.style.transition = ".3s";

            thumb.onclick = function () {

                currentImageIndex = index;

                updateMainPreview();
                updateLightboxPreview();

            };

            gallery.appendChild(thumb);

        });

        slider.appendChild(gallery);

    }


    // =========================
    // Lightbox
    // =========================
    function updateLightboxPreview() {

        setTimeout(() => {

            const lightboxImg = document.querySelector(".fslightbox-source");

            if (!lightboxImg || !uploadedImages[currentImageIndex]) return;

            const wrapper = lightboxImg.parentElement;

            wrapper.style.position = "relative";

            let userImg = wrapper.querySelector(".user-preview-lightbox");

            if (!userImg) {

                userImg = document.createElement("img");

                userImg.className = "user-preview-lightbox";

                userImg.style.position = "absolute";
                userImg.style.top = "0";
                userImg.style.left = "0";
                userImg.style.width = "100%";
                userImg.style.height = "100%";
                userImg.style.objectFit = "cover";

                /* الصورة ورا الفريم */
                userImg.style.zIndex = "1";

                wrapper.appendChild(userImg);

                /* الفريم فوق */
                lightboxImg.style.position = "relative";
                lightboxImg.style.zIndex = "2";
            }

            userImg.src = uploadedImages[currentImageIndex];

        }, 500);

    }


    // =========================
    // فتح اللايت بوكس
    // =========================
    document.addEventListener("click", function () {

        updateLightboxPreview();

    });

});