let videoDetails = {};
let comments = [];

async function loadVideoData() {
    try {
        const response = await fetch('src/video.json');
        const data = await response.json();
        videoDetails = {};
        data.videos.forEach(video => {
            videoDetails[video.id] = video;
        });
        comments = data.comments;
    } catch (error) {
        console.error('Failed to load video data:', error);
    }
}

function getVideoIdFromUrl() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('id');
}

function loadVideoInfo() {
  const videoId = getVideoIdFromUrl();
  const videoInfo = videoDetails[videoId];
  
  if (videoInfo) {
    document.getElementById('videoTitle').textContent = videoInfo.title;
    document.getElementById('channelName').textContent = videoInfo.channel;
    document.getElementById('channelSubscribers').textContent = videoInfo.subscribers;
    document.getElementById('likeCount').textContent = videoInfo.likes;
    document.getElementById('videoViews').textContent = videoInfo.views + ' views';
    document.getElementById('videoUploadDate').textContent = videoInfo.uploadDate;
    document.getElementById('videoDescription').textContent = videoInfo.description;
    
    const channelAvatar = document.getElementById('channelAvatar');
    if (videoInfo.channelAvatar && videoInfo.channelAvatar !== 'img/avatar/default.jpg') {
      channelAvatar.innerHTML = `<img src="${videoInfo.channelAvatar}" alt="${videoInfo.channel}">`;
    }
    
    document.title = videoInfo.title + ' - YouTube Revived';
  }
  
  renderComments();
}

function renderComments() {
  const commentsList = document.getElementById('commentsList');
  const commentsCount = document.getElementById('commentsCount');
  
  commentsCount.textContent = comments.length + ' Comments';
  commentsList.innerHTML = '';
  
  comments.forEach(comment => {
    const commentElement = document.createElement('div');
    commentElement.className = 'comment-item';
    commentElement.innerHTML = `
      <div class="comment-avatar">
        <img src="${comment.avatar}" alt="${comment.author}">
      </div>
      <div class="comment-content">
        <div class="comment-header">
          <span class="comment-author">${comment.author}</span>
          <span class="comment-time">${comment.time}</span>
        </div>
        <p class="comment-text">${comment.content}</p>
        <div class="comment-actions">
          <button class="comment-action-btn">
            <i class="fas fa-thumbs-up"></i>
          </button>
          <button class="comment-action-btn">
            <i class="fas fa-thumbs-down"></i>
          </button>
          <button class="comment-action-btn">
            <i class="fas fa-reply"></i>
          </button>
        </div>
      </div>
    `;
    commentsList.appendChild(commentElement);
  });
}

async function initVideoPage() {
    await loadVideoData();
    loadVideoInfo();
    setupEventListeners();
}

function setupEventListeners() {
  const moreBtn = document.getElementById('moreBtn');
  const moreDropdown = document.getElementById('moreDropdown');
  
  if (moreBtn && moreDropdown) {
    moreBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      moreDropdown.classList.toggle('show');
    });
    
    document.addEventListener('click', () => {
      moreDropdown.classList.remove('show');
    });
  }
  
  const descriptionToggle = document.getElementById('descriptionToggle');
  const videoDescription = document.getElementById('videoDescription');
  
  if (descriptionToggle && videoDescription) {
    descriptionToggle.addEventListener('click', () => {
      videoDescription.classList.toggle('expanded');
      const icon = descriptionToggle.querySelector('i');
      if (videoDescription.classList.contains('expanded')) {
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
      } else {
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
      }
    });
  }
  
  const subscribeBtn = document.getElementById('subscribeBtn');
  if (subscribeBtn) {
    subscribeBtn.addEventListener('click', () => {
      subscribeBtn.classList.toggle('subscribed');
      if (subscribeBtn.classList.contains('subscribed')) {
        subscribeBtn.textContent = 'Subscribed';
      } else {
        subscribeBtn.textContent = 'Subscribe';
      }
    });
  }
}

document.addEventListener('DOMContentLoaded', () => initVideoPage());