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

  // 커스텀 팝업으로 이관할 popupId 목록 (design-popup에서 제외)
  // mobile/partials/custom-popup.js의 CUSTOM_POPUP_IDS와 동일하게 유지해야 함
  const CUSTOM_POPUP_IDS = ['BIG-POP-MOB'];

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

  // 로컬스토리지 유틸리티 (만료일 지원)
  const storageUtils = {
    // 데이터 저장 (만료일 포함)
    set: (key, value, expiryDays = 1) => {
      const now = new Date();
      const item = {
        value: value,
        expiry: now.getTime() + expiryDays * 24 * 60 * 60 * 1000,
      };
      localStorage.setItem(key, JSON.stringify(item));
    },

    // 데이터 가져오기 (만료 확인)
    get: (key) => {
      const itemStr = localStorage.getItem(key);
      if (!itemStr) return null;

      try {
        const item = JSON.parse(itemStr);
        const now = new Date();

        // 만료 확인
        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key);
          return null;
        }

        return item.value;
      } catch (e) {
        return null;
      }
    },

    // 데이터 존재 확인
    has: (key) => {
      return storageUtils.get(key) !== null;
    },

    // 데이터 삭제
    remove: (key) => {
      localStorage.removeItem(key);
    },
  };

  // 팝업 닫기 함수 (일반 + 멀티 팝업 모두 지원)
  const closePopup = (popupNo) => {
    const popupItem =
      document.querySelector(`.popup-item[data-popup-no="${popupNo}"]`) ||
      document.querySelector(`.popup-item-multi[data-popup-no="${popupNo}"]`);

    if (popupItem) {
      popupItem.style.display = 'none';
      checkAllPopupsClosed();
    }
  };

  // 오늘 하루 안보기 함수 (일반 + 멀티 팝업 모두 지원)
  const hidePopupToday = (popupNo) => {
    storageUtils.set(`popup_hidden_${popupNo}`, 'true', 1);
    closePopup(popupNo);
  };

  // 모든 팝업이 닫혔는지 확인 (일반 + 멀티 팝업 모두 체크)
  const checkAllPopupsClosed = () => {
    const allPopups = document.querySelectorAll('.popup-item, .popup-item-multi');
    const visiblePopups = Array.from(allPopups).filter((popup) => popup.style.display !== 'none');

    // 모든 팝업이 닫혔으면 오버레이도 숨기기
    if (visiblePopups.length === 0) {
      const overlay = document.querySelector('.popup-modal-overlay-mobile');
      if (overlay) {
        // 전부닫힘 오버레이 숨김
        overlay.style.display = 'none';
      }
    }
  };

  // 모든 팝업 닫기 함수 (일반 + 멀티 팝업 모두)
  const closeAllPopups = () => {
    const allPopups = document.querySelectorAll('.popup-item, .popup-item-multi');
    allPopups.forEach((popup) => {
      popup.style.display = 'none';
    });

    // 오버레이도 숨기기
    const overlay = document.querySelector('.popup-modal-overlay-mobile');
    if (overlay) {
      // 모든팝업닫기 오버레이 숨김
      overlay.style.display = 'none';
    }
  };

  // 멀티팝업 Swiper 인스턴스 저장
  const multiPopupSwipers = new Map();

  // 멀티팝업 Swiper 초기화
  const initMultiPopupSwipers = () => {
    const swiperContainers = document.querySelectorAll('.popup-main-swiper');

    swiperContainers.forEach((container) => {
      const popupItem = container.closest('.popup-item-multi');
      if (!popupItem) return;

      const popupNo = popupItem.getAttribute('data-popup-no');

      // Swiper 초기화
      const swiper = new Swiper(container, {
        loop: false,
        rewind: true,
        slidesPerView: 1,
        spaceBetween: 0,
        observer: true,
        observeParents: true,
        allowTouchMove: true,
        simulateTouch: true,
        touchRatio: 1,
        autoplay: {
          delay: 2500,
          disableOnInteraction: true,
        },
        on: {
          slideChange: function () {
            updateThumbActive(popupItem, this.activeIndex);
          },
        },
      });

      // 강제로 Swiper 업데이트
      setTimeout(() => {
        swiper.update();
      }, 100);

      // 인스턴스 저장
      multiPopupSwipers.set(popupNo, swiper);

      // 첫 번째 썸네일 활성화
      updateThumbActive(popupItem, 0);
    });
  };

  // 썸네일 활성화 상태 업데이트
  const updateThumbActive = (popupItem, activeIndex) => {
    const thumbs = popupItem.querySelectorAll('.popup-thumb-item');
    thumbs.forEach((thumb, index) => {
      if (index === activeIndex) {
        thumb.style.outline = '2px solid #000';
        thumb.style.outlineOffset = '-1px';
      } else {
        thumb.style.outline = 'none';
      }
    });
  };

  // 썸네일 클릭 이벤트
  const initThumbClickEvents = () => {
    document.addEventListener('click', (e) => {
      const thumbItem = e.target.closest('.popup-thumb-item');
      if (!thumbItem) return;

      const slideIndex = parseInt(thumbItem.getAttribute('data-slide-index'), 10);
      const popupItem = thumbItem.closest('.popup-item-multi');
      if (!popupItem) return;

      const popupNo = popupItem.getAttribute('data-popup-no');
      const swiper = multiPopupSwipers.get(popupNo);

      if (swiper) {
        swiper.slideTo(slideIndex);
      }
    });
  };

  // 이벤트 리스너 등록
  const initPopupEvents = () => {
    // 이벤트 위임 방식으로 클릭 이벤트 처리
    document.addEventListener('click', (e) => {
      // 닫기 버튼
      if (e.target.classList.contains('close-popup-btn')) {
        const popupNo = e.target.getAttribute('data-popup-no');
        closePopup(popupNo);
      }

      // 오늘 하루 안보기 버튼
      if (e.target.classList.contains('no-show-today-btn')) {
        const popupNo = e.target.getAttribute('data-popup-no');
        hidePopupToday(popupNo);
      }

      // 오버레이 클릭 시 모든 팝업 닫기
      if (e.target.classList.contains('popup-modal-overlay-mobile')) {
        closeAllPopups();
      }
    });
  };

  EventManager.on('PAGE_LOAD_COMPLETED', () => {
    const popupData = designPopup.store.state;

    // 이벤트 리스너 등록
    initPopupEvents();

    // 멀티팝업 Swiper 초기화
    initMultiPopupSwipers();

    // 썸네일 클릭 이벤트 등록
    initThumbClickEvents();

    // 로컬스토리지에 저장된 팝업 숨기기 (일반 + 멀티 팝업 모두, 만료 자동 확인)
    setTimeout(() => {
      const allPopups = document.querySelectorAll('.popup-item, .popup-item-multi');

      // 커스텀 팝업으로 이관된 popupId 목록에서 popupNo 해석
      // designPopup.store.state.popups 에서 팝업 데이터 활용
      const popupSource = popupData?.popups || [];
      const customPopupNos = popupSource
        .filter((popup) => popup.popupId && CUSTOM_POPUP_IDS.includes(popup.popupId))
        .map((popup) => String(popup.popupNo));

      // 커스텀 팝업으로 이관된 팝업 숨기기
      allPopups.forEach((popup) => {
        const popupNo = popup.getAttribute('data-popup-no');
        if (customPopupNos.includes(popupNo)) {
          popup.style.display = 'none';
        }
      });

      // 로컬스토리지에 저장된 팝업 숨기기
      allPopups.forEach((popup) => {
        const popupNo = popup.getAttribute('data-popup-no');
        if (storageUtils.has(`popup_hidden_${popupNo}`)) {
          popup.style.display = 'none';
        }
      });

      // 보여줄 팝업이 있으면 오버레이 표시
      const visiblePopups = document.querySelectorAll('.popup-item, .popup-item-multi');
      const hasVisiblePopup = Array.from(visiblePopups).some(
        (popup) => popup.style.display !== 'none'
      );

      if (hasVisiblePopup) {
        const overlay = document.querySelector('.popup-modal-overlay-mobile');
        if (overlay) {
          overlay.style.display = 'block';
        }
      }
    }, 0);
  });

  // let currentSlideIndex = 0;
  // let slides = [];
  // let popupData = [];

  // 스와이퍼 팝업 슬라이더 시스템 (모바일) - 주석처리
  // let popupSwiper = null;

  // const initPopupSlider = () => {
  //   const swiperContainer = document.querySelector('.popup-slider-swiper-mobile');
  //   const container = document.querySelector('.popup-slider-container-mobile');

  //   if (!swiperContainer || !container) return;

  //   slides = Array.from(swiperContainer.querySelectorAll('.popup-slide-item'));

  //   // 팝업이 하나일 때 최상위 자식 요소들을 체크
  //   if (slides.length === 1) {
  //     const singlePopupContent = slides[0].querySelector('.design-popup__content');

  //     // HTML 엔티티 디코딩 함수
  //     const decodeHTMLEntities = (text) => {
  //       const textArea = document.createElement('textarea');
  //       textArea.innerHTML = text;
  //       return textArea.value;
  //     };

  //     // 컨텐츠의 innerHTML을 디코딩해서 다시 설정
  //     if (
  //       (singlePopupContent && singlePopupContent.innerHTML.includes('>')) ||
  //       singlePopupContent.innerHTML.includes('<')
  //     ) {
  //       singlePopupContent.innerHTML = decodeHTMLEntities(singlePopupContent.innerHTML);
  //     }

  //     // 최상위 자식 요소들을 모두 수집
  //     const childElements = Array.from(singlePopupContent?.children || []);

  //     // 자식 요소가 여러 개면 스와이퍼로 변환
  //     if (childElements.length > 1) {
  //       // 새로운 스와이퍼 구조 생성
  //       const innerSwiper = document.createElement('div');
  //       innerSwiper.className = 'swiper inner-image-swiper-mobile';
  //       innerSwiper.style.cssText = 'width: 100%; height: 100%;';

  //       const innerWrapper = document.createElement('div');
  //       innerWrapper.className = 'swiper-wrapper';

  //       // 각 자식 요소를 swiper-slide로 변환 (원본 요소를 직접 이동)
  //       childElements.forEach((element) => {
  //         const slideDiv = document.createElement('div');
  //         slideDiv.className = 'swiper-slide';
  //         slideDiv.style.cssText = 'display: flex; align-items: center; justify-content: center;';
  //         slideDiv.appendChild(element); // cloneNode 대신 원본 요소를 직접 이동
  //         innerWrapper.appendChild(slideDiv);
  //       });

  //       innerSwiper.appendChild(innerWrapper);

  //       // 페이지네이션 추가
  //       const innerPagination = document.createElement('div');
  //       innerPagination.className = 'swiper-pagination inner-pagination-mobile';
  //       innerSwiper.appendChild(innerPagination);

  //       // 기존 content 교체
  //       singlePopupContent.innerHTML = '';
  //       singlePopupContent.appendChild(innerSwiper);

  //       // 내부 스와이퍼 초기화
  //       setTimeout(() => {
  //         new Swiper('.inner-image-swiper-mobile', {
  //           slidesPerView: 1,
  //           spaceBetween: 0,
  //           loop: true,
  //           speed: 800,
  //           autoplay: {
  //             delay: 3000,
  //             disableOnInteraction: false,
  //           },
  //           pagination: {
  //             el: '.inner-pagination-mobile',
  //             clickable: true,
  //             type: 'bullets',
  //           },
  //         });
  //       }, 100);
  //     }

  //     // 하나뿐이면 원래 스와이퍼 초기화 안 함
  //     return;
  //   }

  //   if (slides.length <= 1) return;

  //   // 팝업 데이터 수집
  //   popupData = slides.map((slide) => ({
  //     popupNo: slide.getAttribute('data-popup-no'),
  //     title:
  //       slide.querySelector('.design-popup__content')?.textContent?.trim().substring(0, 20) +
  //         '...' || '팝업',
  //     index: parseInt(slide.getAttribute('data-slide-index')),
  //   }));

  //   // 스와이퍼 초기화
  //   popupSwiper = new Swiper(swiperContainer, {
  //     slidesPerView: 1,
  //     spaceBetween: 0,
  //     loop: true,
  //     speed: 600,

  //     // 자동 재생 (3초마다)
  //     autoplay: {
  //       delay: 3000,
  //       disableOnInteraction: false,
  //     },

  //     // 페이지네이션
  //     pagination: {
  //       el: '.swiper-pagination',
  //       clickable: true,
  //       type: 'bullets',
  //     },

  //     // 키보드 제어
  //     keyboard: {
  //       enabled: true,
  //       onlyInViewport: true,
  //     },

  //     // 이벤트
  //     on: {
  //       slideChange: function () {
  //         currentSlideIndex = this.activeIndex;
  //         updateSliderUI();
  //       },
  //     },
  //   });

  //   // 초기 상태 설정
  //   updateSliderUI();
  // };

  // // 슬라이더 UI 업데이트
  // const updateSliderUI = () => {
  //   const container = document.querySelector('.popup-slider-container-mobile');
  //   if (!container) return;

  //   // 버튼 활성화/비활성화 (필요시)
  //   if (slides.length <= 1) {
  //     // 모바일에서는 네비게이션 버튼이 없으므로 생략
  //   }
  // };

  // // DOM 변경 감지해서 슬라이더 초기화 (중복 방지)
  // let isInitialized = false;
  // if (designPopup) {
  //   const observer = new MutationObserver((mutations) => {
  //     mutations.forEach((mutation) => {
  //       if (mutation.type === 'childList' && !isInitialized) {
  //         const swiperContainer = document.querySelector('.popup-slider-swiper-mobile');
  //         if (swiperContainer && !popupSwiper) {
  //           isInitialized = true;
  //           setTimeout(() => {
  //             initPopupSlider();
  //             observer.disconnect(); // 초기화 후 옵저버 해제
  //           }, 100);
  //         }
  //       }
  //     });
  //   });
  //   observer.observe(designPopup, { childList: true, subtree: true });
  // }

  // const popupActionMap = {
  //   CLOSE_ALL_POPUPS: () => {
  //     const container = document.querySelector('.popup-slider-container-mobile');
  //     const overlay = document.querySelector('.popup-modal-overlay-mobile');
  //     if (container) {
  //       container.style.display = 'none';
  //     }
  //     if (overlay) {
  //       overlay.style.display = 'none';
  //     }
  //     // 모든 팝업에 대해 닫기 이벤트 발생
  //     popupData.forEach((popup) => {
  //       EventManager.fire('CLOSE_DESIGN_POPUP', { popupNo: popup.popupNo });
  //     });
  //   },
  //   NO_VISIBLE_TODAY_ALL: () => {
  //     // popupData가 비어있으면 DOM에서 직접 수집
  //     if (popupData.length === 0) {
  //       const slideItems = document.querySelectorAll('.popup-slide-item');

  //       slideItems.forEach((slide) => {
  //         const popupNo = slide.getAttribute('data-popup-no');
  //         if (popupNo) {
  //           EventManager.fire('NO_VISIBLE_TODAY', {
  //             popupNo: popupNo,
  //             shouldHide: true,
  //           });
  //         }
  //       });
  //     } else {
  //       // 모든 팝업에 대해 오늘 하루 보지 않기 이벤트 발생
  //       popupData.forEach((popup) => {
  //         EventManager.fire('NO_VISIBLE_TODAY', {
  //           popupNo: popup.popupNo,
  //           shouldHide: true,
  //         });
  //       });
  //     }

  //     // 팝업과 오버레이 닫기
  //     const container = document.querySelector('.popup-slider-container-mobile');
  //     const overlay = document.querySelector('.popup-modal-overlay-mobile');
  //     if (container) {
  //       container.style.display = 'none';
  //     }
  //     if (overlay) {
  //       overlay.style.display = 'none';
  //     }
  //   },
  // };

  // 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,
  //   });
  // });

  // // 키보드 제어 (모바일에서는 필요시에만)
  // document.addEventListener('keydown', (e) => {
  //   const container = document.querySelector('.popup-slider-container-mobile');
  //   if (!container || container.style.display === 'none') return;

  //   if (e.key === 'Escape') {
  //     popupActionMap.CLOSE_ALL_POPUPS();
  //   }
  // });

  // // 초기화
  // setTimeout(initPopupSlider, 500);
})();