/**
 * videos-loader.js — Guides 섹션 5개 YouTube 영상 동적 로더
 * 데이터: _data/videos.json
 * 적용: 페이지 로드 시 자동으로 .guides-grid 안의 카드를 채움
 *
 * CMS 연동: admin에서 videos.json 수정 → 배포 시 자동 반영
 */
(function () {
  'use strict';

  function pathPrefix() {
    // /web/foo.html 등 하위 경로면 ../로 보정
    var p = location.pathname;
    if (p.indexOf('/web/') === 0) return '../';
    return '';
  }

  async function loadVideos() {
    try {
      var res = await fetch(pathPrefix() + '_data/videos.json', { cache: 'no-store' });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      return await res.json();
    } catch (e) {
      console.warn('[videos-loader] fetch fail, fallback to inline data:', e);
      return null;
    }
  }

  function setThumb(el, thumbPath) {
    if (!el || !thumbPath) return;
    el.style.backgroundImage = "url('" + pathPrefix() + thumbPath + "')";
    el.style.backgroundSize = 'cover';
    el.style.backgroundPosition = 'center';
  }

  function applyVideos(data) {
    if (!data || !Array.isArray(data.videos)) return;

    var bySlot = {};
    data.videos.forEach(function (v) { bySlot[v.slot] = v; });

    // Featured (큰 카드)
    var feat = document.querySelector('.guide-feat');
    if (feat && bySlot.featured) {
      var v = bySlot.featured;
      feat.setAttribute('href', v.watchUrl);
      feat.setAttribute('data-video-id', v.id);
      setThumb(feat, v.thumb);
      var tag = feat.querySelector('.mono');
      if (tag && v.tag) tag.textContent = v.tag;
      var meta = feat.querySelector('.meta');
      if (meta) meta.textContent = (v.category || '') + ' · ' + (v.duration || '') + ' · Watch on YouTube';
    }

    // Sub 4개
    var cards = document.querySelectorAll('.guide-card');
    cards.forEach(function (card, i) {
      var slot = String(i + 2).padStart(2, '0'); // 02, 03, 04, 05
      var v = bySlot[slot];
      if (!v) return;
      card.setAttribute('href', v.watchUrl);
      card.setAttribute('data-video-id', v.id);
      setThumb(card, v.thumb);
      var ch = card.querySelector('.ch');
      if (ch) ch.textContent = (v.category || '') + ' · ' + (v.duration || '');
    });
  }

  function init() {
    loadVideos().then(function (data) {
      if (data) applyVideos(data);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();