(() => {
  const { EventManager } = ShopbySkin;

  const designPopup = document.querySelector('design-popup');

  const popupActionMap = {
    CLOSE_DESIGN_POPUP: ({ popupNo }) => {
      EventManager.fire('CLOSE_DESIGN_POPUP', { popupNo });
    },
    NO_VISIBLE_TODAY: ({ popupNo }) => {
      EventManager.fire('NO_VISIBLE_TODAY', { popupNo, shouldHide: true });
    },
  };

  EventManager.on('PAGE_LOAD_COMPLETED', () => {
    const normalPopupWrap = document.querySelector('.custom_normal_popup');

    if (normalPopupWrap) {
        const popup = normalPopupWrap.querySelector('.design-popup');

        if (popup && popup.classList.contains('design-popup--fixed')) {
            normalPopupWrap.classList.add('is-opened');
        }

        normalPopupWrap.addEventListener('click', (e) => {
            const popup = normalPopupWrap.querySelector('.design-popup');
            if (!popup) return;

            if (!popup.classList.contains('design-popup--fixed')) return;

            const closeBtn = e.target.closest('[shopby-action="CLOSE_DESIGN_POPUP"]');
            const noToday = e.target.closest('[shopby-action="NO_VISIBLE_TODAY"]');

            if (closeBtn || noToday) {
                closeNormalPopup();
                return;
            }

            if (!popup.contains(e.target)) {
                closeNormalPopup();
            }
        });

        function closeNormalPopup() {
            normalPopupWrap.classList.remove('is-opened');
            normalPopupWrap.style.display = 'none';
        }
    }
      
     setTimeout(() => {

        //팝업슬라이드
        const slidePopupEl = document.querySelector('#slidePopup');
        const popupWrap = document.querySelector('.custompopup');

        if (slidePopupEl && popupWrap) {
            document.body.classList.add('is-popup-open');
            popupWrap.classList.remove('dn');
            popupWrap.classList.add('is-opened');

            // 닫기 / 오늘 하루 보지 않기
            popupWrap.addEventListener('click', (e) => {
              const closeBtn = e.target.closest('[shopby-action="CLOSE_DESIGN_POPUP"]');
              const noToday = e.target.closest('[shopby-action="NO_VISIBLE_TODAY"]');

              if (!closeBtn && !noToday) return;

              document.body.classList.remove('is-popup-open');
              popupWrap.classList.add('dn');
              popupWrap.classList.remove('is-opened');
            });
            
            const slidePopup = new Swiper(slidePopupEl, {
                loop: true,
                spaceBetween: 0,
                slidesPerView: 1,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false, 
                    pauseOnMouseEnter: false, 
                },
                pagination: {
                    el: '#slidePopup .popup.swiper-pagination',
                    type: 'custom',
                    renderCustom: (swiper) => {
                    const popSlides = swiper.el.querySelectorAll(
                      '.swiper-slide:not(.swiper-slide-duplicate)'
                    );

                    const poptotal = popSlides.length;
                    const popcurrent = swiper.realIndex + 1;


                    return `<span class="current">${popcurrent}</span> / <span class="total">${poptotal}</span>`;
                  },
                },
            });
          }
     },500);

     document.querySelectorAll('.custompopup').forEach((popupWrap) => {
      popupWrap.addEventListener('click', (e) => {
        const popup = popupWrap.querySelector('.design-popup');

        // design-popup 내부 클릭이면 무시
        if (popup.contains(e.target)) return;
        popupWrap
          .querySelector('[shopby-action="CLOSE_DESIGN_POPUP"]')
          ?.click();
      });
    });
    
  });

  designPopup?.addEventListener('click', ({ target }) => {
    const action = target.closest('[shopby-action]')?.getAttribute('shopby-action');
    const popupNo = target.closest('[shopby-popup-no]')?.getAttribute('shopby-popup-no');

    popupActionMap[action]?.({
      popupNo,
    });
  });
})();