(() => {
  const { EventManager, actions } = ShopbySkin;
  let bannerId = document.currentScript.getAttribute('shopby-banner-id');

  EventManager.on('PAGE_LOAD_COMPLETED', async (commonData) => {
    if (bannerId) {
      await actions?.getBannerById?.({ bannerId });

      if (bannerId === 'mo-main-top_visual') {
        initSwiperMo();
      }
    }

    function initSwiperMo() {
      initSwiperByBannerId('mo-main-top_visual');
    }

    function initSwiperByBannerId(id) {
      setTimeout(() => {
        const targetBanner    = document.querySelector(`skin-banner[shopby-banner-id="${id}"]`);
        const swiperEl        = targetBanner?.querySelector('.swiper');
        const paginationEl    = targetBanner?.querySelector('.swiper-pagination-mo');
        const moVisualSwiper  = new Swiper(swiperEl, {
          loop: true,
          slidesPerView: 1,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          },
          speed: 1500,
          pagination: {
            el: paginationEl,
            type: 'custom',
            renderCustom: function (swiper, current) {
              var slides = swiper.slides;
              var originalSlides = [];
              var i;

              for (i = 0; i < slides.length; i++) {
                if (!slides[i].classList.contains('swiper-slide-duplicate')) {
                  originalSlides.push(slides[i]);
                }
              }

              var currentIndex = swiper.realIndex + 1;
              var totalCount = originalSlides.length;

              var formattedCurrent = String(currentIndex);
              if (formattedCurrent.length < 2) {
                formattedCurrent = formattedCurrent;
              }

              var formattedTotal = String(totalCount);
              if (formattedTotal.length < 2) {
                formattedTotal = formattedTotal;
              }

              return ''
                + '<span class="swiper-pagination-current current">' + formattedCurrent + '</span>'
                + ' / '
                + '<span class="swiper-pagination-total total">' + formattedTotal + '</span>';
            }
          }
        });

        const allBtn          = document.querySelector('.main_slider .swiper_btn_all');
        const layer           = document.getElementById('bannerLayer');

        if (!layer) return;

        const imageWrap       = layer.querySelector('.banner-layer__images');
        const closeBtn        = layer.querySelector('.banner-layer__close');
        const dim             = layer.querySelector('.banner-layer__dim');

        if (!allBtn) return;

        allBtn.addEventListener('click', function () {
          imageWrap.innerHTML = '';

          // 현재 구조 기준
          const slides = document.querySelectorAll(
            '.main_slider .swiper-slide:not(.swiper-slide-duplicate)'
          );

          slides.forEach(slide => {
            const img   = slide.querySelector('img');
            const link  = slide.querySelector('a');

            if (img) {
              const newImg  = document.createElement('img');
              newImg.src    = img.currentSrc || img.src;

              // 링크도 같이 복사하고 싶으면
              if (link) {
                const newLink   = document.createElement('a');
                newLink.href    = link.href;
                newLink.target  = link.target || '_self';
                newLink.appendChild(newImg);
                imageWrap.appendChild(newLink);
              } else {
                imageWrap.appendChild(newImg);
              }
            }
          });

          layer.classList.add('is-open');
          document.body.style.overflow = 'hidden';
        });

        function closeLayer() {
          layer.classList.remove('is-open');
          document.body.style.overflow = '';
        }

        closeBtn?.addEventListener('click', closeLayer);
        dim?.addEventListener('click', closeLayer);
      }, 500);
    }
  });
})();