const btnPreheat = document.getElementById('validateChauffeManuelle');
const btnProfil = document.getElementById('validateChauffeAuto');

// WebSocket pour affichage température en temps réel
function connectWS() {
  const ws = new WebSocket(`ws://${window.location.hostname}/ws`);
  ws.onopen = () => console.log('WebSocket connecté');
  ws.onclose = () => setTimeout(connectWS, 2000);
    ws.onmessage = e => {
      const tempDiv = document.getElementById('temp');
      const powerBar = document.getElementById('power-bar');
      const powerBarValue = document.getElementById('power-bar-value');
      try {
        const data = JSON.parse(e.data);
        if (tempDiv) tempDiv.textContent = `${data.temp} °C /${data.setpoint}°C`;
        if (powerBar && powerBarValue && typeof data.output !== 'undefined') {
          let pct = Math.max(0, Math.min(100, Math.round(data.output)));
          powerBar.value = pct;
          powerBarValue.textContent = pct + '%';
        }
      } catch {
        if (tempDiv) tempDiv.textContent = e.data;
      }
    };
}

connectWS();

// Fonction utilitaire pour modifier l'aspect d'un bouton
function updateButton(btn, isActive) {
  if (isActive) {
    btn.textContent = 'STOP';
    btn.className = 'stop';
  } else {
    btn.textContent = 'VALIDER';
    btn.className = 'start';
  }
}

// Initialisation : aucun mode actif
updateButton(btnPreheat, false);
updateButton(btnProfil, false);

btnPreheat.onclick = function() {
  if (btnPreheat.className === 'stop') {
    // Désactive tout
    updateButton(btnPreheat, false);
    updateButton(btnProfil, false);
    fetch('/action/stop', { method: 'POST' });
    return;
  }
  // Active le mode manuel
  const temp = document.getElementById('preheat-gauge').value;
  const params = new URLSearchParams();
  params.append('temp', temp);
  fetch('/action/preheat', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: params.toString()
  }).then(r => {
    if (r.ok){
      updateButton(btnPreheat, true);
      updateButton(btnProfil, false);
      console.log('Préchauffage lancé à ' + temp + '°C');
    }
    else console.log('Erreur serveur');
  });
};

// Chauffe profil : bouton VALIDER
btnProfil.onclick = function() {
  if (btnProfil.className === 'stop') {
    // Désactive tout
    updateButton(btnPreheat, false);
    updateButton(btnProfil, false);
    fetch('/action/stop', { method: 'POST' });
    return;
  }
  // Active le mode automatique
  const preheatTemp = document.getElementById('preheat-temp').value;
  const preheatTime = document.getElementById('preheat-time').value;
  const soakTemp = document.getElementById('soak-temp').value;
  const soakTime = document.getElementById('soak-time').value;
  const reflowTemp = document.getElementById('reflow-temp').value;
  const reflowTime = document.getElementById('reflow-time').value;
  const params = new URLSearchParams();
  params.append('preheatTemp', preheatTemp);
  params.append('preheatTime', preheatTime);
  params.append('soakTemp', soakTemp);
  params.append('soakTime', soakTime);
  params.append('reflowTemp', reflowTemp);
  params.append('reflowTime', reflowTime);
  fetch('/action/auto', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: params.toString()
  }).then(r => {
    if (r.ok){
      updateButton(btnPreheat, false);
      updateButton(btnProfil, true);
      console.log('Profil lancé');
    }
    else console.log('Erreur serveur');
  });
};

// Jauge préchauffage : affichage dynamique
document.addEventListener('DOMContentLoaded', () => {
  const gauge = document.getElementById('preheat-gauge');
  const gaugeValue = document.getElementById('preheat-gauge-value');
  const btnPreheat = document.getElementById('validateChauffeManuelle');
  if (gauge && gaugeValue) {
    gauge.oninput = function() {
      gaugeValue.textContent = this.value + '°C';
      // Si le mode manuel est actif, on met à jour le setpoint côté serveur
      if (btnPreheat && btnPreheat.className === 'stop') {
        const params = new URLSearchParams();
        params.append('temp', this.value);
        fetch('/action/preheat', {
          method: 'POST',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          body: params.toString()
        });
      }
    };
  }
});