/**
 * ==========================================================================
 * VIDEO PLAYER & PLAYLIST MANAGER - OPTIMIZED FOR DESKTOP & MOBILE
 * ==========================================================================
 */

window.VideoPlayer = {
  activeVideoId: null,

  isMobile: function() {
    return window.innerWidth <= 768;
  },

  init: function() {
    const countBadge = document.getElementById('videoCountBadge');
    if (countBadge) {
      countBadge.textContent = `${TVSI_DATA.videoList.length} Clips`;
    }

    this.renderPlaylist(TVSI_DATA.videoList);

    // Mặc định chọn video đầu tiên nếu chưa chọn
    if (!this.activeVideoId && TVSI_DATA.videoList.length > 0) {
      this.selectVideo(TVSI_DATA.videoList[0].id, false);
    }
  },

  // Render danh sách video bên cột playlist
  renderPlaylist: function(list) {
    const container = document.getElementById('videoItemsList');
    if (!container) return;

    container.innerHTML = list.map((item, index) => `
      <div class="video-item ${item.id === this.activeVideoId ? 'active' : ''}" 
           data-id="${item.id}"
           onclick="VideoPlayer.selectVideo('${item.id}', true)">
        <div class="video-item-thumb">
          <img src="${item.thumbnail}" alt="${item.title}" class="video-thumb-img" loading="lazy">
          <div class="video-thumb-play-icon">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
              <polygon points="5 3 19 12 5 21 5 3"></polygon>
            </svg>
          </div>
        </div>
        <div class="video-item-info">
          <div class="video-item-title">${item.title}</div>
        </div>
      </div>
    `).join('');
  },

  // Chọn video và phát
  selectVideo: function(videoId, userClicked = true) {
    const item = TVSI_DATA.videoList.find(v => v.id === videoId);
    if (!item) return;

    this.activeVideoId = videoId;

    // Cập nhật trạng thái active trong playlist
    document.querySelectorAll('.video-item').forEach(el => {
      if (el.dataset.id === videoId) {
        el.classList.add('active');
      } else {
        el.classList.remove('active');
      }
    });

    // Cập nhật tiêu đề video đang phát (gọn gàng, không dài dòng)
    const titleEl = document.getElementById('videoPlayingTitle');
    if (titleEl) titleEl.textContent = item.title;

    const descEl = document.getElementById('videoPlayingDesc');
    if (descEl) descEl.style.display = 'none';

    // Tải và phát video trên thẻ <video>
    const stageWrapper = document.getElementById('videoStageWrapper');
    if (stageWrapper) {
      stageWrapper.innerHTML = `
        <video id="mainVideoElement" class="main-video-element" controls preload="metadata" playsinline webkit-playsinline>
          <source src="${encodeURI(item.fileUrl)}" type="video/mp4">
          <p>Trình duyệt của bạn không hỗ trợ phát video HTML5.</p>
        </video>
      `;

      const videoEl = document.getElementById('mainVideoElement');
      if (videoEl) {
        videoEl.onerror = () => {
          stageWrapper.innerHTML = `
            <div class="video-mock-poster">
              <div class="video-mock-big-play">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
              </div>
              <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 8px;">${item.title}</h3>
              <div style="background: rgba(255,255,255,0.08); padding: 8px 16px; border-radius: 6px; font-size: 12px; color: #38bdf8; margin-top: 12px;">
                File nguồn: <strong>${item.fileUrl}</strong>
              </div>
            </div>
          `;
        };

        if (userClicked) {
          videoEl.play().catch(() => {
            console.log('Autoplay requires user interaction.');
          });
        }
      }
    }

    // Nếu người dùng bấm trên mobile -> cuộn lên trên đầu để xem video player
    if (userClicked && this.isMobile()) {
      const modalBody = document.querySelector('#videoModal .modal-body');
      if (modalBody) {
        modalBody.scrollTo({ top: 0, behavior: 'smooth' });
      }
      const splitLayout = document.querySelector('.video-layout-split');
      if (splitLayout) {
        splitLayout.scrollTo({ top: 0, behavior: 'smooth' });
      }
    }
  },

  // Tạm dừng video
  pause: function() {
    const videoEl = document.getElementById('mainVideoElement');
    if (videoEl) {
      videoEl.pause();
    }
  }
};