(() => {
  const { actions, EventManager, Handlebars, utils } = ShopbySkin;

  // Handlebars 헬퍼 등록 (이미 등록되어 있으면 스킵)
  if (!Handlebars.helpers.gt) {
    Handlebars.registerHelper('gt', function (a, b) {
      return a > b;
    });
  }

  if (!Handlebars.helpers.eq) {
    Handlebars.registerHelper('eq', function (a, b) {
      return a === b;
    });
  }

  if (!Handlebars.helpers.ifEq) {
    Handlebars.registerHelper('ifEq', function (a, b, options) {
      return a === b ? options.fn(this) : options.inverse(this);
    });
  }

  // URL에서 categoryNo 가져오기
  const urlQueryParams = utils.getQueryParams();
  const categoryNo = urlQueryParams.categoryNo ? parseInt(urlQueryParams.categoryNo) : null;

  // categoryNo가 없으면 렌더링 안함
  if (!categoryNo) {
    // category-banner 엘리먼트 숨기기
    const $banner = document.querySelector('category-banner');
    if ($banner) {
      $banner.style.display = 'none';
    }
    return;
  }

  // categoryNo에 모바일 분기 prefix를 붙여 배너 ID로 사용 (예: MO-937611)
  const bannerId = `MO-${categoryNo}`;

  // category-banner 엘리먼트에서 shopby-banner-id 속성 가져오기
  const $banner = document.querySelector('category-banner');

  // EventManager를 통해 배너 데이터 요청
  if (bannerId) {
    actions?.getBannerById?.({ bannerId });
  }

  // 배너 데이터 조회 완료 이벤트 리스너
  EventManager.on('QUERY_BANNER_BY_ID', (responseData) => {
    // category-banner 엘리먼트 확인
    if (!$banner) {
      console.error('Cannot find category-banner');
      return;
    }

    // 템플릿 찾기
    const template = $banner.querySelector('script[type="text/x-handlebars-template"]');
    if (!template) {
      console.error('Cannot find handleBar template');
      return;
    }

    // API 응답 데이터를 배너 형식으로 매핑
    const bannerData = responseData.data || responseData;

    // 배너 데이터를 최종 형식으로 변환
    let finalData = {};
    if (Array.isArray(bannerData)) {
      // 첫 번째 배너 그룹 사용
      const firstGroup = bannerData[0];
      if (firstGroup && firstGroup.banners) {
        finalData = {
          banners: firstGroup.banners,
          isLoaded: true,
        };
      }
    } else if (bannerData.banners) {
      // 단일 객체 형식
      finalData = {
        banners: bannerData.banners,
        isLoaded: true,
      };
    }

    // 배너 데이터가 없으면 숨기기
    if (!finalData.banners || finalData.banners.length === 0) {
      $banner.style.display = 'none';
      return;
    }

    // Handlebars 컴파일
    const compiled = Handlebars.compile(template.innerHTML);
    const html = compiled(finalData);

    // 렌더링
    $banner.innerHTML = html;
    $banner.style.display = 'block';

    // Swiper 초기화 (DOM 렌더링 완료 후)
    setTimeout(() => {
      initCategoryBannerSwiper();
    }, 300);
  });

  // Swiper 초기화 함수
  function initCategoryBannerSwiper() {
    const swiperContainer = document.querySelector('.category-banner__swiper');
    if (!swiperContainer) {
      return;
    }

    // Swiper 설정 (모바일 최적화)
    const slideSetting = {
      slidesPerView: 1,
      spaceBetween: 10,
      loop: true,
      speed: 600,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
        pauseOnMouseEnter: false, // 모바일은 터치 기반
      },
      pagination: {
        el: '.category-banner__pagination',
        clickable: true,
        type: 'bullets',
      },
    };

    // 기존 Swiper 인스턴스가 있으면 제거
    if (window.categoryBannerSwiper) {
      window.categoryBannerSwiper.destroy(true, true);
    }

    // 새 Swiper 인스턴스 생성
    window.categoryBannerSwiper = new Swiper('.category-banner__swiper', slideSetting);
  }
})();