window.addEventListener('DOMContentLoaded', () => {
    const listEl = document.getElementById('movies-list');
    const detailsEl = document.getElementById('movie-details');
  
    // Load and display movie list
    window.api.getMovies().then(movies => {
      movies.forEach(movie => {
        const item = document.createElement('div');
        item.classList.add('movie-item');
        item.innerHTML = `
          <img src="${movie.poster !== 'N/A' ? movie.poster : ''}" alt="${movie.title}" />
          <span>${movie.title}</span>
        `;
        item.addEventListener('click', () => loadDetails(movie.id));
        listEl.appendChild(item);
      });
    });
  
    // Fetch and display details + stream
    function loadDetails(id) {
      window.api.getMovieDetails(id).then(movie => {
        detailsEl.innerHTML = `
          <h2>${movie.title}</h2>
          <p><strong>Year:</strong> ${movie.year}</p>
          <p><strong>Released:</strong> ${movie.released}</p>
          <video controls src="${window.api.getStreamUrl(movie.id)}"></video>
        `;
      });
    }
  });