<!doctype html>
<html lang="ko">
  <head>
    <?php include(__DIR__ . "/_include/_head.php") ?>
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
  </head>
  <body>
    <div class="wrap"></div>

    <!-- 메인 페이지 스크립트 (의존성 순서 유지하며 defer로 비동기 로드) -->
    <script src="/js/main/Videomodalmanager.js" defer></script>
    <script>
      // defer 스크립트가 로드된 후 실행되도록 DOMContentLoaded 사용
      document.addEventListener("DOMContentLoaded", function() {
      const videos = [
        {
          id: 1,
          url: "Qjig6SHwZyE", 
          category: "리더십",
          subcate: "코칭",
          bookmark: true,
          title: "목표관리, 성과관리의 차이? 더 중요한 것은?",
          picker: "홍길동",
          type: "main",
          keywords: ["소통", "건강"],
          gauge: 8,
        },
        {
          id: 2,
          url: "a2l1uZfsRi0",
          category: "인사이트",
          subcate: "경제와사회",
          bookmark: false,
          title: "회계를 조금이라도 이해하면 인생이 달라지는 이유",
          picker: "",
          type: "comment",
          keywords: ["소통", "코칭"],
          gauge: 80,
        },
        {
          id: 3,
          url: "8MugD6Cwhl8",
          category: "온보딩",
          subcate: "축적의 시간",
          bookmark: false,
          title: "축적의 시간 - 착각의 시간",
          picker: "",
          type: "onboarding",
          keywords: ["마인드셋", "자기개발"],
          gauge: 35,
        },
        {
          id: 4,
          url: "Py7nutVN53s",
          category: "법정교육",
          subcate: "", 
          title: "개인정보보호",
          type: "learning",
          keywords: ["안전", "중간관리자"],
        },
      ];

      // 비디오 모달 매니저 초기화
      const modalManager = new VideoModalManager({
        videos: videos,
      });

      // 모달 매니저 초기화
      modalManager.init();

      // ========================================
      // URL 파라미터로 모달 자동 오픈
      // ========================================

      // VideoModalManager는 각 비디오의 type에 따라 자동으로 다른 모달 HTML을 로드합니다:
      // ?video=1 (type: "main")       → ./_modal/video.html
      // ?video=2 (type: "comment")    → ./_modal/video-comment.html
      // ?video=3 (type: "onboarding") → ./_modal/video-onboarding.html
      // ?video=4 (type: "learning")   → ./_modal/video-learning.html
      // ?keyword=true                 → ./_modal/keyword.html

      // 키워드 모달 Ajax 로드 함수
      async function loadKeywordModal() {
        try {
          const response = await fetch("./_modal/keyword.html");
          if (!response.ok) {
            throw new Error("키워드 모달 로드 실패");
          }

          const modalHTML = await response.text();
          const parser = new DOMParser();
          const doc = parser.parseFromString(modalHTML, "text/html");
          const modalElement = doc.querySelector(".modal.keyword");

          if (!modalElement) {
            throw new Error("키워드 모달 요소를 찾을 수 없습니다");
          }

          // DOM에 추가
          document.body.appendChild(modalElement);

          // 모달 표시
          setTimeout(() => {
            modalElement.style.display = "block";
          }, 50);

          // 닫기 이벤트 설정
          setupKeywordModalCloseEvents(modalElement);
        } catch (error) {
          console.error("키워드 모달 로드 오류:", error);
          alert("키워드 모달을 로드하는 중 오류가 발생했습니다.");
        }
      }

      // 키워드 모달 닫기 이벤트 (ModalUtils 활용)
      function setupKeywordModalCloseEvents(modal) {
        // ModalUtils를 사용하여 공통 닫기 이벤트 설정
        ModalUtils.setupCloseEvents(modal, {
          closeSelector: ".ico-check", // 키워드 모달은 .ico-check를 닫기 버튼으로 사용
          onClose: () => {
            ModalUtils.remove(modal, { duration: 300 });
          },
        });
      }

      function checkURLParamsAndOpenModal() {
        const urlParams = new URLSearchParams(window.location.search);

        // 비디오 모달 오픈: ?video=1
        const videoId = urlParams.get("video");
        if (videoId) {
          const id = parseInt(videoId);
          if (!isNaN(id)) {
            const video = videos.find((v) => v.id === id);
            if (video) {
              console.log(
                `비디오 모달 자동 오픈: ID ${id}, Type: ${video.type}`
              );
              setTimeout(() => {
                modalManager.loadVideoModal(id);
              }, 500);
            } else {
              console.error(`비디오 ID ${id}를 찾을 수 없습니다.`);
            }
            return; // 비디오 모달 열면 종료
          }
        }

        // 키워드 모달 오픈: ?keyword=true
        const openKeyword = urlParams.get("keyword");
        if (openKeyword === "true") {
          console.log("키워드 모달 자동 오픈 (Ajax 로드)");
          setTimeout(() => {
            loadKeywordModal();
          }, 500);
          return; // 키워드 모달 열면 종료
        }
      }

      // 페이지 로드 완료 후 URL 파라미터 체크
      window.addEventListener("DOMContentLoaded", checkURLParamsAndOpenModal);
      }); // DOMContentLoaded 종료
    </script>
  </body>
</html>
