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

  const headerEl = document.querySelector('shopby-header-v2');

  // 외부스크립트 등록 기능. 삭제금지
  ShopbyExternalScript?.initialize({
    apiOption: {
      platform: 'PC',
    },
  }).then(() => {
    EventManager.fire('QUERY_PAGE_SCRIPTS', ShopbyExternalScript?.scripts);
  });

  // 클릭이벤트 맵
  // 1. SIGN_OUT : 로그아웃
  const headerActionMap = {
    SIGN_OUT: () => {
      EventManager.fire('SIGN_OUT');
    },
    GO_MY_MENU: (e) => {
      if (!utils.isSignedIn()) {
        e.preventDefault();

        const from = e.target.href;

        const nextUrl = `${location.origin}/pages/sign-in/sign-in.html`;

        location.href = `${nextUrl}?from=${encodeURIComponent(from)}`;
      }
    },
  };

  // 클릭이벤트 핸들러
  const clickEventListener = (e) => {
    const action = e?.target?.closest('[shopby-action]')?.getAttribute('shopby-action');

    headerActionMap[action]?.(e);
  };

  // 상단 카테고리 slider 초기화
  EventManager.on('PAGE_LOAD_COMPLETED', ({ profile }) => {
    EventManager.fire('INIT_CATEGORY_SLIDER', {
      direction: 'horizontal',
      effect: 'slide',
      slidesPerView: 'auto',
      spaceBetween: 20,
    });

    // 외부스크립트 등록 기능. 삭제금지
    ShopbyExternalScript?.setGlobalObjectSb({
      getPlatform: () => (isMobileDevice ? 'MOBILE_WEB' : 'PC'),
      profile,
    });

    //헤더 고정
    const nav = document.querySelector("nav"); // 또는 .main-nav 로 바꾸셔도 됨
    const navTop = nav.offsetTop;

    window.addEventListener("scroll", () => {
      if (window.scrollY >= navTop) {
        nav.classList.add("fixed");
      } else {
        nav.classList.remove("fixed");
      }
    });

    //헤더 패밀리사이트
    var openBtn = document.querySelector(".header_family_btn");
    var closeBtn = document.querySelector(".header_family_pop .pop_close");
    var pop = document.querySelector(".header_family_pop");
    var dim = document.querySelector(".pop_dim");
    var body = document.querySelector("body");

    if (openBtn) {
      openBtn.addEventListener("click", function () {
        pop.style.display = "block";
        dim.style.display = "block";
        body.style.overflow = "hidden";
      });
    }

    if (closeBtn) {
      closeBtn.addEventListener("click", function () {
        pop.style.display = "none";
        dim.style.display = "none";
        body.style.overflow = "visible";
      });
    }

    const allMenuBtn = document.querySelector('.nav__all-menu-btn');

    //메뉴 너비값 초기화
    function resetMenuWidth() {
      const allMenu = document.querySelector('.nav__all-menu');
      if (!allMenu) return;

      allMenu.style.width = '362px'; // 기본값
    }


    allMenuBtn?.addEventListener('click', () => {
      allMenuBtn.classList.toggle('active');
    });


    function removeOpen(selector) {
      document.querySelectorAll(selector).forEach(el => {
        el.classList.remove('is-open');
        resetMenuWidth()
      });
    }

    function openMenu(target, subSelector) {
      removeOpen('.is-open');

      target.classList.add('is-open');
      const sub = target.querySelector(subSelector);
      if (sub) sub.classList.add('is-open');

      // depth2 첫 항목 기본 오픈
      const firstChild = sub?.querySelector('[class$="-item"]');
      const nextDepth = firstChild?.querySelector('[class^="depth"]');

      if (firstChild) firstChild.classList.add('is-open');
      if (nextDepth) nextDepth.classList.add('is-open');
    }

    function adjustTop(item, target) {
      const container = document.querySelector('.all-menu-cate');
      if (!container || !target) return;

      const offset =
        item.getBoundingClientRect().top -
        container.getBoundingClientRect().top;

      target.style.top = -offset + 'px';
    }


    /* =========================
      기본 카테고리 오픈
    ========================= */
    function openDefaultCategory() {
      const firstDepth1 = document.querySelector('.depth1-item');
      if (!firstDepth1) return;

      openMenu(firstDepth1, '.depth2');
    }

    //메뉴 너비값 변경
    function updateMenuWidthSafe(target) {
      const allMenu = document.querySelector('.nav__all-menu');
      if (!allMenu) return;

      const hasDepth2 = !!target.querySelector('.depth2');
      const hasDepth3 = !!target.querySelector('.depth3');

      let width = 180; // depth1 only
      if (hasDepth2) width = 362;
      if (hasDepth3) width = 542;

      requestAnimationFrame(() => {
        allMenu.style.width = width + 'px';
      });
    }


    /* =========================
      Hover 이벤트
    ========================= */
    document.querySelectorAll('.depth1-item').forEach(item => {
      const depth2 = item.querySelector('.depth2');

      item.addEventListener('mouseenter', () => {
        updateMenuWidthSafe(item);
        // 전체 초기화
        document.querySelectorAll('.depth1-item').forEach(el => {
          el.classList.remove('is-open');
        });
        document.querySelectorAll('.depth2, .depth3, .depth2-item').forEach(el => {
          el.classList.remove('is-open');
        });


        // depth1 열기
        item.classList.add('is-open');

        if (depth2) {
          depth2.classList.add('is-open');
          adjustTop(item, depth2);

          const firstDepth2Item = depth2.querySelector('.depth2-item');
          const firstDepth3 = firstDepth2Item?.querySelector('.depth3');

          if (firstDepth2Item) {
            firstDepth2Item.classList.add('is-open');
          }

          if (firstDepth3) {
            firstDepth3.classList.add('is-open');
          }
        }
      });
    });

    document.querySelectorAll('.depth2-item').forEach(item => {
      const depth3 = item.querySelector('.depth3');


      item.addEventListener('mouseenter', () => {
        document.querySelectorAll('.depth2-item').forEach(el => {
          el.classList.remove('is-open');
        });
        document.querySelectorAll('.depth3').forEach(el => {
          el.classList.remove('is-open');
        });

        item.classList.add('is-open');

        // depth3 있을 때만 열기
        if (depth3) {
          depth3.classList.add('is-open');
          adjustTop(item, depth3);
        }
      });
    });

    /* =========================
      메뉴 열릴 때 기본 상태
    ========================= */
    const bodyObserver = new MutationObserver(() => {
      const allMenu = document.querySelector('.nav__all-menu');
      if (!allMenu) return;

      bodyObserver.disconnect();

      new MutationObserver(mutations => {
        mutations.forEach(m => {
          if (
            m.type === 'attributes' &&
            m.attributeName === 'class' &&
            allMenu.classList.contains('is-active')
          ) {
            openDefaultCategory();
          }
        });
      }).observe(allMenu, { attributes: true });
    });

    bodyObserver.observe(document.body, {
      childList: true,
      subtree: true
    });

    //베스트/브랜드전용관/점주전용관 비노출
    const targetCategories = ['1170271', '1170275', '1170277'];

    document.querySelectorAll('[data-category]').forEach(el => {
      if (targetCategories.includes(el.dataset.category)) {
        el.classList.add('is-hidden');
      }
    });


    /* =========================
     스크롤시 카테고리 닫힘
   ========================= */


    window.addEventListener('scroll', () => {
      const allMenu = document.querySelector('.nav__all-menu');
      const allMenuBtn = document.querySelector('.nav__all-menu-btn');

      if (!allMenu) return;

      // 메뉴가 열려있는 상태일 때만
      if (allMenu.classList.contains('is-active')) {

        // 메뉴 닫기
        allMenu.classList.remove('is-active');
        allMenuBtn?.classList.remove('active');
        document.querySelectorAll('.is-open').forEach(el => {
          el.classList.remove('is-open');
        });

        resetMenuWidth();
      }
    });
  });

  headerEl?.addEventListener('click', clickEventListener);

  const searchParams = new URLSearchParams(location.search);
  const trackingKey = searchParams.get('trackingKey');
  const channelType = searchParams.get('channelType');

  const { setTrackingKey, setChannelType } = ShopbySkin.utils;
  setTrackingKey(trackingKey);
  setChannelType(channelType);
})();

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

  EventManager.on('PAGE_LOAD_COMPLETED', (commonData) => {
    if (ShopbySkin.utils.isSignIn()) {
      ShopbySkin.actions.productRecentActions().getProfileRecentProducts()

      EventManager.on('QUERY_PROFILE_RECENT_PRODUCTS', (data) => {
        if ('93747' == commonData?.profile?.memberGradeNo) {
          if (data?.[0]) {
            data.forEach((v) => {
              let hasTheIcon = false;

              for (const icon of (v.stickerInfos || [])) {
                if (icon?.label?.includes('점주전용')) {
                  hasTheIcon = true;

                  break;
                }
              }

              if (hasTheIcon) {
                const itemDom = document.querySelector(`recent-product .recent-product-item-wrap[data-product-no="${v.productNo}"]`);

                itemDom.querySelector('.recent-product-item__info-price').innerHTML = `<p class="no_mem">매장 사업자 전용 상품</p>`;

                itemDom.href = `javascript:alertTheProduct();`;

                itemDom.querySelectorAll('a').forEach((v) => {
                  v.href = `javascript:alertTheProduct();`;
                });

                itemDom.querySelector('[shopby-action="OPEN_PRODUCT_OPTION_MODAL"]')?.remove();
              }
            });
          }
        }

        if (data?.[0]?.imageUrlInfo?.[0]?.url) {
          document.querySelector('#kmRecentThumb').src = data?.[0]?.imageUrlInfo?.[0]?.url;
          document.querySelector('#kmRecentThumb')?.classList.add('has-image');
        }
      });
    }
    else {
      const noArr = JSON.parse(localStorage.getItem('guestRecentProducts'));

      if (noArr && noArr?.length > 0) {
        const nos = encodeURIComponent(noArr.join(','));

        fetch('https://shop-api.e-ncp.com/guest/recent-products?mallProductNos=' + nos, {
          "headers": {
            "version": "1.0",
            "clientid": commonData.clientId,
            "platform": "MOBILE_WEB",
          },
        })
          .then((res) => res.json())
          .then((data) => {
            if (data?.[0]) {
              data.forEach((v) => {
                let hasTheIcon = false;

                for (const icon of (v.stickerInfos || [])) {
                  if (icon?.label?.includes('점주전용')) {
                    hasTheIcon = true;

                    break;
                  }
                }

                if (hasTheIcon) {
                  const itemDom = document.querySelector(`recent-product .recent-product-item-wrap[data-product-no="${v.productNo}"]`);

                  if (itemDom) {
                    itemDom.querySelector('.recent-product-item__info-price').innerHTML = `<p class="no_mem">매장 사업자 전용 상품</p>`;

                    itemDom.href = `javascript:alertTheProduct();`;

                    itemDom.querySelectorAll('a').forEach((v) => {
                      v.href = `javascript:alertTheProduct();`;
                    });

                    itemDom.querySelector('[shopby-action="OPEN_PRODUCT_OPTION_MODAL"]')?.remove();
                  }
                }
              });
            }

            if (data?.[0]?.imageUrlInfo?.[0]?.url) {
              document.querySelector('#kmRecentThumb').src = data?.[0]?.imageUrlInfo?.[0]?.url;
              document.querySelector('#kmRecentThumb')?.classList.add('has-image');
            }
          });
      }
    }
  });
})();

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

  EventManager.on('PAGE_LOAD_COMPLETED', (commonData) => {
    fetch('https://vx-gateway.vx-mall.com/public/menus.json', { cache: 'no-cache' })
      .then((res) => res.json())
      .then((menus) => {
        const ulGnb = document.querySelector('ul.gnb')

        ulGnb.innerHTML = "";

        for (const menu of menus) {
          const title = menu.title;
          let link = menu.link;
          const li = `<li><a href="${link}">${title}</a></li>`;

          ulGnb.innerHTML += li;
        }
      })
  });
})();
*/

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

  EventManager.on('PAGE_LOAD_COMPLETED', (shopbyCommonData) => {
    actions.queryArticleDetail({ boardNo: 288610, articleNo: 1131994 })
      .then((res) => {
        const menu_html_0 = `
          <li><a href="/pages/product/product-list.html?categoryNo=1170277&sortType=SALE_CNT">베스트</a></li>
          <li><a href='/pages/event/event-list.html'>이벤트</a></li>
          <li><a href="/pages/product/product-list.html?categoryNo=1170271">F&B 전용관</a></li>
          <li><a href="/pages/business/business-list.html?sectionId=b2b-mdpick&sortType=SALE&pageSize=20&pageNumber=1">점주 전용관</a></li>
        `;
        const menu_html = (res?.data?.content ?? '').trim() ?? menu_html_0;
        const target_gnb = document.querySelector('ul.gnb');

        target_gnb.innerHTML = menu_html;
      });

      EventManager.on('QUERY_DISPLAY_SECTIONS_IDS_SECTIONID', (data)=>{
        if ( !ShopbySkin.utils.isSignIn() || '93747' == shopbyCommonData?.profile?.memberGradeNo ) {
          if ( data?.products?.[0] ) {
            data?.products?.forEach((v)=>{
              let hasTheIcon = false;

              for ( const icon of ( v.stickerInfos || [] ) ) {
                if ( icon?.label?.includes('점주전용') ) {
                  hasTheIcon = true;

                  break;
                }
              }

              if ( hasTheIcon ) {
                const itemDom = document.querySelector(`display-product[shopby-section-id="${data?.sectionId}"] .thumb-item[data-product-no="${v.productNo}"]`);

                if ( itemDom?.querySelector ) {
                  itemDom.querySelector('.product-thumb-price-info').innerHTML = `<p class="no_mem">매장 사업자 전용 상품</p>`;

                  itemDom.href = `javascript:alertTheProduct();`;

                  itemDom.querySelectorAll('a').forEach((v)=>{
                    v.href = `javascript:alertTheProduct();`;
                  });

                  itemDom.querySelector('[shopby-action="OPEN_PRODUCT_OPTION_MODAL"]')?.remove();
                }
              }
            });
          }
        }
      });
  });
})();