let chart = null;
document.addEventListener("DOMContentLoaded", init);

function showChartError() {

}

async function loadData() {
  const start = document.getElementById("date-start").value;
  const end = document.getElementById("date-end").value;
  const granularity = document.getElementById("granularity").value;
  const device_eui = document.getElementById("device").value;

  if (!device_eui || !start || !end) return;

  try {
    const points = await fetchConsumption({
      device_eui: device_eui,
      start: start,
      end: end,
      granularity: granularity,
    });
    
    if (chart) { chart.destroy(); }
    
    chart = renderChart(points, granularity);
    updateKPIs(points);
    
  } catch (err) {
    if (chart) { chart.destroy(); }
    showMessage("Impossible de charger les données : " + err.message);
    updateKPIs(null);
  }
}

function updateKPIs(points) {
  const totalDisplay = document.getElementById("kpi-total");
  const avgDisplay = document.getElementById("kpi-avg");
  const countDisplay = document.getElementById("kpi-count");

  if (!points || points.length === 0) {
    totalDisplay.textContent = "-";
    avgDisplay.textContent = "-";
    countDisplay.textContent = "-";
    return;
  }

  const totalValue = points.reduce((acc, p) => acc + p.delta_m3, 0);
  const avgValue = totalValue / points.length;

  totalDisplay.textContent = totalValue.toFixed(3);
  avgDisplay.textContent = avgValue.toFixed(3);
  countDisplay.textContent = points.length;
}

async function loadDevices() {
  const selectDeviceElmt = document.getElementById("device");

  try {
    const devices = await fetchDevices();
    if (!devices.length) {
      selectDeviceElmt.disabled = true;
      selectDeviceElmt.add(new Option("Aucun appareil disponible", ""));
      return;
    }

    devices.forEach((device) => {
      selectDeviceElmt.add(new Option(device.device_eui));
    });

    selectDeviceElmt.value = devices[0].device_eui;

  } catch(err) {
    selectDeviceElmt.disabled = true;
    selectDeviceElmt.add(new Option("Erreur de chargement", ""));
    console.error("loadDevices :", err.message);
  }
}

async function init() {
  let start = new Date();
  start.setDate(start.getDate() - 7);
  const end = new Date();

  document.getElementById("date-start").valueAsDate = start;
  document.getElementById("date-end").valueAsDate = end;
  document.getElementById("btn-refresh").addEventListener("click", loadData);

  await loadDevices();

  const device_eui = document.getElementById("device").value;
  if (device_eui) await loadData();
}