(() => {
  const currentScript = document.currentScript;

  const bannerCode = currentScript
    .closest('template, [shopby-banner-code]')
    ?.getAttribute('shopby-banner-code')
    ?? currentScript.getAttribute('shopby-banner-code');

  if (!bannerCode) {
    console.warn('[headless-banner] shopby-banner-code 속성이 없습니다.');
    return;
  }

  const toAbsoluteUrl = (url) =>
    url?.startsWith('//') ? `https:${url}` : url;

  const renderBanners = (accounts) => {
    const container = currentScript
      .closest('template, [shopby-banner-code]')
      ?.querySelector?.('.headless-banner')
      ?? document.querySelector(`.headless-banner:not([data-loaded])`);

    if (!container) return;

    container.setAttribute('data-loaded', bannerCode);

    const sorted = [...accounts].sort((a, b) => a.displayOrder - b.displayOrder);

    const html = sorted
      .flatMap((account, accountIndex) =>
        [...(account.banners ?? [])]
          .sort((a, b) => a.displayOrder - b.displayOrder)
          .map((banner) => {
            const href = banner.landingUrl || '#';
            const target = banner.browerTargetType === 'NEW' ? '_blank' : '_self';
            const itemClass = `headless-banner__item banner_${accountIndex + 1}`;

            if (banner.videoUrl) {
              return `
                <div class="${itemClass}">
                  <a href="${href}" target="${target}" rel="noopener noreferrer">
                    <video
                      src="${banner.videoUrl}"
                      width="${account.width}"
                      height="${account.height}"
                      autoplay muted loop playsinline
                    ></video>
                  </a>
                </div>
              `;
            }

            return `
              <div class="${itemClass}">
                <a href="${href}" target="${target}" rel="noopener noreferrer">
                  <img
                    src="${toAbsoluteUrl(banner.imageUrl)}"
                    alt="${banner.name || ''}"
                    width="${account.width}"
                    height="${account.height}"
                    loading="lazy"
                  />
                </a>
              </div>
            `;
          })
      )
      .join('');

    container.innerHTML = `<div class="headless-banner__list">${html}</div>`;
  };

  const fetchBanners = async () => {
    try {
      // ShopbyAPI 공통 헬퍼 사용 (libs/shopby-api.js)
      const data = await ShopbyAPI.get(`/display/banners/${bannerCode}`);
      const section = Array.isArray(data) ? data[0] : data;

      renderBanners(section?.accounts ?? []);
    } catch (e) {
      console.error('[headless-banner]', e);
    }
  };

  fetchBanners();
})();