// popup.js

// 페이지 로드 시 초기 실행
$(function () {
  tooltip(); // 팝업 열기/닫기 제어
  accessibilityFocus(); // 접근성 포커스 이동 제어
});

// =========================================
// 1️⃣ 접근성 포커스 강제 이동
// -----------------------------------------
function accessibilityFocus() {
  $(document).on('keydown', '[data-focus-prev], [data-focus-next]', function (e) {
    const next = $(e.target).attr('data-focus-next');
    const prev = $(e.target).attr('data-focus-prev');
    const target = next || prev || false;

    // Tab 키(9) 외에는 작동 X
    if (!target || e.keyCode !== 9) return;

    // Shift+Tab : 이전 / Tab : 다음
    if ((!e.shiftKey && !!next) || (e.shiftKey && !!prev)) {
      $('[data-focus="' + target + '"]').focus();
    }
  });
}

// =========================================
// 2️⃣ Tooltip(팝업) 열기/닫기 제어
// -----------------------------------------
function tooltip() {
  const openBtn = '[data-tooltip]'; // 팝업 열기 버튼 (data-tooltip="팝업ID")
  const closeBtn = '.tooltip-close'; // 팝업 닫기 버튼
  const mask = '.mask'; // 배경 마스크 (dimmed)

  // 👉 열기 대상 찾기 함수
  function getTarget(el) {
    if ($(el).is('[data-tooltip]')) {
      return $(el).attr('data-tooltip');
    } else {
      return $(el).closest('[data-tooltip]').attr('data-tooltip');
    }
  }

  // 👉 팝업 열기 함수
  function openPopup(id) {
    const $popup = $('[data-tooltip-con="' + id + '"]');
    const $mask = $(mask);

    if (!$popup.length) return;

    $popup.show().attr('aria-hidden', 'false').focus();
    $mask.show();
    $('body').css('overflow', 'hidden');

    // 가운데 정렬
    centerPopup($popup);

    // 닫기 버튼에 현재 활성 팝업 ID 저장
    $popup.find(closeBtn).data('activeTarget', id);
  }

  // 👉 팝업 닫기 함수
  function closePopup(id) {
    const $popup = $('[data-tooltip-con="' + id + '"]');
    const $mask = $(mask);

    if (!$popup.length) return;

    $popup.hide().attr('aria-hidden', 'true');
    $('[data-tooltip="' + id + '"]').focus();
    $mask.hide();
    $('body').css('overflow', 'inherit');
  }

  // 👉 팝업 열기 이벤트
  $(document).on('click', openBtn, function (e) {
    e.preventDefault();
    const id = getTarget(e.target);
    openPopup(id);
  });

  // 👉 팝업 닫기 이벤트
  $(document).on('click', closeBtn, function (e) {
    e.preventDefault();
    const id = $(this).data('activeTarget');
    closePopup(id);
  });

  // ESC 키로 닫기
  $(document).on('keydown', function (e) {
    if (e.key === 'Escape') {
      const $popup = $('[data-tooltip-con]:visible');
      if ($popup.length) {
        const id = $popup.attr('data-tooltip-con');
        closePopup(id);
      }
    }
  });
}

// =========================================
// 3️⃣ 팝업 중앙정렬 (리사이즈 대응)
// -----------------------------------------
function centerPopup($popup) {
  const popW = $popup.outerWidth();
  const popH = $popup.outerHeight();
  const winW = $(window).outerWidth();
  const winH = $(window).outerHeight();

  const left = (winW - popW) / 2;
  const top = (winH - popH) / 2;

  $popup.css({
    left: `${left}px`,
    top: `${top}px`,
    position: 'fixed'
  });
}

// 리사이즈 시 팝업 위치 재조정
$(window).on('resize', function () {
  const $visiblePopup = $('[data-tooltip-con]:visible');
  if ($visiblePopup.length) {
    centerPopup($visiblePopup);
  }
});