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

  const PAGE_SIZE = 10;
  let currentPage = 1;
  let allItems = [];
  let totalCount = 0;
  let templateSource = '';

  // 날짜 포맷팅 헬퍼 등록
  Handlebars.registerHelper('formatDate', (dateString) => {
    if (!dateString) return '';

    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}.${month}.${day}`;
  });

  // 핸들바 렌더링 함수
  const renderWinnerNoticeList = () => {
    const containerEl = document.querySelector('winner-notice-list');
    if (!containerEl || !templateSource) return;

    const hasMoreViewButton = allItems.length < totalCount;

    const handlebarData = {
      items: allItems,
      totalCount: totalCount,
      hasMoreViewButton: hasMoreViewButton,
    };

    const template = Handlebars.compile(templateSource);
    const renderedHtml = template(handlebarData);
    containerEl.innerHTML = renderedHtml;

    // 더보기 버튼 이벤트 바인딩
    const moreViewBtn = document.getElementById('moreViewBtn');
    if (moreViewBtn) {
      moreViewBtn.addEventListener('click', handleMoreViewClick);
    }
  };

  // 데이터 로드 함수
  const loadArticles = async (pageNumber) => {
    const articleRes = await actions.queryArticlesByBoardNo({
      boardNo: 'announcement',
      pageSize: PAGE_SIZE,
      pageNumber: pageNumber,
    });

    return articleRes.data;
  };

  // 더보기 클릭 핸들러
  const handleMoreViewClick = async () => {
    try {
      currentPage += 1;
      const articles = await loadArticles(currentPage);

      // 기존 아이템에 새 아이템 추가
      allItems = [...allItems, ...articles.items];

      // 리렌더링
      renderWinnerNoticeList();
    } catch (error) {
      console.error('더보기 로딩 실패:', error);
    }
  };

  EventManager.on('PAGE_LOAD_COMPLETED', async () => {
    try {
      // 템플릿 소스 저장
      const templateEl = document.querySelector(
        'winner-notice-list script[type="text/x-handlebars-template"]'
      );
      if (!templateEl) {
        console.error('템플릿을 찾을 수 없습니다!');
        return;
      }
      templateSource = templateEl.innerHTML;

      // 첫 페이지 데이터 로드
      const articles = await loadArticles(currentPage);
      allItems = articles.items;
      totalCount = articles.totalCount;

      // 렌더링
      renderWinnerNoticeList();
    } catch (error) {
      console.error('데이터 로딩 실패:', error);
    }
  });
})();