"use strict";

window.EComPopup = (function () {
    // Định nghĩa cachedFetch ngay từ đầu để tránh lỗi hoisting
    const cachedFetch = async (...params) => {
        if (window.location.host === 'admin.shopify.com') return;

        const [url, options, CACHE_SPACE, popupVersion] = params;

        if (
            !("caches" in window) ||
            (window.Shopify && window.Shopify.designMode) ||
            document.querySelector("#admin-bar-iframe")
        ) {
            return fetch(url, options).then((response) => {
                return response;
            });
        }

        // Tạo cache key với version để đảm bảo cache mới khi version thay đổi
        const cacheKey = popupVersion ? `${url}?v=${popupVersion}` : url;

        return caches.open(CACHE_SPACE).then((cache) => {
            return cache
                .match(cacheKey)
                .then((response) => {
                    if (response) {
                        const date = new Date(response.headers.get("date"));
                        // Cache in 1 day
                        if (Date.now() < date.getTime() + 1000 * 60 * 60 * 24) {
                            return response;
                        }
                    }
                    return fetch(url, options).then((response) => {
                        if (response.status < 400) {
                            cache.put(cacheKey, response.clone());
                        }

                        return response;
                    });
                })
                .catch((error) => {
                    console.error("  Error in fetch handler:", error.message);
                    throw error;
                });
        });
    };

    // Queue để quản lý popup hiển thị từng cái một
    let popupQueue = [];
    let isShowingPopup = false;
    let currentPopup = null;

    const popupDataElement = document.querySelector('#ecom-popup-data');
    const variablesEl = document.querySelector('#ecom-popup-variables');

    if (!popupDataElement || !variablesEl) {
        console.warn('Ecom popup data element not found');
        return;
    }

    const dataPopupContainer = JSON.parse(popupDataElement.innerHTML);
    const variables = JSON.parse(variablesEl.innerHTML);
    if (dataPopupContainer && variables) {
        const { page_type, page_title, country, language } = variables;
        const sortedPopups = sortPopupsByPriority([...dataPopupContainer]);

        // Thêm tất cả popup hợp lệ vào queue
        sortedPopups.forEach((popupItem) => {
            //Nếu status không phải là public thì không hiển thị
            if (popupItem.settings?.status !== 'public') return;
            const showOn = popupItem.settings?.show_on;
            const pageType = popupItem.settings?.custom_show_on ?? [];

            let checkConSpecPageType = true,
                checkConSpecUser = true,
                checkConSpecLang = true,
                checkConSpecCountry = true;
            //Kiểm tra nếu showon là custom thì kiểm tra sâu hơn
            if (showOn === 'custom') {
                //Kiểm tra xem page type đã có trong pageType chưa?
                if (pageType && pageType.includes(page_type)) {

                    let dataVariableSpec = 'specific_' + page_type + 's';
                    let arraySpec = [];
                    //Nếu đã có thì kiểm tra xem page speci đã được chọn có nằm trong arraySpec không?
                    //Thêm các page speci vào arraySpec
                    if (popupItem.settings[dataVariableSpec]) {
                        popupItem.settings[dataVariableSpec].forEach((item) => {
                            arraySpec.push(item.name);
                        });
                    }

                    //Kiểm tra speci data.
                    let dataVariableValue = arraySpec.length > 0 ? arraySpec : ['all'];

                    if (!dataVariableValue.includes(page_title) && !dataVariableValue.includes('all')) checkConSpecPageType = false;
                } else {
                    // Nếu page type không match, ẩn popup
                    checkConSpecPageType = false;
                }
            }

            //Kiểm tra field all_user là false hiện specUser mới kiểm tra
            //Kiểm tra thêm condition user đã đăng nhập hay guest
            if (!popupItem.settings?.all_user) {
                let arraySpecUser = popupItem.settings?.specific_user;

                //Kiểm tra arraySpecUser có dữ liệu không? Nếu có kiểm tra sâu hơn còn không thì checkPopupShow = false để ẩn popup
                if (arraySpecUser) {

                    //Nếu có thì check user guest hay customer
                    let userID = null;
                    if (typeof ShopifyAnalytics !== 'undefined' && ShopifyAnalytics.meta?.page?.customerId) {
                        userID = ShopifyAnalytics.meta.page.customerId;
                    }
                    //Kiểm tra là customer
                    if (arraySpecUser.includes('customer')) {
                        if (!userID) checkConSpecUser = false;
                    } else {
                        //Kiểm tra là guest
                        if (userID) checkConSpecUser = false;
                    }
                }
            }

            //Kiểm tra thêm condition language
            if (!popupItem.settings?.all_lang) {
                let arrayLang = popupItem.settings?.specific_lang ?? ['all'];
                if (!arrayLang.includes('all') && !arrayLang.includes(language)) checkConSpecLang = false;
            }

            //Kiểm tra thêm condition
            if (!popupItem.settings?.all_country) {
                let arrayCountrys = popupItem.settings?.specific_country ?? ['all'];
                if (!arrayCountrys.includes('all') && !arrayCountrys.includes(country)) checkConSpecCountry = false;
            }

            let composerPreview = '';
            if (typeof EComposer !== 'undefined' && EComposer.proxy_path) {
                composerPreview = `${EComposer.proxy_path}/preview/`;
            }
            let pathName = window.location.pathname;
            if (composerPreview === pathName) {
                // Kiểm tra nếu window.location.search có chứa popupItem.handle
                let searchParams = window.location.search;
                let handle = popupItem.settings?.handle ?? popupItem.settings?.slug ?? popupItem.id;
                let hasPopupIdInSearch = searchParams.includes(handle);
                if (hasPopupIdInSearch) {
                    const popup = document.querySelector('.ecom-popups-container');
                    if (popup) {
                        popup.showModal();
                        return;
                    }
                    addToPopupQueue(popupItem, 'preview');
                }
            } else if (
                checkConSpecPageType === true &&
                checkConSpecUser === true &&
                checkConSpecLang === true &&
                checkConSpecCountry === true
            ) {
                //Trước khi show kiểm tra cookie
                let COOKIE_NAME = popupItem.id + '+' + popupItem.settings?.popup_version;

                //Mở popup lên
                // Kiểm tra xem có chọn time delay hay không? Nếu có thì add setTimeout để show chậm trong khoản thời gian đã set còn không thì show luôn.
                if (popupItem.settings?.popup_event_show === 'time_delay') {
                    if (!getCookie(COOKIE_NAME)) {
                        const timetoShow = popupItem.settings?.time_delay ?? 350;
                        setTimeout(() => addToPopupQueue(popupItem), timetoShow);
                    }
                } else if (popupItem.settings?.popup_event_show === 'scroll') {
                    if (!getCookie(COOKIE_NAME)) {
                        let scrollDistance = parseFloat(popupItem.settings?.scroll_distance ?? 10); // percent
                        let popupShow = false;
                        const onScroll = () => {
                            const doc = document.documentElement;
                            const maxScrollable = doc.scrollHeight - window.innerHeight;
                            const thresholdPx = Math.max(0, (scrollDistance / 100) * maxScrollable);
                            const scrolledPx = window.scrollY || doc.scrollTop || 0;
                            if (!popupShow && scrolledPx >= thresholdPx) {
                                addToPopupQueue(popupItem);
                                popupShow = true;
                                window.removeEventListener('scroll', onScroll);
                            }
                        };
                        window.addEventListener('scroll', onScroll, { passive: true });
                        // Trigger once in case user has already scrolled past threshold
                        onScroll();
                    }
                }
                // else if (popupItem.settings?.popup_event_show === 'click') {
                //     let popups = document.querySelectorAll('[data-ecom-popup]');
                //     popups.forEach((popupI) => {
                //         let hasEcomElementButtonChild = popupI.closest('.ecom-element-button');
                //         let hasEcomElementFormChild = popupI.closest('.ecom__form');
                //         if (hasEcomElementButtonChild) {
                //             popupI.addEventListener('click', (event) => {
                //                 // Kiểm tra event object
                //                 if (event && typeof event.preventDefault === 'function') {
                //                     event.preventDefault();
                //                 }

                //                 // Lấy popup ID từ attribute data-ecom-popup
                //                 let popupId = popupI.getAttribute('data-ecom-popup');

                //                 // Tìm và hiển thị popup tương ứng
                //                 if (popupId === popupItem.id) {
                //                     addToPopupQueue(popupItem);
                //                 }
                //             });
                //         } else if (hasEcomElementFormChild) {
                //             let url = window.location.href;
                //             // Lấy giá trị của contact_posted từ URL
                //             let urlParams = new URLSearchParams(window.location.search);
                //             let contactPosted = urlParams.get('contact_posted');
                //             let urlHash = window.location.hash;
                //             // Kiểm tra nếu contact_posted có giá trị và bằng 'true'
                //             if (contactPosted === 'true' && urlHash !== '') {
                //                 // Form đã submit thành công
                //                 //lấy data attribute id của getForm
                //                 let formId = popupI.getAttribute('id');
                //                 formId = '#' + formId;
                //                 if (formId === urlHash) {
                //                     addToPopupQueue(popupItem);
                //                 }
                //             }
                //         }
                //     });
                // } 
                else {
                    if (!getCookie(COOKIE_NAME)) {
                        addToPopupQueue(popupItem);
                    }
                }
            }
        });
    }

    // Hàm thêm popup vào queue
    function addToPopupQueue(popupItem, preview = '') {
        popupQueue.push({ popupItem, preview });
        processNextPopup();
    }

    // Hàm xử lý popup tiếp theo trong queue
    function processNextPopup() {
        if (isShowingPopup || popupQueue.length === 0) {
            return;
        }

        const { popupItem, preview } = popupQueue.shift();
        isShowingPopup = true;
        currentPopup = popupItem;

        popupContainerHandler(popupItem, preview);
    }

    // Hàm được gọi khi popup được đóng
    function onPopupClosed() {
        isShowingPopup = false;
        currentPopup = null;

        // Xử lý popup tiếp theo trong queue
        setTimeout(() => {
            processNextPopup();
        }, 100); // Delay nhỏ để tránh conflict
    }

    // Sắp xếp popup theo priority
    function sortPopupsByPriority(popups) {
        return popups.sort((a, b) => {
            // Lấy priority từ settings, nếu không có thì mặc định là 0
            const priorityA = a.settings?.popup_priority || 0;
            const priorityB = b.settings?.popup_priority || 0;

            // Sắp xếp theo thứ tự: priority cao nhất (số nhỏ nhất) sẽ hiển thị trước
            // Nếu priority bằng nhau, giữ nguyên thứ tự ban đầu
            if (priorityA !== priorityB) {
                return priorityA - priorityB;
            }

            // Nếu không có priority hoặc priority bằng nhau, giữ thứ tự ban đầu
            return 0;
        });
    }

    async function popupContainerHandler(popupItem, preview = '') {
        try {
            if (window.location.host === 'admin.shopify.com') return;

            let handerSlug = popupItem.settings.handle ?? popupItem.settings.slug;
            let popupVersion = popupItem.settings?.popup_version;

            const sectionID = '?section_id=ecom-' + handerSlug + '-popup';

            let url = window.location.origin + sectionID;

            if (window.location.href.includes('customer_posted=true')) {
                url = url + "&customer_posted=true'";
            }

            const requestOptions = {
                method: 'GET',
                headers: {
                    'Content-Type': 'text/html',
                }
            };

            const response = await cachedFetch(url, requestOptions, 'ecom-popup-cache-' + popupItem.id, popupVersion);
            if (response.status === 200) {
                const content = await response.text();
                if (content) {
                    ecomPopup(content, popupItem, preview);
                }
            } else {
                onPopupClosed(); // Gọi hàm này nếu có lỗi
            }
        } catch (error) {
            console.error('Error fetching popup content:', error);
            onPopupClosed(); // Gọi hàm này nếu có lỗi
        }
    }

    function checkResponsive(popupTemplate, currentPopupElement) {
        let width = window.innerWidth;
        if (width < 768) {
            if (popupTemplate.classList.contains('ecom-popup-hide-mobile')) {
                currentPopupElement.close();
                document.body.classList.remove("ecom-lock-scroll");
            }
        } else if (width < 1025) {
            if (popupTemplate.classList.contains('ecom-popup-hide-tablet')) {
                currentPopupElement.close();
                document.body.classList.remove("ecom-lock-scroll");
            }
        } else {
            if (popupTemplate.classList.contains('ecom-popup-hide-desktop')) {
                currentPopupElement.close();
                document.body.classList.remove("ecom-lock-scroll");
            }
        }
    }

    function ecomPopup(contentPopup, popupItem, preview) {
        const ecom_popupContainer = document.createElement('div');
        let classPopupTemplate = 'ecom-popup-container-template-html-' + popupItem.id;
        ecom_popupContainer.classList.add(classPopupTemplate);
        document.body.appendChild(ecom_popupContainer);
        const popupTemplate = document.querySelector('.' + classPopupTemplate);

        // Thêm class theo devices
        if (popupItem.settings?.devices && Array.isArray(popupItem.settings?.devices)) {
            // Thêm class responsive cho mobile và tablet
            if (popupItem.settings?.devices.includes('mobile')) {
                popupTemplate.classList.add('ecom-popup-mobile-only');
            }
            if (popupItem.settings?.devices.includes('tablet')) {
                popupTemplate.classList.add('ecom-popup-tablet-only');
            }
            if (popupItem.settings?.devices.includes('desktop')) {
                popupTemplate.classList.add('ecom-popup-desktop-only');
            }

            // Thêm class ẩn cho devices không được chọn
            const allDevices = ['desktop', 'tablet', 'mobile'];
            allDevices.forEach((device) => {
                if (!popupItem.settings?.devices.includes(device)) {
                    popupTemplate.classList.add(`ecom-popup-hide-${device}`);
                }
            });
        }

        popupTemplate.innerHTML = contentPopup;

        requestAnimationFrame(() => {
            popupTemplate.classList.add('loaded');
        });

        let popupContainerInit = new CustomEvent('ecom:popupContainer:init', { detail: { wrapper: popupTemplate } });
        document.dispatchEvent(popupContainerInit);

        let currentPopupElement = document.querySelector('.' + classPopupTemplate + ' .ecom-popups-container');
        if (currentPopupElement) {
            currentPopupElement.showModal();
            document.body.classList.add("ecom-lock-scroll");

            checkResponsive(popupTemplate, currentPopupElement);

            window.addEventListener("resize", () => {
                checkResponsive(popupTemplate, currentPopupElement);
            });

            if (preview !== 'preview') {
                let COOKIE_NAME = popupItem.id + '+' + popupItem.settings?.popup_version;
                let time_cookie_expires = popupItem.settings?.time_cookie_expires ?? 0;
                let COOKIE_MAX_AGE_SECONDS = parseInt(time_cookie_expires) * 60 * 60; // 1 ngày = 86400 giây

                currentPopupElement.addEventListener("click", function (e) {
                    if (e.target === currentPopupElement) {
                        currentPopupElement.close();
                        popupTemplate.remove();
                        document.body.classList.remove("ecom-lock-scroll");
                        //Khi tắt popup thì set cookie
                        //Lưu cookie trong kể từ thời điểm đóng
                        if (['time_delay', 'scroll'].includes(popupItem.settings?.popup_event_show)) {
                            setCookie(COOKIE_NAME, classPopupTemplate, {
                                maxAgeSeconds: COOKIE_MAX_AGE_SECONDS,
                                path: "/",
                                sameSite: "Lax",
                                // secure: true,    
                            });
                        }
                        onPopupClosed(); // Gọi hàm này khi popup được đóng
                    }
                });

                currentPopupElement.addEventListener("keydown", function (e) {
                    if (e.key === "Escape") {
                        currentPopupElement.close();
                        popupTemplate.remove();
                        document.body.classList.remove("ecom-lock-scroll");
                        //Khi tắt popup thì set cookie
                        //Lưu cookie trong kể từ thời điểm đóng
                        if (['time_delay', 'scroll'].includes(popupItem.settings?.popup_event_show)) {
                            setCookie(COOKIE_NAME, classPopupTemplate, {
                                maxAgeSeconds: COOKIE_MAX_AGE_SECONDS,
                                path: "/",
                                sameSite: "Lax",
                                // secure: true,    
                            });
                        }
                        onPopupClosed(); // Gọi hàm này khi popup được đóng
                    }
                });

                const currentCloseButton = currentPopupElement.querySelector(".ecom-popup-close-button");
                if (currentCloseButton) {
                    currentCloseButton.addEventListener("click", () => {
                        currentPopupElement.close();
                        popupTemplate.remove();
                        document.body.classList.remove("ecom-lock-scroll");
                        //Khi tắt popup thì set cookie
                        //Lưu cookie trong kể từ thời điểm đóng
                        if (['time_delay', 'scroll'].includes(popupItem.settings?.popup_event_show)) {
                            setCookie(COOKIE_NAME, classPopupTemplate, {
                                maxAgeSeconds: COOKIE_MAX_AGE_SECONDS,
                                path: "/",
                                sameSite: "Lax",
                                // secure: true,    
                            });
                        }
                        onPopupClosed(); // Gọi hàm này khi popup được đóng
                    });
                }

                const currentDontShowAgainBtn = currentPopupElement.querySelector(".ecom-close-not-show");
                if (currentDontShowAgainBtn) {
                    currentDontShowAgainBtn.addEventListener("click", () => {
                        currentPopupElement.close();
                        popupTemplate.remove();
                        document.body.classList.remove("ecom-lock-scroll");
                        //Khi tắt popup thì set cookie
                        //Lưu cookie trong kể từ thời điểm đóng
                        COOKIE_MAX_AGE_SECONDS = 9999999999;
                        setCookie(COOKIE_NAME, classPopupTemplate, {
                            maxAgeSeconds: COOKIE_MAX_AGE_SECONDS,
                            path: "/",
                            sameSite: "Lax",
                            // secure: true,    
                        });
                        onPopupClosed(); // Gọi hàm này khi popup được đóng
                    });
                }
            }
        }
    }

    function getCookie(name) {
        const match = document.cookie.split('; ').find((row) => row.startsWith(name + '='));
        return match ? decodeURIComponent(match.split('=')[1]) : null;
    }

    function setCookie(name, value, { maxAgeSeconds, path = "/", sameSite = "Lax", secure = false, domain } = {}) {
        let cookie = `${name}=${encodeURIComponent(value)}`;
        if (typeof maxAgeSeconds === "number") cookie += `; max-age=${maxAgeSeconds}`;
        if (path) cookie += `; path=${path}`;
        if (sameSite) cookie += `; samesite=${sameSite}`;
        if (secure) cookie += `; secure`;
        if (domain) cookie += `; domain=${domain}`;
        document.cookie = cookie;
    }

    // Public API
    return {
        addToQueue: addToPopupQueue,
        getCurrentPopup: () => currentPopup,
        getQueue: () => popupQueue,
        closeCurrentPopup: onPopupClosed,
        popupContainerHandler: popupContainerHandler
    };
})();