(async () => {
  const video = document.getElementById('background');
  const fadeOverlay = document.getElementById('fadeOverlay');
  const toggleBgBtn = document.getElementById('toggleBg');
  const FADE_DURATION = 1000;

  const resp = await fetch('/videos/videos.json');
  if (!resp.ok) {
    console.error('Failed to load videos.json');
    return;
  }
  const videos = await resp.json();

  let lastVideo = null;
  let bgEnabled = true;
  let loopCanceled = false;

  function pickRandomVideo() {
    if (videos.length === 1) return videos[0];
    let choice;
    do {
      choice = videos[Math.floor(Math.random() * videos.length)];
    } while (choice === lastVideo);
    lastVideo = choice;
    return choice;
  }

  async function playVideoLoop() {
    while (!loopCanceled) {
      const nextVideo = pickRandomVideo();
      video.src = `/videos/${nextVideo}`;
      video.style.opacity = '0';
      fadeOverlay.style.opacity = '1';

      await new Promise(r => setTimeout(r, FADE_DURATION));

      video.load();
      await new Promise(resolve => {
        video.onloadedmetadata = () => resolve();
      });

      if (loopCanceled) break;

      video.currentTime = 0;
      video.play().catch(console.error);

      video.style.opacity = '1';
      fadeOverlay.style.opacity = '0';

      await new Promise(r => setTimeout(r, (video.duration * 1000) - (2 * FADE_DURATION)));

      fadeOverlay.style.opacity = '1';
      video.style.opacity = '0';

      await new Promise(r => setTimeout(r, FADE_DURATION));
    }
  }

  toggleBgBtn.addEventListener('click', (e) => {
    e.preventDefault();
    bgEnabled = !bgEnabled;
    loopCanceled = !bgEnabled;

    if (!bgEnabled) {
      video.pause();
      video.style.display = 'none';
      fadeOverlay.style.display = 'none';
      toggleBgBtn.textContent = 'background (off)';
    } else {
      video.style.display = '';
      fadeOverlay.style.display = '';
      toggleBgBtn.textContent = 'background (on)';
      playVideoLoop();
    }
  });

  playVideoLoop();
})();