document.addEventListener('DOMContentLoaded', () => {

  /* =========================
     ÉLÉMENTS
  ========================= */

  const player = document.getElementById('player');
  const audio = document.getElementById('myAudio');
  const playPauseBtn = document.getElementById('playPauseBtn');
  const seekContainer = document.getElementById('seekContainer');
  const seekSlider = document.getElementById('seekSlider');
  const progressOverlay = document.getElementById('progressOverlay');
  const title = document.getElementById('title');
  const secondTitle = document.getElementById('second-title');

  if (!audio || !playPauseBtn) return;

  /* =========================
     ÉTAT
  ========================= */

  let isDragging = false;
  let animationFrameId = null;
  let isLive = player.dataset.live === 'true';

  const isMobile = /Mobi|Android/i.test(navigator.userAgent);
  playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';

  /* =========================
     LIVE / ARCHIVE MODE
  ========================= */

  function setLiveMode(live) {
    isLive = live;

    if (live) {
      seekContainer.style.display = 'none';
    } else {
      seekContainer.style.display = 'block';
    }
  }

  setLiveMode(isLive);

  /* =========================
     PROGRESSION
  ========================= */

  function updateProgress() {
    if (
      !isLive &&
      !isDragging &&
      !isNaN(audio.duration) &&
      audio.duration > 0
    ) {
      seekSlider.value = audio.currentTime;
      const percent = (audio.currentTime / audio.duration) * 100;
      progressOverlay.style.width = percent + '%';
    }

    animationFrameId = requestAnimationFrame(updateProgress);
  }

  /* =========================
     PLAY / PAUSE
  ========================= */

  playPauseBtn.addEventListener('click', () => {
    if (audio.paused) {
      audio.play();
      playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
      updateProgress();
    } else {
      audio.pause();
      playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
      cancelAnimationFrame(animationFrameId);
    }
  });

  /* =========================
     SEEK (ARCHIVES UNIQUEMENT)
  ========================= */

  seekSlider.addEventListener('input', () => {
    if (isLive) return;

    isDragging = true;
    const percent = (seekSlider.value / audio.duration) * 100;
    progressOverlay.style.width = percent + '%';
  });

  seekSlider.addEventListener('change', () => {
    if (isLive) return;

    isDragging = false;
    audio.currentTime = parseFloat(seekSlider.value);
  });

  audio.addEventListener('loadedmetadata', () => {
    if (!isLive && !isNaN(audio.duration)) {
      seekSlider.max = audio.duration;
    }
  });

  /* =========================
     CLIC SUR ARCHIVE
  ========================= */

  document.querySelectorAll('.listen-button').forEach(button => {
    button.addEventListener('click', () => {

      const newSrc = button.dataset.src;
      const newTitle = button.dataset.title;
      const newSecondTitle = button.dataset.secondTitle;

      if (!newSrc) return;

      audio.src = newSrc;
      audio.load();

      title.textContent = newTitle || '';
      secondTitle.textContent = newSecondTitle || '';

      setLiveMode(false);

      audio.play();
      playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
      updateProgress();
    });
  });

});