/**
 * 공통 스크립트 (common.js)
 * ========================================
 * 모든 페이지에서 공통으로 사용하는 기능을 모아둔 진입점입니다.
 *
 * [주요 역할]
 * - ScrollManager: 모바일 뷰포트 높이 동기화, 스크롤 잠금(모달 열 때)
 * - ModalManager: 모달 열기/닫기 (애니메이션, 비디오 정지)
 * - DeviceUtils: 모바일/태블릿/데스크톱 감지
 *
 * [기존 코드 호환 함수] - 레거시 코드에서 그대로 사용 가능
 * - popOpen(id): 모달 열기 (예: popOpen('modal-video'))
 * - popClose(element): 모달 닫기 (닫기 버튼에 사용)
 * - syncHeight(), bodyLock(), bodyUnlock(), isMobile()
 *
 * @module CommonUtils
 */

/**
 * 스크롤 및 레이아웃 관리 클래스
 * - syncHeight(): CSS 변수 --window-inner-height 설정 (모바일 주소창 대응)
 * - lock()/unlock(): 모달 열 때 body 스크롤 잠금/해제
 */
class ScrollManager {
  constructor() {
    this.scrollY = 0;
    this.wrap = null;
    this.isLocked = false;
  }

  /**
   * 스크린 높이 계산 및 CSS 변수 설정
   */
  syncHeight() {
    try {
      document.documentElement.style.setProperty(
        "--window-inner-height",
        `${window.innerHeight}px`
      );
    } catch (error) {
      if (typeof ErrorHandler !== 'undefined') {
        ErrorHandler.handle(error, { context: 'ScrollManager.syncHeight' });
      } else {
        console.error('[ScrollManager] syncHeight error:', error);
      }
    }
  }

  /**
   * body 스크롤 잠금
   */
  lock() {
    if (this.isLocked) return;
    
    this.scrollY = window.scrollY;
    document.documentElement.classList.add("is-locked");
    document.documentElement.style.scrollBehavior = "auto";
    
    if (this.wrap) {
      this.wrap.style.top = `-${this.scrollY}px`;
    }
    
    this.isLocked = true;
  }

  /**
   * body 스크롤 잠금 해제
   */
  unlock() {
    if (!this.isLocked) return;
    
    document.documentElement.classList.remove("is-locked");
    window.scrollTo(0, this.scrollY);
    
    if (this.wrap) {
      this.wrap.style.top = "";
    }
    
    document.documentElement.style.scrollBehavior = "";
    this.isLocked = false;
  }

  /**
   * 초기화
   */
  init() {
    this.wrap = typeof DOMUtils !== 'undefined' ? DOMUtils.$(".wrap") : document.querySelector(".wrap");
    
    // 즉시 높이 설정
    this.syncHeight();
    
    // 리사이즈 이벤트 (쓰로틀 적용)
    const throttledSyncHeight = typeof Utils !== 'undefined' && Utils.throttle
      ? Utils.throttle(() => this.syncHeight(), 100)
      : (() => {
          let resizeTimer;
          return () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => this.syncHeight(), 100);
          };
        })();
    
    if (typeof eventManager !== 'undefined') {
      eventManager.on(window, "resize", throttledSyncHeight);
      eventManager.on(window, "orientationchange", () => {
        setTimeout(() => this.syncHeight(), 100);
      });
    } else {
      window.addEventListener("resize", throttledSyncHeight);
      window.addEventListener("orientationchange", () => {
        setTimeout(() => this.syncHeight(), 100);
      });
    }
  }
}

/**
 * 모바일 감지 유틸리티
 */
class DeviceUtils {
  /**
   * 모바일 기기 여부 확인
   * @param {number} breakpoint - 브레이크포인트 (기본값: 1025)
   * @returns {boolean}
   */
  static isMobile(breakpoint = 1025) {
    return window.innerWidth < breakpoint;
  }

  /**
   * 태블릿 기기 여부 확인
   * @param {number} minWidth - 최소 너비
   * @param {number} maxWidth - 최대 너비
   * @returns {boolean}
   */
  static isTablet(minWidth = 768, maxWidth = 1024) {
    const width = window.innerWidth;
    return width >= minWidth && width <= maxWidth;
  }

  /**
   * 데스크톱 기기 여부 확인
   * @param {number} breakpoint - 브레이크포인트
   * @returns {boolean}
   */
  static isDesktop(breakpoint = 1025) {
    return window.innerWidth >= breakpoint;
  }
}

/**
 * 모달/팝업 관리 클래스
 */
class ModalManager {
  constructor(scrollManager) {
    this.scrollManager = scrollManager;
    this.openModals = new Set();
  }

  /**
   * 모달 열기
   * @param {string|Element} target - 모달 ID 또는 요소
   * @param {Object} options - 옵션
   * @returns {Promise}
   */
  async open(target, options = {}) {
    const {
      duration = 300,
      lockScroll = true,
      stopVideo = true,
    } = options;

    try {
      const element = typeof target === 'string' 
        ? (typeof DOMUtils !== 'undefined' ? DOMUtils.$(`#${target}`) : document.getElementById(target))
        : target;
      
      if (!element) {
        console.warn('[ModalManager] Element not found:', target);
        return;
      }

      if (typeof DOMUtils !== 'undefined') {
        await DOMUtils.fadeIn(element, duration);
      } else if (typeof AnimationUtils !== 'undefined') {
        await AnimationUtils.fade(element, 'in', duration);
      } else {
        element.style.display = 'block';
        element.style.opacity = '1';
      }

      if (lockScroll && this.scrollManager) {
        this.scrollManager.lock();
      }

      this.openModals.add(element);

      return element;
    } catch (error) {
      if (typeof ErrorHandler !== 'undefined') {
        ErrorHandler.handle(error, { context: 'ModalManager.open', target });
      } else {
        console.error('[ModalManager] open error:', error);
      }
    }
  }

  /**
   * 모달 닫기
   * @param {string|Element} target - 모달 ID 또는 요소
   * @param {Object} options - 옵션
   * @returns {Promise}
   */
  async close(target, options = {}) {
    const {
      duration = 300,
      unlockScroll = true,
      stopVideo = true,
    } = options;

    try {
      const element = typeof target === 'string'
        ? (typeof DOMUtils !== 'undefined' ? DOMUtils.$(`#${target}`) : document.getElementById(target))
        : target;

      if (!element) return;

      if (typeof DOMUtils !== 'undefined') {
        await DOMUtils.fadeOut(element, duration);
      } else if (typeof AnimationUtils !== 'undefined') {
        await AnimationUtils.fade(element, 'out', duration);
      } else {
        element.style.display = 'none';
        element.style.opacity = '';
      }

      // 비디오 정지
      if (stopVideo) {
        const video = element.querySelector("video");
        if (video) video.pause();
      }

      if (unlockScroll && this.scrollManager && this.openModals.size <= 1) {
        this.scrollManager.unlock();
      }

      this.openModals.delete(element);

      return element;
    } catch (error) {
      if (typeof ErrorHandler !== 'undefined') {
        ErrorHandler.handle(error, { context: 'ModalManager.close', target });
      } else {
        console.error('[ModalManager] close error:', error);
      }
    }
  }

  /**
   * 모든 모달 닫기
   */
  async closeAll() {
    const promises = Array.from(this.openModals).map(modal => this.close(modal));
    await Promise.all(promises);
    this.openModals.clear();
  }
}

// 전역 인스턴스 생성
const scrollManager = new ScrollManager();
const modalManager = new ModalManager(scrollManager);

// ----------------------------------------
// 기존 함수 호환성 래퍼 (레거시 코드용)
// ----------------------------------------
// 아래 함수들은 기존 코드에서 호출하는 이름입니다.
// 새로 작성 시에는 scrollManager, modalManager를 직접 사용하는 것을 권장합니다.
let scrollY = 0;
let wrap = null;

/** 뷰포트 높이 동기화 (리사이즈 시 호출) */
function syncHeight() {
  scrollManager.syncHeight();
}

/** 모바일 기기 여부 (breakpoint 1025px) */
function isMobile() {
  return DeviceUtils.isMobile();
}

/** body 스크롤 잠금 (모달 열 때) */
function bodyLock() {
  scrollManager.lock();
}

/** body 스크롤 해제 (모달 닫을 때) */
function bodyUnlock() {
  scrollManager.unlock();
}

/**
 * 모달 열기 - id가 "open-modal-video" 인 버튼 클릭 시 모달 "modal-video" 가 열림
 * @param {string} id - 모달 요소의 id (앞에 # 없이)
 */
async function popOpen(id) {
  return await modalManager.open(id);
}

/**
 * 모달 닫기 - 닫기 버튼(.close) 또는 백드롭 클릭 시 호출
 * @param {Element} obj - 클릭된 요소 (보통 this 또는 event.target)
 */
async function popClose(obj) {
  const popup = obj.closest ? obj.closest(".popup") : null;
  if (popup) {
    return await modalManager.close(popup);
  }
}

/**
 * 공통 이벤트 초기화
 * - ScrollManager: 뷰포트 높이, 리사이즈 대응
 * - 모달: id가 "open-modal-XXX"인 요소 클릭 시 #modal-XXX 열기
 * - 모달 닫기: .close 클릭 또는 모달 바깥(.modal) 클릭
 */
function initCommonEvents() {
  const baseHref = window.location.href.split("#")[0];
  
  // ScrollManager 초기화
  scrollManager.init();
  wrap = scrollManager.wrap;

  // 모달 열기 이벤트 (이벤트 위임)
  const openModalHandler = function(e) {
    const modalId = this.id.replace("open-", "");
    modalManager.open(modalId);
  };

  // 모달 닫기 이벤트
  const closeModalHandler = async function(e) {
    const modal = this.closest(".modal");
    if (modal) {
      await modalManager.close(modal);
    }
  };

  // 모달 바깥 클릭 시 닫기
  const modalBackdropHandler = async function(e) {
    const modalContent = e.target.closest(".modal-content");
    if (!modalContent && e.target === this) {
      await modalManager.close(this);
    }
  };

  // EventManager 사용 (있는 경우)
  if (typeof eventManager !== 'undefined') {
    eventManager.delegate(document, "click", "[id^=open-modal]", openModalHandler);
    eventManager.delegate(document, "click", ".close", closeModalHandler);
    eventManager.delegate(document, "click", ".modal", modalBackdropHandler);
  } else if (typeof DOMUtils !== 'undefined' && DOMUtils.delegate) {
    DOMUtils.delegate(document, "click", "[id^=open-modal]", openModalHandler);
    DOMUtils.delegate(document, "click", ".close", closeModalHandler);
    DOMUtils.delegate(document, "click", ".modal", modalBackdropHandler);
  } else {
    // 폴백: 직접 이벤트 리스너 등록
    document.addEventListener("click", (e) => {
      const target = e.target.closest("[id^=open-modal]");
      if (target) {
        openModalHandler.call(target, e);
      }
      
      const closeBtn = e.target.closest(".close");
      if (closeBtn) {
        closeModalHandler.call(closeBtn, e);
      }
      
      const modal = e.target.closest(".modal");
      if (modal && e.target === modal) {
        modalBackdropHandler.call(modal, e);
      }
    });
  }
  
  // ----------------------------------------
  // 모바일 검색 오버레이
  // ----------------------------------------
  const searchOpenBtn = document.querySelector(".btn-search");
  const searchLayer = document.querySelector(".mo-search-layer");
  const searchCloseBtn = searchLayer ? searchLayer.querySelector(".btn-close-search") : null;
  const searchInput = searchLayer ? searchLayer.querySelector('input[type="text"]') : null;

  const openSearch = () => {
    if (!searchLayer) return;
    searchLayer.classList.add("is-open");
    searchLayer.setAttribute("aria-hidden", "false");
    scrollManager.lock();

    if (searchInput) {
      setTimeout(() => {
        searchInput.focus();
      }, 50);
    }
  };

  const closeSearch = () => {
    if (!searchLayer) return;
    searchLayer.classList.remove("is-open");
    searchLayer.setAttribute("aria-hidden", "true");
    scrollManager.unlock();
  };

  if (searchOpenBtn && searchLayer) {
    searchOpenBtn.addEventListener("click", openSearch);
  }

  if (searchCloseBtn) {
    searchCloseBtn.addEventListener("click", closeSearch);
  }

  if (searchLayer) {
    const searchBackdrop = searchLayer.querySelector(".mo-search-backdrop");
    searchLayer.addEventListener("click", (e) => {
      if (e.target === searchLayer || e.target === searchBackdrop) {
        closeSearch();
      }
    });
  }
}

// DOMContentLoaded 시 초기화
if (document.readyState === 'loading') {
  document.addEventListener("DOMContentLoaded", initCommonEvents);
} else {
  initCommonEvents();
}

// 리사이즈 이벤트는 ScrollManager.init()에서 처리됨

/**
 * 컨테이너 스크롤 효과 클래스
 */
class ContainerScrollEffect {
  constructor(container, options = {}) {
    this.container = container;
    this.options = {
      borderRadius: 30,
      scrollThreshold: 100,
      excludeClass: 'search-result',
      ...options,
    };
    this.isActive = false;
  }

  /**
   * 효과 초기화
   */
  init() {
    if (!this.container) return;

    // 검색 결과 페이지에서는 이 효과를 적용하지 않음
    const wrap = this.container.closest(".wrap");
    if (wrap && wrap.classList.contains(this.options.excludeClass)) {
      return;
    }

    const throttledScroll = typeof Utils !== 'undefined' && Utils.throttle
      ? Utils.throttle(() => this._handleScroll(), 16)
      : (() => {
          let lastTime = 0;
          return () => {
            const now = performance.now();
            if (now - lastTime >= 16) {
              this._handleScroll();
              lastTime = now;
            }
          };
        })();

    if (typeof eventManager !== 'undefined') {
      eventManager.on(this.container, "scroll", throttledScroll);
    } else {
      this.container.addEventListener("scroll", throttledScroll);
    }

    this.isActive = true;
  }

  /**
   * 스크롤 핸들러
   * @private
   */
  _handleScroll() {
    const scrollTop = this.container.scrollTop;
    const progress = Math.min(scrollTop / this.options.scrollThreshold, 1);
    const currentRadius = this.options.borderRadius * (1 - progress);

    this.container.style.clipPath = `inset(0 0 0 0 round ${currentRadius}px ${currentRadius}px 0 0)`;
  }

  /**
   * 효과 제거
   */
  destroy() {
    if (this.container && this.isActive) {
      this.container.style.clipPath = '';
      this.isActive = false;
    }
  }
}

// 기존 함수 호환성
function initContainerScrollEffect() {
  const container = typeof DOMUtils !== 'undefined' 
    ? DOMUtils.$(".container")
    : document.querySelector(".container");
  
  if (container) {
    const effect = new ContainerScrollEffect(container);
    effect.init();
  }
}

/**
 * 컨테이너 상단 라운드 모서리 유지
 * - .container에 clip-path를 적용해 상단 30px 라운드를 고정 유지
 * - 스크롤, 스타일 변경 등으로 덮어써져도 복원
 */
function initContainerRoundCorners() {
  // 인트로 페이지에서는 clip-path 적용 안 함
  if (document.querySelector(".wrap.intro")) return;

  const container = document.querySelector(".container");
  if (!container) return;

  const targetClipPath = "inset(0 0 0 0 round 30px 30px 0 0)";
  container.style.clipPath = targetClipPath;

  function maintainRoundCorners() {
    const currentClipPath = container.style.clipPath || "";
    if (currentClipPath !== targetClipPath && !currentClipPath.includes("30px")) {
      container.style.clipPath = targetClipPath;
    }
    requestAnimationFrame(maintainRoundCorners);
  }

  container.addEventListener(
    "scroll",
    function () {
      this.style.clipPath = targetClipPath;
    },
    { passive: true, capture: true }
  );

  const observer = new MutationObserver(function () {
    if (container.style.clipPath !== targetClipPath) {
      container.style.clipPath = targetClipPath;
    }
  });
  observer.observe(container, {
    attributes: true,
    attributeFilter: ["style"],
    attributeOldValue: true,
  });

  maintainRoundCorners();
}

// DOMContentLoaded 시 초기화
document.addEventListener("DOMContentLoaded", () => {
  initContainerRoundCorners();

});


/**
 * HTML Include 관리 클래스
 */
class HTMLIncludeManager {
  constructor(options = {}) {
    this.options = {
      selector: "[data-include-path]",
      attribute: "data-include-path",
      ...options,
    };
  }

  /**
   * HTML include 실행
   * @returns {Promise}
   */
  async include() {
    const allElements = typeof DOMUtils !== 'undefined'
      ? DOMUtils.$$(this.options.selector)
      : document.querySelectorAll(this.options.selector);

    const promises = Array.from(allElements).map(async (el) => {
      const includePath = el.dataset.includePath || el.getAttribute(this.options.attribute);
      if (!includePath) return;

      try {
        const response = await fetch(includePath);
        if (!response.ok) {
          throw new Error(`Failed to load: ${includePath} (${response.status})`);
        }

        const html = await response.text();
        el.innerHTML = html;
        el.removeAttribute(this.options.attribute);

        // 포함된 HTML에 대한 이벤트 재초기화 (필요한 경우)
        this._reinitializeEvents(el);
      } catch (error) {
        if (typeof ErrorHandler !== 'undefined') {
          ErrorHandler.handle(error, {
            context: 'HTMLIncludeManager.include',
            includePath,
          });
        } else {
          console.error(`[HTMLIncludeManager] Error loading ${includePath}:`, error);
        }
      }
    });

    await Promise.all(promises);
  }

  /**
   * 포함된 HTML의 이벤트 재초기화
   * @private
   */
  _reinitializeEvents(element) {
    // 포함된 스크립트 실행 (보안 주의)
    const scripts = element.querySelectorAll('script');
    scripts.forEach((script) => {
      const newScript = document.createElement('script');
      if (script.src) {
        newScript.src = script.src;
      } else {
        newScript.textContent = script.textContent;
      }
      script.parentNode.replaceChild(newScript, script);
    });
  }
}

// 전역 인스턴스
const htmlIncludeManager = new HTMLIncludeManager();

// 기존 함수 호환성
async function includehtml() {
  return await htmlIncludeManager.include();
}

/**
 * 사이트맵 패널 관리 클래스 (1400px 이하에서 사용)
 * - 햄버거 버튼 클릭 시 .nav-wrap에 is-sitemap-open 토글
 * - 아코디언: .menu-section 클릭 시 is-open 토글
 */
class SiteMapManager {
  constructor() {
    this.navWrap = null;
    this.btnSitemap = null;
    this.siteMap = null;
    this.isOpen = false;
    this._onKeydown = this._handleKeydown.bind(this);
  }

  init() {
    this.navWrap = document.querySelector('.nav-wrap');
    this.btnSitemap = document.querySelector('.btn-sitemap');
    this.siteMap = document.getElementById('siteMap');

    if (!this.btnSitemap || !this.siteMap || !this.navWrap) return;

    // 햄버거 버튼 클릭
    this.btnSitemap.addEventListener('click', () => this.toggle());

    // 사이트맵 내부 닫기 버튼
    const btnCloseSitemap = this.siteMap.querySelector('.site-map-header .btn-close');
    if (btnCloseSitemap) {
      btnCloseSitemap.addEventListener('click', () => this.close());
    }

    // 백드롭 클릭 시 닫기
    const backdrop = this.siteMap.querySelector('.site-map-backdrop');
    if (backdrop) {
      backdrop.addEventListener('click', () => this.close());
    }


    // 아코디언 메뉴 초기화
    this._initAccordion();

    // 현재 페이지에 해당하는 하위 메뉴 링크 active 처리
    this._setActiveLinks();

    // 리사이즈 시 1400px 초과이면 자동으로 닫기
    window.addEventListener('resize', () => {
      if (window.innerWidth > 1400 && this.isOpen) {
        this.close();
      }
    });
  }

  toggle() {
    this.isOpen ? this.close() : this.open();
  }

  open() {
    this.isOpen = true;
    this.navWrap.classList.add('is-sitemap-open');
    this.btnSitemap.setAttribute('aria-expanded', 'true');
    this.siteMap.setAttribute('aria-hidden', 'false');
    scrollManager.lock();
    document.addEventListener('keydown', this._onKeydown);
  }

  close() {
    this.isOpen = false;
    this.navWrap.classList.remove('is-sitemap-open');
    this.btnSitemap.setAttribute('aria-expanded', 'false');
    this.siteMap.setAttribute('aria-hidden', 'true');
    scrollManager.unlock();
    document.removeEventListener('keydown', this._onKeydown);
  }

  _handleKeydown(e) {
    if (e.key === 'Escape') this.close();
  }

  _setActiveLinks() {
    const currentPath = window.location.pathname;
    const currentFile = currentPath.split('/').pop();

    // 하위 메뉴 링크 + 섹션 타이틀 직링크(<a>) 모두 체크
    const links = this.siteMap.querySelectorAll('.menu-section-list a, a.menu-section-title');

    links.forEach((link) => {
      const href = link.getAttribute('href');
      if (!href || href === '#') return;

      const hrefFile = href.replace('./', '');
      const isActive = hrefFile === currentFile
        || currentPath.endsWith(hrefFile)
        || currentPath.includes(hrefFile.replace('.html', ''));

      if (isActive) {
        link.classList.add('active');
        // 하위 메뉴 링크인 경우 부모 섹션 자동 열기
        const section = link.closest('.menu-section');
        if (section && link.closest('.menu-section-list')) {
          section.classList.add('is-open');
        }
      }
    });
  }

  _initAccordion() {
    const sections = this.siteMap.querySelectorAll('.menu-section');

    sections.forEach((section) => {
      const btn = section.querySelector('.menu-section-title');
      const list = section.querySelector('.menu-section-list');
      // 하위 메뉴가 없는 섹션은 아코디언 동작 생략
      if (!btn || !list) return;

      btn.addEventListener('click', () => {
        const isOpen = section.classList.contains('is-open');

        // 다른 섹션 닫기
        sections.forEach((s) => s.classList.remove('is-open'));

        // 현재 섹션 토글
        if (!isOpen) {
          section.classList.add('is-open');
        }
      });
    });
  }
}

const siteMapManager = new SiteMapManager();

document.addEventListener('DOMContentLoaded', () => {
  siteMapManager.init();

  if (typeof LearningGuideModal !== 'undefined') {
    LearningGuideModal.init();
  }


  // 알림 더보기/접기 토글
  document.querySelectorAll('.btn-alert-toggle').forEach((btn) => {
    btn.addEventListener('click', function () {
      const item = this.closest('.alert-item');
      if (!item) return;
      const isOpen = item.classList.toggle('is-open');
      this.innerHTML = isOpen ? '접기 <span aria-hidden="true">∧</span>' : '더보기 <span aria-hidden="true">∨</span>';
    });
  });
});

// 전역으로 내보내기 (선택사항)
if (typeof window !== 'undefined') {
  window.CommonUtils = {
    ScrollManager,
    DeviceUtils,
    ModalManager,
    ContainerScrollEffect,
    HTMLIncludeManager,    
    SiteMapManager,    
    scrollManager,
    modalManager,
    htmlIncludeManager,
    siteMapManager,
    // 기존 함수들
    syncHeight,
    isMobile,
    bodyLock,
    bodyUnlock,
    popOpen,
    popClose,
    initContainerScrollEffect,
    initContainerRoundCorners,
    includehtml,
  };
}