<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Telemetry Dashboard</title>
  <style>
    body { font-family:"Segoe UI", Arial, sans-serif; margin:0; padding:0; background:#0f0f0f; color:#fff; }
    header { background:#000; color:#fff; padding:1rem; text-align:center; }
    .container { display:flex; flex-wrap:wrap; padding:1rem; }
    .card {
      flex:1 1 200px; margin:1rem; padding:1.5rem; border-radius:10px;
      color:#fff; text-align:center; box-shadow:0 4px 8px rgba(255,255,255,0.1); min-width:180px;
    }
    .value { font-size:2rem; font-weight:bold; margin-top:0.5rem; }
    .label { font-size:1rem; opacity:0.9; }
    .graph-wrapper { width:100%; max-width:800px; margin:0 auto; }
    canvas { width:100% !important; height:250px !important; margin:1rem 0; }
    select, input[type=range], input[type=checkbox] { margin-left:1rem; }
    select { padding:0.3rem; background:#000; color:#fff; border:1px solid #fff; border-radius:5px; }
    .badge {
      display:inline-block; padding:0.3rem 0.6rem; margin-top:0.5rem;
      background:#22c55e; color:#000; border-radius:5px; font-size:0.9rem; font-weight:bold;
      transition:opacity 0.5s ease;
    }
    .flash { animation: flashAnim 1s ease; }
    @keyframes flashAnim { 0%{background:#22c55e;} 50%{background:#facc15;} 100%{background:#22c55e;} }
  </style>
</head>
<body>
  <header><h1>Telemetry Dashboard</h1></header>

  <!-- Snapshot cards -->
  <div class="container">
    <div class="card"><div class="label">Panel Current (A)</div><div id="panel_current" class="value">--</div></div>
    <div class="card"><div class="label">Panel Voltage (V)</div><div id="panel_voltage" class="value">--</div></div>
    <div class="card"><div class="label">Panel Power (W)</div><div id="panel_power" class="value">--</div></div>
    <div class="card"><div class="label">Battery Voltage (V)</div><div id="battery_voltage" class="value">--</div></div>
    <div class="card">
      <div class="label">Timestamp</div>
      <div id="created_at" class="value">--</div>
      <div id="updateBadge" class="badge">Last Updated</div>
    </div>
  </div>  <!-- Graph controls -->
  <div class="container">
    <label for="metricSelect">Choose Metric:</label>
    <select id="metricSelect">
      <option value="panel_power">Panel Power (W)</option>
      <option value="panel_voltage">Panel Voltage (V)</option>
      <option value="panel_current">Panel Current (A)</option>
      <option value="battery_voltage">Battery Voltage (V)</option>
    </select>

    <label for="downsampleRange">Downsample Step:</label>
    <input type="range" id="downsampleRange" min="1" max="50" value="20">
    <span id="downsampleValue">20</span>

    <label><input type="checkbox" id="avgToggle"> Moving Average</label>
    <label for="avgRange">Window:</label>
    <input type="range" id="avgRange" min="1" max="20" value="5">
    <span id="avgValue">5</span>
  </div>

  <!-- Graph -->
  <div class="container">
    <div class="graph-wrapper">
      <canvas id="telemetryChart"></canvas>
    </div>
  </div>  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
  <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
  <script>
    let downsampleStep = 20;
    let useMovingAverage = false;
    let avgWindow = 5;

    async function loadData() {
      const url = "/merged_thingspeak.csv?nocache=" + Date.now();
      return new Promise((resolve, reject) => {
        Papa.parse(url, {
          download: true, header: true, dynamicTyping: true, skipEmptyLines: true,
          complete: results => {
            const filtered = results.data.filter(r => r.created_at);
            filtered.sort((a,b) => new Date(b.created_at) - new Date(a.created_at));
            resolve(filtered);
          }, error: err => reject(err)
        });
      });
    }

    async function updateSnapshot() {
      try {
        const data = await loadData();
        if (!data.length) return;
        const latest = data[0];
        document.getElementById("panel_current").textContent = Number(latest.panel_current).toFixed(2);
        document.getElementById("panel_voltage").textContent = Number(latest.panel_voltage).toFixed(2);
        document.getElementById("panel_power").textContent   = Number(latest.panel_power).toFixed(2);
        document.getElementById("battery_voltage").textContent = Number(latest.battery_voltage).toFixed(2);
        document.getElementById("created_at").textContent    = latest.created_at;

        const badge = document.getElementById("updateBadge");
        badge.classList.remove("flash"); void badge.offsetWidth; badge.classList.add("flash");
      } catch(e) { console.error("Snapshot update failed", e); }
    }

    function movingAverage(arr, windowSize=5) {
      return arr.map((_,i) => {
        const slice = arr.slice(Math.max(0,i-windowSize+1), i+1);
        return slice.reduce((a,b)=>a+b,0)/slice.length;
      });
    }

    let chart;
    async function initGraph(metric="panel_power") {
      const data = await loadData();
      const cutoff = new Date(); cutoff.setHours(0,0,0,0);
      const recent = data.filter(d => new Date(d.created_at) >= cutoff);

      let labels = recent.map(d => d.created_at).filter((_,i) => i % downsampleStep === 0);
      let values = recent.map(d => Number(d[metric])).filter((_,i) => i % downsampleStep === 0);

      if (useMovingAverage) values = movingAverage(values, avgWindow);

      if (chart) chart.destroy();
      chart = new Chart(document.getElementById("telemetryChart"), {
        type: "line",
        data: { labels, datasets: [{
          label: metric.replace("_"," ").toUpperCase(),
          data: values,
          borderColor:"#fff",
          backgroundColor:"rgba(255,255,255,0.2)",
          fill:true,
          tension:0.3
        }] },
        options: {
          responsive:true,
          plugins:{
            title:{ display:true, text:metric.replace("_"," ").toUpperCase()+" (Today)", color:"#fff", font:{size:18} },
            legend:{ labels:{ color:"#fff" } }
          },
          scales:{
            x:{ type:"time", time:{ unit:"hour" }, title:{ display:true, text:"Time (Today)", color:"#fff" },
                grid:{ color:"#333" }, ticks:{ color:"#fff" } },
            y:{ title:{ display:true, text:metric, color:"#fff" }, grid:{ color:"#333" }, ticks:{ color:"#fff" } }
          }
        }
      });
    }

    // Event listeners
    document.getElementById("metricSelect").addEventListener("change", e => initGraph(e.target.value));
    document.getElementById("downsampleRange").addEventListener("input", e => {
      downsampleStep = parseInt(e.target.value,10);
      document.getElementById("downsampleValue").textContent = downsampleStep;
      initGraph(document.getElementById("metricSelect").value);
    });
    document.getElementById("avgToggle").addEventListener("change", e => {
      useMovingAverage = e.target.checked;
      initGraph(document.getElementById("metricSelect").value);
    });
    document.getElementById("avgRange").addEventListener("input", e => {
      avgWindow = parseInt(e.target.value,10);
      document.getElementById("avgValue").textContent = avgWindow;
      if (useMovingAverage) initGraph(document.getElementById("metricSelect").value);
    });

    // Initial load and auto-refresh
    updateSnapshot();
    setInterval(updateSnapshot, 30000); // refresh snapshot every 30s
    initGraph();
  </script>
</body>
</html>