// 1. Sélection des éléments du DOM
const vinyl = document.getElementById('vinyl');
const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const currentTimeEl = document.getElementById('currentTime');
const durationEl = document.getElementById('duration');
const backwardBtn = document.getElementById('backward');
const forwardBtn = document.getElementById('forward');
const loopBtn = document.getElementById('loop');

// 2. Variables utiles
let isPlaying = false;
let isLooping = false;

// sokcet.io & arduino serial info
const socket = io();
socket.on('position', (position) => {
  console.log('recieved position', position);
});

// 3. Fonctions

// Fonction pour basculer la lecture
function togglePlay() {
  if (isPlaying) {
    audio.pause();
    vinyl.style.animationPlayState = 'paused';
  } else {
    audio.play();
    vinyl.style.animationPlayState = 'running';
  }
  isPlaying = !isPlaying;
}

// Mise à jour de la barre de progression
function updateProgress() {
  const progressPercent = (audio.currentTime / audio.duration) * 100;
  progress.value = progressPercent;
  currentTimeEl.textContent = formatTime(audio.currentTime);
}

// Fonction pour formater le temps (min:sec)
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}

// Fonction pour changer la position de lecture en cliquant sur la barre
function setProgress(e) {
  const width = progress.clientWidth;
  const clickX = e.offsetX;
  const duration = audio.duration;
  audio.currentTime = (clickX / width) * duration;
}

// Fonction pour regler la vitesse de lecture en fonction de la balle
function controlPlayback(speed) {
  if (speed > 0) {
    if (!isPlaying) {
      audio.play();
      vinyl.style.animationPlayState = 'running';
      isPlaying = true;
    }
    // Ajuste la vitesse de lecture audio (entre 0.5 et 2 par exemple)
    audio.playbackRate = Math.min(2, Math.max(0.5, speed));
  } else {
    if (isPlaying) {
      audio.pause();
      vinyl.style.animationPlayState = 'paused';
      isPlaying = false;
    }
  }
}

// 4. Événements

// Clique sur le vinyle pour basculer lecture
vinyl.addEventListener('click', togglePlay);

// Mise à jour de la barre de progression à chaque changement de temps
audio.addEventListener('timeupdate', updateProgress);

// Mise à jour de la durée du titre dès que l'audio est chargé
audio.addEventListener('loadedmetadata', () => {
  durationEl.textContent = formatTime(audio.duration);
});

// Permet de cliquer sur la barre de progression
progress.addEventListener('click', setProgress);

// Bouton reculer de 10s
backwardBtn.addEventListener('click', () => {
  audio.currentTime = Math.max(0, audio.currentTime - 10);
});

// Bouton avancer de 10s
forwardBtn.addEventListener('click', () => {
  audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
});

// Bouton pour activer/désactiver la boucle (LOOP)
loopBtn.addEventListener('click', () => {
  isLooping = !isLooping;
  loopBtn.style.backgroundColor = isLooping ? 'white' : 'transparent';
  loopBtn.style.color = isLooping ? '#18344b' : 'white';
});

// Lorsque l'audio est terminé, on répète si la boucle est activée
audio.addEventListener('ended', () => {
  if (isLooping) {
    audio.currentTime = 0;
    audio.play();
  } else {
    vinyl.style.animationPlayState = 'paused';
    isPlaying = false;
  }
});

// // server WebSocket
// const WebSocket = require('ws');
// const wss = new WebSocket.Server({ port: 3000 });

// wss.on('connection', function connection(ws) {
//   console.log('🟢 Un client WebSocket est connecté');

//   ws.on('message', function incoming(message) {
//     console.log('📨 Message reçu:', message);
//   });

//   ws.send('🔗 Connexion WebSocket établie avec le Raspberry Pi');
// });

// const socket = new WebSocket('ws://[IP_DU_PI]:8080');

// socket.onopen = () => console.log("✅ Connecté");
// socket.onmessage = e => console.log("📩 Message :", e.data);
// socket.onerror = e => console.log("❌ Erreur :", e);