const mediaFiles = {{media-files-json}};
let currentSlide = 0;

function openSlideshow(index) {
  currentSlide = index;
  showSlide(currentSlide);
  document.getElementById('slideshow-modal').classList.add('active');
  document.body.style.overflow = 'hidden';
}

function closeSlideshow() {
  document.getElementById('slideshow-modal').classList.remove('active');
  document.body.style.overflow = 'auto';

  // Pause any playing videos
  const videos = document.querySelectorAll('#slideshow-media-container video');
  videos.forEach(v => v.pause());
}

function changeSlide(direction) {
  currentSlide += direction;

  if (currentSlide >= mediaFiles.length) {
    currentSlide = 0;
  }
  if (currentSlide < 0) {
    currentSlide = mediaFiles.length - 1;
  }

  showSlide(currentSlide);
}

function showSlide(index) {
  const file = mediaFiles[index];
  const container = document.getElementById('slideshow-media-container');
  const encodedName = encodeURIComponent(file.name);

  if (file.isVideo) {
    container.innerHTML = `<video src="/download/${encodedName}" controls autoplay style="max-width: 100%; max-height: 80vh;"></video>`;
  } else {
    container.innerHTML = `<img src="/download/${encodedName}" alt="${file.name}" style="max-width: 100%; max-height: 80vh;">`;
  }

  document.getElementById('slideshow-filename').textContent = file.name;
  document.getElementById('slideshow-counter').textContent = `${index + 1} / ${mediaFiles.length}`;
}

// Keyboard navigation
document.addEventListener('keydown', (e) => {
  const modal = document.getElementById('slideshow-modal');
  if (!modal.classList.contains('active')) return;

  if (e.key === 'ArrowLeft') {
    changeSlide(-1);
  } else if (e.key === 'ArrowRight') {
    changeSlide(1);
  } else if (e.key === 'Escape') {
    closeSlideshow();
  }
});

// Close on background click
document.getElementById('slideshow-modal').addEventListener('click', (e) => {
  if (e.target.id === 'slideshow-modal') {
    closeSlideshow();
  }
});