<!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 main">
      <?php include(__DIR__ . "/_include/_header.php") ?>
      <!-- container -->
      <div class="container">
        <div class="bg-circle">
          <ul>
            <li><div></div></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="learning-area">
          <svg
            id="gauge"
            viewBox="0 0 794 460"
            preserveAspectRatio="xMidYMid meet"
          ></svg>
        </div>
        <div class="main-contents">
          <div class="text-box">
            <span><em>홍길동</em> 선임연구원님</span>
            <div class="keyword-area">
              <button id="keywordSettingsBtn">
                나의 키워드 <i class="ico-setting"></i>
              </button>
              <div class="keyword-list" id="myKeyword">
                <label class="kw-allow" for="chk1">
                  <input type="checkbox" id="chk1" />
                  #인물
                </label>
                <label class="kw-allow" for="chk2">
                  <input type="checkbox" id="chk2" checked />
                  #소통
                </label>
                <label class="kw-allow" for="chk3">
                  <input type="checkbox" id="chk3" checked />
                  #협업
                </label>
              </div>
              <div class="keyword-list">
                <label class="kw-deny" for="chk4">
                  <input type="checkbox" id="chk4" checked />
                  #마인드셋
                </label>
                <label class="kw-deny" for="chk5">
                  <input type="checkbox" id="chk5" />
                  #웰니스
                </label>
              </div>
            </div>
            <p><em>취향저격 영상 추천</em>드려요.</p>
          </div>

          <div class="video-wrap">
            <!-- 비디오 카드 컨테이너 -->
            <div class="video-cards-container" id="videoCardsContainer"></div>
            <!-- 네비게이션 버튼 -->
            <button class="btn-prev" id="prevBtn">‹</button>
            <button class="btn-next" id="nextBtn">›</button>
            <!-- 페이지네이션 -->
            <div class="pagination" id="pagination">
              <span class="current">1</span> / 1
            </div>
          </div>

          <!-- keyword modal -->
          <?php include(__DIR__ . "/_modal/keyword.php") ?>
          <!-- // keyword modal -->

        
        </div>
      </div>

      <!-- // container -->
      <?php include(__DIR__ . "/guide.php") ?>
    </div>
    <!-- 메인 페이지 스크립트 (의존성 순서 유지하며 defer로 비동기 로드) -->
    <script src="/js/main/VideoCardRenderer.js" defer></script>
    <script src="/js/main/VideoSlider.js" defer></script>
    <script src="/js/main/Videomodalmanager.js" defer></script>
    <script src="/js/main/Gaugechart.js" defer></script>
    <script>
      // defer 스크립트가 로드된 후 실행되도록 DOMContentLoaded 사용
      document.addEventListener("DOMContentLoaded", function() {
      const videos = [
        {
          id: 1,
          url: "KE_MeQZgnPM",
          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: "IeF8r0ycgVg",
          category: "리더십",
          subcate: "피플스토리",
          bookmark: false,
          title: "꼰대가 되지 않고 건설적인 피드백을 하는 법",
          picker: "",
          type: "onboarding",
          keywords: ["마인드셋", "자기개발"],
          gauge: 35,
        },
        {
          id: 4,
          url: "KMZXMI0QPoA",
          category: "리더십",
          subcate: "피플스토리",
          bookmark: false,
          title: "[경영 추천도서] 팀장이 처음이신가요? | 팀장 리더십 수업",
          picker: "",
          type: "learning",
          keywords: ["마인드셋", "중간관리자"],
          gauge: 0,
        },
        {
          id: 5,
          url: "CRKwszz6l2M",
          category: "인사이트",
          subcate: "피플스토리",
          bookmark: false,
          title: "프로와 아마추어를 가르는 차이점!",
          picker: "",
          type: "main",
          keywords: ["소통", "건강"],
          gauge: 0,
        },
        {
          id: 6,
          url: "Gf5WoZ3BmgI",
          category: "비즈트렌드",
          subcate: "성공예감",
          bookmark: false,
          title: "01/16 - 트럼프 반도체 관세…한국 기업 불똥?",
          picker: "",
          type: "main",
          keywords: ["팔로우십", "AI"],
          gauge: 0,
        },
        {
          id: 7,
          url: "KE_MeQZgnPM",
          category: "리더십",
          subcate: "행복과 건강",
          bookmark: false,
          title: "정선근 교수가 알려주는 목디스크 지식",
          picker: "홍길동",
          type: "main",
          keywords: ["소통", "건강"],
          gauge: 8,
        },
        {
          id: 8,
          url: "a2l1uZfsRi0",
          category: "인사이트",
          subcate: "행복과 건강",
          bookmark: false,
          title: "회계를 조금이라도 이해하면 인생이 달라지는 이유",
          picker: "",
          type: "main",
          keywords: ["소통", "코칭"],
          gauge: 80,
        },
        {
          id: 9,
          url: "IeF8r0ycgVg",
          category: "리더십",
          subcate: "피플스토리",
          bookmark: false,
          title: "꼰대가 되지 않고 건설적인 피드백을 하는 법",
          picker: "",
          type: "main",
          keywords: ["마인드셋", "자기개발"],
          gauge: 35,
        },
      ];

      // 렌더러 초기화
      const renderer = new VideoCardRenderer({
        animationDelay: 50,
      });

      // 슬라이더 초기화
      const slider = new VideoSlider({
        videos: videos,
        videosPerPage: 6,
        onPageChange: (pageVideos) => {
          renderer.renderCards(pageVideos);
        },
      });

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

      // 슬라이더 초기화 (첫 페이지 렌더링 포함)
      slider.init();
      renderer.renderCards(slider.getCurrentPageVideos());

      // 모달 매니저 초기화 (카드 클릭 이벤트 등록)
      modalManager.init();

      // ========================================
      // 게이지 차트 초기화
      // ========================================

      const gauge = new GaugeChart({
        size: 832,
        strokeWidth: 31,
        maxValue: 50,
        padding: 20,
        outerTextOffset: 6,
        innerTextOffset: 35,
        dotRadius: 7,
      });

      // 게이지 초기화
      gauge.init();

      // 예시: 학습 시간 업데이트 (35분)
      gauge.update(25);

      // ========================================
      // MultiGuide 초기화 (게이지 초기화 후)
      // ========================================
      // 게이지와 모든 요소가 준비된 후 MultiGuide 초기화
      setTimeout(() => {
        console.log("[index_guide] MultiGuide 초기화 시도...");
        console.log("[index_guide] window.initMultiGuide 존재:", typeof window.initMultiGuide);
        console.log("[index_guide] .guide-wrap 존재:", document.querySelector(".guide-wrap") !== null);
        
        if (window.initMultiGuide) {
          // guide.html에서 정의된 guideTargets 사용
          const targets = window.guideTargets || [];
          if (targets.length > 0) {
            window.initMultiGuide(targets);
          } else {
            console.warn("[index_guide] guideTargets가 정의되지 않았습니다.");
          }
        } else {
          console.warn("[index_guide] ❌ MultiGuide 초기화 함수를 찾을 수 없습니다.");
          console.warn("[index_guide] guide.html이 제대로 include되었는지 확인하세요.");
        }
      }, 1000);

      // ========================================
      // 키워드 모달 기능
      // ========================================

      // DOM 요소
      const modal = document.getElementById("keywordModal");
      const settingsBtn = document.getElementById("keywordSettingsBtn");
      const checkIcon = modal.querySelector(".modal-header .btn-close");

      // 현재 선택된 키워드 저장
      let allowKeywords = ["인물", "소통", "협업"]; // 초기값
      const maxAllowKeywords = 3;

      // 모달 체크박스 상태 동기화
      function syncModalCheckboxes() {
        const modalCheckboxes = modal.querySelectorAll(
          ".keyword-tag input[type='checkbox']"
        );
        modalCheckboxes.forEach((checkbox) => {
          const label = checkbox.closest("label");
          if (label) {
            const keywordText = label.textContent
              .trim()
              .replace("#", "")
              .trim();
            checkbox.checked = allowKeywords.includes(keywordText);
          }
        });
      }

      // 체크박스 활성화/비활성화 상태 업데이트
      function updateCheckboxStates() {
        const modalCheckboxes = modal.querySelectorAll(
          ".keyword-tag input[type='checkbox']"
        );
        const isMaxReached = allowKeywords.length >= maxAllowKeywords;

        modalCheckboxes.forEach((checkbox) => {
          const label = checkbox.closest("label");
          if (label) {
            const keywordText = label.textContent
              .trim()
              .replace("#", "")
              .trim();
            const isSelected = allowKeywords.includes(keywordText);

            if (!isSelected && isMaxReached) {
              checkbox.disabled = true;
              label.style.opacity = "0.5";
              label.style.cursor = "not-allowed";
            } else {
              checkbox.disabled = false;
              label.style.opacity = "1";
              label.style.cursor = "pointer";
            }
          }
        });
      }

      // 메인 화면 키워드 표시 업데이트
      function updateMainKeywordDisplay() {
        const allowArea = document.querySelector("#myKeyword");
        if (allowArea) {
          allowArea.innerHTML = "";

          allowKeywords.forEach((keyword, index) => {
            const label = document.createElement("label");
            label.className = "kw-allow";
            label.setAttribute("for", `chk_allow_${index}`);

            const checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.id = `chk_allow_${index}`;
            checkbox.checked = true;

            const text = document.createTextNode(`#${keyword}`);

            label.appendChild(checkbox);
            label.appendChild(text);
            allowArea.appendChild(label);
          });
        }
      }

      // 최대 개수 초과 메시지
      function showLimitMessage() {
        const modalHeader = modal.querySelector(".modal-header");
        if (modalHeader) {
          const existingMsg = modalHeader.querySelector(".limit-message");
          if (existingMsg) return;

          const message = document.createElement("span");
          message.className = "limit-message";
          message.textContent = ` (최대 ${maxAllowKeywords}개까지 선택 가능)`;
          message.style.color = "#ff4444";
          message.style.fontSize = "14px";
          message.style.marginLeft = "10px";
          modalHeader.appendChild(message);

          setTimeout(() => {
            message.remove();
          }, 2000);
        }
      }

      // 모달 팝업 열기
      settingsBtn.onclick = () => {
        syncModalCheckboxes();
        updateCheckboxStates();
        modal.style.opacity = "";
        modal.style.display = "block";
      };

      // 모달 외부 클릭 시 닫기
      modal.onclick = (e) => {
        if (e.target === modal) {
          modal.style.display = "none";
          updateMainKeywordDisplay();
        }
      };

      // 체크 아이콘 클릭 시 닫기
      if (checkIcon) {
        checkIcon.onclick = () => {
          modal.style.display = "none";
          updateMainKeywordDisplay();
        };
      }

      // 모달 내 체크박스 이벤트
      const modalCheckboxes = modal.querySelectorAll(
        ".keyword-tag input[type='checkbox']"
      );
      modalCheckboxes.forEach((checkbox) => {
        checkbox.onchange = () => {
          const label = checkbox.closest("label");
          if (label) {
            const keywordText = label.textContent
              .trim()
              .replace("#", "")
              .trim();

            // 최대 개수 체크
            if (checkbox.checked && allowKeywords.length >= maxAllowKeywords) {
              checkbox.checked = false;
              showLimitMessage();
              return;
            }

            if (!checkbox.disabled) {
              // 키워드 추가/제거
              if (checkbox.checked) {
                if (!allowKeywords.includes(keywordText)) {
                  allowKeywords.push(keywordText);
                }
              } else {
                allowKeywords = allowKeywords.filter((k) => k !== keywordText);
              }
              updateCheckboxStates();
            }
          }
        };
      });
      }); // DOMContentLoaded 종료
    </script>
  </body>
</html>
