script.js

document.addEventListener('DOMContentLoaded', () => {
  // Add upcoming movies highlight animation
  highlightUpcomingMovies();
  
  // Handle search functionality
  setupSearch();
  
  // Handle movie card clicks
  setupMoviePlayback();
});
function setupMoviePlayback() {
  document.addEventListener('click', async (e) => {
    const movieCard = e.target.closest('.movie-poster');
    if (movieCard) {
      const movieId = movieCard.dataset.movieId;
      if (movieId) {
        try {
          // Fetch movie details
          const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=8f2b224acadeeebc64ef32b4c04919de&append_to_response=videos`);
          const movieData = await response.json();
          
          // Create video player
          createVideoPlayer(movieData);
        } catch (error) {
          console.error('Error fetching movie details:', error);
        }
      }
    }
    
    // Close player when clicking outside
    const player = document.querySelector('.video-player');
    if (player && !e.target.closest('.video-player') && !e.target.closest('.movie-poster')) {
      player.remove();
    }
  });
}
async function createVideoPlayer(movieData) {
  // Remove existing player if any
  const existingPlayer = document.querySelector('.video-player');
  if (existingPlayer) existingPlayer.remove();

  // Show loading state
  const player = document.createElement('div');
  player.className = 'video-player';
  player.innerHTML = `
    <div class="player-overlay"></div>
    <div class="player-content">
      <button class="close-player">×</button>
      <h3>${movieData.title || movieData.name}</h3>
      <p>${movieData.overview}</p>
      <div class="loading-spinner">
        <div></div><div></div><div></div><div></div>
      </div>
      <p class="loading-text">Preparing your stream...</p>
    </div>
  `;
  document.body.appendChild(player);

  // Fetch streaming URL (simulated)
  try {
    await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate loading
    
    // Find trailer video
    const trailer = movieData.videos?.results?.find(v => v.type === 'Trailer');
    const videoUrl = trailer 
      ? `https://www.youtube.com/embed/${trailer.key}?autoplay=1` 
      : '';

    player.innerHTML = `
      <div class="player-overlay"></div>
      <div class="player-content">
        <button class="close-player">×</button>
        <h3>${movieData.title || movieData.name}</h3>
        <p>${movieData.overview}</p>
        ${videoUrl ? `
          <iframe 
            width="100%" 
            height="500" 
            src="${videoUrl}" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
          </iframe>
        ` : '<p>No trailer available</p>'}
        <div class="stream-options">
          <button class="quality-btn active">HD</button>
          <button class="quality-btn">Full HD</button>
          <button class="quality-btn">4K</button>
        </div>
      </div>
    `;
document.body.appendChild(player);

  // Close button event
  player.querySelector('.close-player').addEventListener('click', () => {
    player.remove();
  });
}
function highlightUpcomingMovies() {
  // Find all upcoming movie cards and add pulse animation
  setTimeout(() => {
    const upcomingRows = document.querySelectorAll('movie-row[title="Upcoming Movies"]');
    upcomingRows.forEach(row => {
      const cards = row.shadowRoot.querySelectorAll('.movie-card');
      if (cards.length > 0) {
        // Highlight the first 3 upcoming movies
        for (let i = 0; i < Math.min(3, cards.length); i++) {
          cards[i].classList.add('upcoming-highlight');
        }
      }
    });
  }, 1000); // Wait for movies to load
}

function setupSearch() {
  // This would be connected to the navbar search functionality
  document.addEventListener('keypress', (e) => {
    if (e.target.classList.contains('search-input') && e.key === 'Enter') {
      const query = e.target.value.trim();
      if (query) {
        console.log(`Searching for: ${query}`);
        // Here you would typically redirect to search results or fetch them
        // window.location.href = `/search.html?q=${encodeURIComponent(query)}`;
      }
    }
  });
}

// Handle theme toggle
document.addEventListener('themeToggle', (e) => {
  document.body.classList.toggle('dark');
  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
});

// Check for saved theme preference
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark');
} else if (localStorage.getItem('theme') === 'light') {
  document.body.classList.add('light');
}