let currentCategory = 'all';
let currentView = 'news';
let currentNewsId = null;

const content = document.getElementById('content');
const modal = document.getElementById('modal');
const modalBody = document.getElementById('modal-body');
const modalClose = document.querySelector('.modal-close');
const modalOverlay = document.querySelector('.modal-overlay');

document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
    e.target.classList.add('active');
    
    if (e.target.dataset.view === 'videos') {
      currentView = 'videos';
      loadVideos();
    } else {
      currentView = 'news';
      currentCategory = e.target.dataset.category;
      loadNews();
    }
  });
});

async function loadNews() {
  const res = await fetch('/api/news');
  let news = await res.json();
  
  if (currentCategory !== 'all') {
    news = news.filter(n => n.category === currentCategory);
  }
  
  const categoryNames = { football: 'Футбол', hockey: 'Хоккей', tennis: 'Теннис', all: 'Все новости' };
  
  content.innerHTML = `
    <h2 class="section-title">${categoryNames[currentCategory] || 'Все новости'}</h2>
    <div class="news-grid">
      ${news.map(n => `
        <div class="news-card" onclick="openNews(${n.id})">
          <img src="${n.image}" alt="${n.title}" class="news-image">
          <div class="news-content">
            <span class="news-category cat-${n.category}">${getCategoryName(n.category)}</span>
            <h3 class="news-title">${n.title}</h3>
            <p class="news-excerpt">${n.excerpt}</p>
            <div class="news-meta">
              <span>${formatDate(n.date)}</span>
              <span class="comments-badge">💬 ${n.commentsCount}</span>
            </div>
          </div>
        </div>
      `).join('')}
    </div>
  `;
}

async function loadVideos() {
  const res = await fetch('/api/videos');
  const videos = await res.json();
  
  content.innerHTML = `
    <h2 class="section-title">Видео-обзоры</h2>
    <div class="video-grid">
      ${videos.map(v => `
        <div class="video-card" onclick="playVideo('${v.title}')">
          <div style="position: relative;">
            <img src="${v.thumbnail}" alt="${v.title}" class="video-thumbnail">
            <div class="play-button">▶</div>
          </div>
          <div class="video-info">
            <span class="news-category cat-${v.category}" style="margin-bottom: 8px;">${getCategoryName(v.category)}</span>
            <h3 class="video-title">${v.title}</h3>
            <div class="video-meta">
              <span>⏱ ${v.duration}</span>
              <span>👁 ${v.views}</span>
            </div>
          </div>
        </div>
      `).join('')}
    </div>
  `;
}

async function openNews(id) {
  currentNewsId = id;
  const res = await fetch('/api/news');
  const news = await res.json();
  const item = news.find(n => n.id === id);
  
  const commentsRes = await fetch(`/api/comments?newsId=${id}`);
  const comments = await commentsRes.json();
  
  modalBody.innerHTML = `
    <h2 class="full-news-title">${item.title}</h2>
    <div class="full-news-meta">
      <span class="news-category cat-${item.category}">${getCategoryName(item.category)}</span>
      <span>📅 ${formatDate(item.date)}</span>
      <span>💬 ${comments.length} комментариев</span>
    </div>
    <img src="${item.image}" alt="${item.title}" class="full-news-image">
    <div class="full-news-content">${item.content}</div>
    
    <div class="comments-section">
      <h3 class="comments-title">Комментарии (${comments.length})</h3>
      ${comments.length > 0 ? comments.map(c => `
        <div class="comment">
          <div class="comment-author">${c.author}</div>
          <div class="comment-text">${c.text}</div>
          <div class="comment-date">${formatDate(c.date)}</div>
        </div>
      `).join('') : '<p style="color: #888;">Пока нет комментариев. Будьте первым!</p>'}
      
      <div class="comment-form">
        <h4 style="margin-bottom: 15px;">Оставить комментарий</h4>
        <textarea id="commentText" placeholder="Ваш комментарий..."></textarea>
        <input type="text" id="commentAuthor" placeholder="Ваше имя" style="width: 100%; padding: 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; color: #fff; margin-bottom: 15px; font-family: inherit;">
        <button class="btn" onclick="submitComment()">Отправить</button>
      </div>
    </div>
  `;
  
  modal.classList.add('active');
  document.body.style.overflow = 'hidden';
}

async function submitComment() {
  const text = document.getElementById('commentText').value.trim();
  const author = document.getElementById('commentAuthor').value.trim();
  
  if (!text || !author) {
    alert('Введите имя и текст комментария');
    return;
  }
  
  await fetch('/api/comments', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      newsId: currentNewsId,
      author,
      text,
      date: new Date().toISOString().slice(0, 10)
    })
  });
  
  document.getElementById('commentText').value = '';
  document.getElementById('commentAuthor').value = '';
  openNews(currentNewsId);
}

function playVideo(title) {
  modalBody.innerHTML = `
    <h2 class="full-news-title">${title}</h2>
    <div style="text-align: center; padding: 60px 20px;">
      <div style="font-size: 80px; margin-bottom: 20px;">🎬</div>
      <p style="color: #aaa; font-size: 18px;">Видео готово к воспроизведению</p>
      <p style="color: #666; margin-top: 10px;">(В реальной версии здесь будет видеоплеер)</p>
    </div>
  `;
  modal.classList.add('active');
  document.body.style.overflow = 'hidden';
}

function closeModal() {
  modal.classList.remove('active');
  document.body.style.overflow = '';
}

modalClose.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', closeModal);

function getCategoryName(cat) {
  return { football: 'Футбол', hockey: 'Хоккей', tennis: 'Теннис' }[cat] || cat;
}

function formatDate(dateStr) {
  const date = new Date(dateStr);
  return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
}

loadNews();