document.addEventListener("DOMContentLoaded", function () {
    var POPUP_BASE_URL = "https://cheongdam-circle-global.com";


    var popup = document.querySelector("#popup");
    var tabNav = document.querySelector("#popupTabNav");
    var swiperWrapper = document.querySelector("#popupSwiperWrapper");
    var countWrap = popup ? popup.querySelector(".tab_con .slide_count") : null;
    var curEl = countWrap ? countWrap.querySelector(".cur") : null;
    var totalEl = countWrap ? countWrap.querySelector(".total") : null;


    if (!popup || !tabNav || !swiperWrapper) {
        return;
    }


    var popupSwiper = null;
    var mql = window.matchMedia("(max-width: 768px)");
    var breakpointBound = false;


    function setCookie(cname, cvalue, exdays) {
        var todayDate = new Date();
        todayDate.setTime(todayDate.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + todayDate.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
    }


    function closePopupWithTodayOption() {
        var checkbox = document.querySelector("input[name='chkbox']");
        if (checkbox && checkbox.checked) {
            setCookie("close", "Y", 1);
        }


        popup.style.display = "none";
        var bgMask = document.querySelector("#bg_mask");
        if (bgMask) bgMask.style.display = "none";
        document.body.classList.remove("no_scroll");
    }


    function closePopupOnly() {
        popup.style.display = "none";
        var bgMask = document.querySelector("#bg_mask");
        if (bgMask) bgMask.style.display = "none";
        document.body.classList.remove("no_scroll");
    }


    function bindCloseEvents() {
        var todayClose = document.querySelector(".today_close");
        var btnClose = document.querySelector(".btnClose");


        if (todayClose) {
            todayClose.addEventListener("click", function (e) {
                e.preventDefault();
                closePopupWithTodayOption();
            });
        }


        if (btnClose) {
            btnClose.addEventListener("click", function (e) {
                e.preventDefault();
                closePopupOnly();
            });
        }
    }


    function escapeHtml(str) {
        str = String(str || "");
        return str
            .replace(/&/g, "&")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;");
    }


    function titleToHtml(str) {
        return escapeHtml(String(str || "")).replace(/\n/g, "<br>");
    }


    function toDate(value) {
        if (!value) return null;
        var date = new Date(value);
        return isNaN(date.getTime()) ? null : date;
    }


    function toAbsoluteUrl(path) {
        path = path || "";
        if (!path) return "";
        if (/^https?:\/\//i.test(path)) return path;
        return POPUP_BASE_URL + (path.charAt(0) === "/" ? "" : "/") + path;
    }


    function getComputedStatus(item) {
        if (item.trashedAt) return "trashed";
        if (!item.isEnabled) return "inactive";


        var now = new Date();
        var start = toDate(item.startAt);
        var end = toDate(item.endAt);


        if (start && now < start) return "scheduled";
        if (end && now > end) return "expired";


        return "active";
    }


    function normalizePopupItem(item, index) {
        var linkMode = item.linkMode || (!item.linkUrl ? "none" : item.target === "_blank" ? "blank" : "same");


        return {
            id: item.id || ("popup_" + (index + 1)),
            title: String(item.title || ""),
            image: toAbsoluteUrl(item.image || ""),
            alt: item.alt || "",
            linkUrl: item.linkUrl || "",
            linkMode: linkMode,
            isEnabled: typeof item.isEnabled === "boolean" ? item.isEnabled : true,
            startAt: item.startAt || "",
            endAt: item.endAt || "",
            sortOrder: typeof item.sortOrder === "number" ? item.sortOrder : (index + 1),
            trashedAt: item.trashedAt || ""
        };
    }


    function buildSlideImage(item) {
        var imgHtml = '<img src="' + escapeHtml(item.image) + '" alt="' + escapeHtml(item.alt || item.title || "") + '">';


        if (item.linkMode === "blank" && item.linkUrl) {
            return '<a href="' + escapeHtml(item.linkUrl) + '" target="_blank" rel="noopener noreferrer">' + imgHtml + '</a>';
        }


        if (item.linkMode === "same" && item.linkUrl) {
            return '<a href="' + escapeHtml(item.linkUrl) + '">' + imgHtml + '</a>';
        }


        return '<a href="javascript:void(0);">' + imgHtml + '</a>';
    }


    function setActiveByIndex(idx) {
        var tabItems = popup.querySelectorAll(".tab_nav li");
        var slides = popup.querySelectorAll(".tab_con .swiper-slide");
        var i;


        for (i = 0; i < slides.length; i++) {
            if (i === idx) slides[i].classList.add("active");
            else slides[i].classList.remove("active");
        }


        for (i = 0; i < tabItems.length; i++) {
            if (i === idx) tabItems[i].classList.add("active");
            else tabItems[i].classList.remove("active");
        }
    }


    function cleanupInline() {
        var wrapper = popup.querySelector(".mySwiper .swiper-wrapper");
        var slides = popup.querySelectorAll(".tab_con .swiper-slide");
        var i;


        if (wrapper) wrapper.removeAttribute("style");


        for (i = 0; i < slides.length; i++) {
            slides[i].removeAttribute("style");
        }
    }


    function updateCount() {
        if (!popupSwiper || !curEl || !totalEl) return;
        totalEl.textContent = String(popupSwiper.slides.length);
        curEl.textContent = String(popupSwiper.activeIndex + 1);
    }


    function enableSwiper() {
        if (popupSwiper) return;


        var slides = popup.querySelectorAll(".tab_con .swiper-slide");
        var activeIdx = 0;
        var i;


        for (i = 0; i < slides.length; i++) {
            if (slides[i].classList.contains("active")) {
                activeIdx = i;
                break;
            }
        }


        popupSwiper = new Swiper(popup.querySelector(".mySwiper"), {
            slidesPerView: 1,
            spaceBetween: 0,
            autoHeight: true,
            watchOverflow: true,
            initialSlide: activeIdx,
            observer: true,
            observeParents: true
        });


        var sync = function () {
            setActiveByIndex(popupSwiper.activeIndex);
            updateCount();
        };


        sync();
        popupSwiper.on("slideChange", sync);
    }


    function disableSwiper() {
        if (popupSwiper) {
            var idx = popupSwiper.activeIndex;
            popupSwiper.destroy(true, true);
            popupSwiper = null;
            cleanupInline();
            setActiveByIndex(idx);
        }


        if (!popup.querySelector(".tab_con .swiper-slide.active")) {
            setActiveByIndex(0);
        }
    }


    function handleBreakpoint(e) {
        if (e.matches) enableSwiper();
        else disableSwiper();
    }


    function showPopupIfAllowed() {
        var cookiedata = document.cookie;
        var bgMask = document.querySelector("#bg_mask");


        if (cookiedata.indexOf("close=Y") < 0) {
            popup.style.display = "block";
            if (bgMask) bgMask.style.display = "block";
            document.body.classList.add("no_scroll");
        } else {
            popup.style.display = "none";
            if (bgMask) bgMask.style.display = "none";
            document.body.classList.remove("no_scroll");
        }
    }


    function bindTabEvents() {
        var tabItems = popup.querySelectorAll(".tab_nav li");
        var i;


        for (i = 0; i < tabItems.length; i++) {
            (function (idx) {
                tabItems[idx].addEventListener("click", function () {
                    if (popupSwiper) popupSwiper.slideTo(idx);
                    else setActiveByIndex(idx);
                });
            })(i);
        }
    }


    function renderPopups(activePopups) {
        var tabHtml = "";
        var slideHtml = "";
        var i;


        for (i = 0; i < activePopups.length; i++) {
            tabHtml += '<li id="' + escapeHtml(activePopups[i].id) + '" class="' + (i === 0 ? "active" : "") + '">' +
                titleToHtml(activePopups[i].title) +
                '</li>';


            slideHtml += '<div data-popup="#' + escapeHtml(activePopups[i].id) + '" class="swiper-slide ' + (i === 0 ? "active" : "") + '">' +
                buildSlideImage(activePopups[i]) +
                "</div>";
        }


        tabNav.innerHTML = tabHtml;
        swiperWrapper.innerHTML = slideHtml;


        bindTabEvents();
        handleBreakpoint(mql);


        if (!breakpointBound) {
            if (mql.addEventListener) mql.addEventListener("change", handleBreakpoint);
            else mql.addListener(handleBreakpoint);
            breakpointBound = true;
        }


        showPopupIfAllowed();
    }


    function sortByOrder(a, b) {
        return a.sortOrder - b.sortOrder;
    }


    function loadHomepagePopups() {
        console.log("popup script start");
        console.log("popup exists:", !!popup);
        console.log("fetch url:", POPUP_BASE_URL + "/ko/popup-admin/public-popups.php");


        fetch(POPUP_BASE_URL + "/ko/popup-admin/public-popups.php", {
            cache: "no-store"
        })
        .then(function (res) {
            console.log("fetch response", res);


            if (!res.ok) {
                throw new Error("Popup JSON load failed: " + res.status);
            }


            return res.json();
        })
        .then(function (data) {
            console.log("json parsed", data);


            var popupArray = [];
            var activePopups = [];
            var i;


            if (Array.isArray(data)) {
                popupArray = data;
            } else if (data && Array.isArray(data.popups)) {
                popupArray = data.popups;
            } else {
                throw new Error("Popup JSON format error");
            }


            for (i = 0; i < popupArray.length; i++) {
                activePopups.push(normalizePopupItem(popupArray[i], i));
            }


            activePopups = activePopups.filter(function (item) {
                return getComputedStatus(item) === "active";
            }).sort(sortByOrder);


            console.log("activePopups", activePopups);


            if (!activePopups.length) {
                popup.style.display = "none";
                var bgMask = document.querySelector("#bg_mask");
                if (bgMask) bgMask.style.display = "none";
                document.body.classList.remove("no_scroll");
                return;
            }


            renderPopups(activePopups);
        })
        .catch(function (error) {
            console.error("popup load error", error);
            popup.style.display = "none";
            var bgMask = document.querySelector("#bg_mask");
            if (bgMask) bgMask.style.display = "none";
            document.body.classList.remove("no_scroll");
        });
    }


    bindCloseEvents();
    loadHomepagePopups();
});