/* Add custom JS code below */
document.addEventListener("DOMContentLoaded", () => {
    const stores = [
        { id: "sa", name: "السعودية", nameEn: "Saudi Arabia", url: "https://banafaforoud.com", flagUrl: "https://flagcdn.com/w40/sa.png" },
        { id: "ae", name: "الإمارات (قريباً)", nameEn: "UAE (Coming Soon)", url: "https://ae.banafaforoud.com", flagUrl: "https://flagcdn.com/w40/ae.png" },
        { id: "bh", name: "البحرين (قريباً)", nameEn: "Bahrain (Coming Soon)", url: "https://bh.banafaforoud.com", flagUrl: "https://flagcdn.com/w40/bh.png" }
    ];

    const host = window.location.href;
    const activeStore = (host.includes("ae.banafaforoud.com") || host.includes("banafaforoud-ae")) ? stores[1] :
                        (host.includes("bh.banafaforoud.com") || host.includes("banafaforoud-bhr")) ? stores[2] : stores[0];

    const isRtl = document.documentElement.dir === 'rtl' || document.documentElement.lang === 'ar';

    const closeLangModal = () => {
        const modal = document.querySelector('salla-localization-modal');
        if (modal && typeof modal.close === 'function') modal.close();
    };

    const closeStoreModal = () => {
        const modal = document.querySelector('#store-switcher-modal');
        if (modal && typeof modal.close === 'function') modal.close();
    };

    const closeMobileMenu = () => {
        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', keyCode: 27, bubbles: true }));
        
        document.querySelectorAll('.s-offcanvas-backdrop, .s-dialog-backdrop, salla-offcanvas-overlay, [class*="overlay"], [class*="backdrop"]').forEach(el => {
            el.click();
            el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
            if (typeof TouchEvent !== 'undefined') el.dispatchEvent(new TouchEvent('touchstart', { bubbles: true }));
        });
        
        document.querySelectorAll('salla-offcanvas').forEach(el => {
            if (typeof el.close === 'function') el.close();
            if (el.shadowRoot) {
                const closeBtn = el.shadowRoot.querySelector('button, .close');
                if (closeBtn) closeBtn.click();
            }
        });
        
        if (window.salla && window.salla.event) {
            window.salla.event.emit('salla-offcanvas::close', 'mobile-menu');
            window.salla.event.emit('offcanvas::close', 'mobile-menu');
        }
    };

    if (!document.getElementById('store-switcher-modal')) {
        const modalWrapper = document.createElement('div');
        modalWrapper.innerHTML = `
            <salla-modal id="store-switcher-modal" modal-title="${isRtl ? "اختر متجر" : "Select Your Store"}">
                <div class="flex flex-col gap-3 py-2">
                    ${stores.map(s => {
                        const active = activeStore.id === s.id;
                        const cls = active ? 'border-primary bg-primary/5 dark:bg-primary/10 cursor-default opacity-90' : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-transparent hover:border-primary hover:bg-gray-50 dark:hover:bg-gray-800';
                        return `
                            <a href="${active ? 'javascript:void(0)' : s.url}" ${active ? 'style="pointer-events: none;"' : ''} class="flex items-center justify-between p-4 border rounded-xl transition-all duration-300 ${cls}">
                                <div class="flex items-center gap-4">
                                    <img src="${s.flagUrl}" alt="${s.nameEn} flag" class="w-8 h-6 object-cover rounded-sm shadow-sm" />
                                    <span class="font-bold text-gray-800 dark:text-gray-200 text-sm md:text-base">${isRtl ? s.name : s.nameEn}</span>
                                </div>
                                ${active ? '<i class="sicon-check text-primary text-xl"></i>' : ''}
                            </a>`;
                    }).join('')}
                </div>
            </salla-modal>
        `;
        document.body.appendChild(modalWrapper);
    }

    const btn = document.createElement('button');
    btn.className = 'store-modal-trigger hidden lg:flex items-center justify-center mr-4 ml-4 gap-2';
    btn.innerHTML = `<img src="${activeStore.flagUrl}" alt="Current Store" class="w-6 h-4.5 object-cover rounded-sm" /> <span>${isRtl ? activeStore.name : activeStore.nameEn}</span> <i class="sicon-keyboard_arrow_down text-gray-500 text-sm"></i>`;
    
    btn.onclick = (e) => {
        e.preventDefault();
        closeLangModal();
        setTimeout(() => {
            const modal = document.querySelector('#store-switcher-modal');
            if (modal && typeof modal.open === 'function') modal.open();
        }, 10);
    };

    const locWidget = document.querySelector('salla-localization-modal');
    if (locWidget && locWidget.parentNode) {
        locWidget.parentNode.insertBefore(btn, locWidget);
    } else {
        const headerActions = document.querySelector('.header-buttons, .site-header__actions, .top-navbar .flex');
        if (headerActions) headerActions.prepend(btn);
    }

    if (locWidget) {
        locWidget.addEventListener('click', closeStoreModal);
    }

    const injectMobileSwitchers = () => {
        document.querySelectorAll('salla-offcanvas#mobile-menu, #mobile-menu').forEach(drawer => {
            if (drawer.querySelector('.mobile-switchers-container')) return;

            const innerMenu = drawer.querySelector('salla-menu, .s-offcanvas-body, ul');
            if (innerMenu) innerMenu.style.paddingBottom = '80px';

            const cont = document.createElement('div');
            cont.className = 'mobile-switchers-container absolute bottom-0 left-0 w-full z-[9999] lg:hidden grid grid-cols-2 gap-3 p-4 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-[0_-10px_20px_-5px_rgba(0,0,0,0.08)]';
            
            cont.innerHTML = `
                <button id="mob-store-btn" class="flex items-center justify-center border rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 transition-colors text-sm w-full p-2">
                    <img src="${activeStore.flagUrl}" class="w-5 h-3.5 object-cover rounded-sm shadow-sm" /> 
                    <span class="font-bold truncate text-gray-700 dark:text-gray-200" style="padding:10px !important;">${isRtl ? activeStore.name : activeStore.nameEn}</span>
                </button>
                <button id="mob-lang-btn" class="flex items-center justify-center border rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 transition-colors text-sm w-full p-2">
                    <i class="sicon-earth rtl:ml-1 ltr:mr-1"></i>
                    <span class="font-bold text-gray-700 dark:text-gray-200" style="padding:10px !important;">${isRtl ? "اللغة" : "Language"}</span>
                </button>
            `;
            
            drawer.appendChild(cont);

            const storeBtn = cont.querySelector('#mob-store-btn');
            if (storeBtn) {
                storeBtn.onclick = (e) => {
                    e.preventDefault(); e.stopPropagation();
                    closeMobileMenu(); closeLangModal();
                    setTimeout(() => {
                        const modal = document.querySelector('#store-switcher-modal');
                        if (modal && typeof modal.open === 'function') modal.open();
                    }, 10);
                };
            }

            const langBtn = cont.querySelector('#mob-lang-btn');
            if (langBtn) {
                langBtn.onclick = (e) => {
                    e.preventDefault(); e.stopPropagation();
                    closeMobileMenu(); closeStoreModal();
                    setTimeout(() => {
                        const langModal = document.querySelector('salla-localization-modal');
                        if (langModal && typeof langModal.open === 'function') langModal.open();
                    }, 10);
                };
            }
        });
    };

    injectMobileSwitchers();
    
    let debounceTimer;
    const observer = new MutationObserver((mutations) => {
        let hasNewNodes = false;
        for (let i = 0; i < mutations.length; i++) {
            if (mutations[i].addedNodes.length > 0) {
                hasNewNodes = true;
                break;
            }
        }
        
        if (hasNewNodes) {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(injectMobileSwitchers, 20);
        }
    });
    
    observer.observe(document.body, { childList: true, subtree: true });
});