const audio = document.getElementById('audio');
const playPauseBtn = document.getElementById('play-pause');
const progress = document.getElementById('progress');
const time = document.getElementById('time');
const vinyl = document.querySelector('.vinyl');

let isPlaying = false;

// Play / Pause button
playPauseBtn.addEventListener('click', () => {
  if (isPlaying) {
    audio.pause();
    vinyl.style.animationPlayState = 'paused';
    playPauseBtn.textContent = '▶️';
  } else {
    audio.play();
    vinyl.style.animationPlayState = 'running';
    playPauseBtn.textContent = '⏸️';
  }
  isPlaying = !isPlaying;
});

// Update progress and time
audio.addEventListener('timeupdate', () => {
  progress.value = audio.currentTime;
  updateTimeDisplay();
});

// Set duration when audio loads
audio.addEventListener('loadedmetadata', () => {
  progress.max = audio.duration;
  updateTimeDisplay();
});

// Seek audio
progress.addEventListener('input', () => {
  audio.currentTime = progress.value;
});

function updateTimeDisplay() {
  const format = (s) => {
    const m = Math.floor(s / 60);
    const ss = Math.floor(s % 60);
    return `${m}:${ss < 10 ? '0' + ss : ss}`;
  };
  time.textContent = `${format(audio.currentTime)} / ${format(audio.duration)}`;
}