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 + '%';
        }

        // Mettre à jour l'état des boutons selon le mode (manuel/auto)
        if (typeof data.auto !== 'undefined' || typeof data.manual !== 'undefined') {
          try {
            updateButton(btnPreheat, !!data.manual);
            updateButton(btnProfil, !!data.auto);
          } catch (e) {
            // ignore si les boutons ne sont pas encore disponibles
          }
        }

        // Si mode automatique, appliquer la classe 'active' sur la row correspondante
        if (typeof data.step !== 'undefined') {
          const mapping = {0: 'row-preheat', 1: 'row-soak', 2: 'row-reflow'};
          // Retirer la classe active de toutes
          Object.values(mapping).forEach(id => {
            const el = document.getElementById(id);
            if (el) el.classList.remove('active');
          });
          // Si auto activé, ajouter la classe sur la step active
          if (data.auto) {
            const target = mapping[data.step];
            if (target) {
              const el = document.getElementById(target);
              if (el) el.classList.add('active');
            }
          }
        }
      } catch {
        if (tempDiv) tempDiv.textContent = e.data;
      }
    };
}

connectWS();

// Récupérer l'état initial depuis le serveur (après reload de la page)
function refreshState() {
  fetch('/state').then(r => {
    if (!r.ok) throw new Error('no state');
    return r.json();
  }).then(data => {
    const btnPreheatEl = document.getElementById('validateChauffeManuelle');
    const btnProfilEl = document.getElementById('validateChauffeAuto');
    if (btnPreheatEl) updateButton(btnPreheatEl, !!data.manual);
    if (btnProfilEl) updateButton(btnProfilEl, !!data.auto);
    const powerBar = document.getElementById('power-bar');
    const powerBarValue = document.getElementById('power-bar-value');
    if (powerBar && typeof data.power !== 'undefined') {
      let pct = Math.max(0, Math.min(100, Math.round(data.power)));
      powerBar.value = pct;
      if (powerBarValue) powerBarValue.textContent = pct + '%';
    }
    // Ajuster la jauge de préchauffage sur la valeur de setpoint si présente
    const gauge = document.getElementById('preheat-gauge');
    const gaugeValue = document.getElementById('preheat-gauge-value');
    if (gauge && gaugeValue && typeof data.setpoint !== 'undefined') {
      gauge.value = Math.round(data.setpoint);
      gaugeValue.textContent = gauge.value + '°C';
    }

    // Gérer la classe 'active' sur les lignes (si mode auto)
    const mapping = {0: 'row-preheat', 1: 'row-soak', 2: 'row-reflow'};
    Object.values(mapping).forEach(id => {
      const el = document.getElementById(id);
      if (el) el.classList.remove('active');
    });
    if (data.auto && typeof data.step !== 'undefined') {
      const target = mapping[data.step];
      if (target) {
        const el = document.getElementById(target);
        if (el) el.classList.add('active');
      }
    }
  }).catch(err => console.log('refreshState failed', err));
}

// 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';
  }
}

// L'état initial est chargé depuis le serveur


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()
        });
      }
    };
  }
  // Après que le DOM est prêt, récupérer et appliquer l'état initial
  refreshState();
});