{% extends "base.html" %}
{% block title %}Resources · syspanel{% endblock %}
{% block heading %}Resource Monitor{% endblock %}
{% block content %}
<div class="grid" id="stat-grid">
  <div class="card stat-tile">
    <p class="card-title">CPU</p>
    <div class="stat-value" id="cpu-value"><span class="spinner"></span></div>
    <canvas class="sparkline" id="cpu-spark"></canvas>
  </div>
  <div class="card stat-tile">
    <p class="card-title">Memory</p>
    <div class="stat-value" id="mem-value"><span class="spinner"></span></div>
    <div class="stat-sub" id="mem-sub"></div>
    <canvas class="sparkline" id="mem-spark"></canvas>
  </div>
  <div class="card stat-tile">
    <p class="card-title">Network</p>
    <div class="stat-value" id="net-value" style="font-size:16px"><span class="spinner"></span></div>
    <canvas class="sparkline" id="net-spark"></canvas>
  </div>
  <div class="card stat-tile">
    <p class="card-title">Disk I/O</p>
    <div class="stat-value" id="disk-io-value" style="font-size:16px"><span class="spinner"></span></div>
    <canvas class="sparkline" id="disk-io-spark"></canvas>
  </div>
</div>

<div class="card" style="margin-top:16px">
  <p class="card-title">Disk space</p>
  <div id="disk-space-rows"><div class="loading-row"><span class="spinner"></span>Loading…</div></div>
</div>
{% endblock %}

{% block scripts %}
<script type="module">
  import { formatBytes, formatRate, connectWs } from "/static/js/core.js";
  import { drawSparkline } from "/static/js/sparkline.js";

  const HISTORY = 120;
  const cpuHist = [], memHist = [], netHist = [], diskHist = [];

  function render(sample) {
    document.getElementById("cpu-value").textContent = `${sample.cpu_percent.toFixed(0)}%`;
    document.getElementById("mem-value").textContent = `${sample.mem_percent.toFixed(0)}%`;
    document.getElementById("mem-sub").textContent =
      `${formatBytes(sample.mem_used_bytes)} / ${formatBytes(sample.mem_total_bytes)}`;
    document.getElementById("net-value").textContent =
      `↓ ${formatRate(sample.net_recv_bps)}  ↑ ${formatRate(sample.net_sent_bps)}`;
    document.getElementById("disk-io-value").textContent =
      `R ${formatRate(sample.disk_read_bps)}  W ${formatRate(sample.disk_write_bps)}`;

    cpuHist.push(sample.cpu_percent); if (cpuHist.length > HISTORY) cpuHist.shift();
    memHist.push(sample.mem_percent); if (memHist.length > HISTORY) memHist.shift();
    netHist.push(sample.net_recv_bps + sample.net_sent_bps); if (netHist.length > HISTORY) netHist.shift();
    diskHist.push(sample.disk_read_bps + sample.disk_write_bps); if (diskHist.length > HISTORY) diskHist.shift();

    drawSparkline(document.getElementById("cpu-spark"), cpuHist, { max: 100, color: "#3b6fe0" });
    drawSparkline(document.getElementById("mem-spark"), memHist, { max: 100, color: "#1f9d55" });
    drawSparkline(document.getElementById("net-spark"), netHist, { color: "#d98c0a" });
    drawSparkline(document.getElementById("disk-io-spark"), diskHist, { color: "#8b6fd6" });

    const rows = sample.disks.map((d) => `
      <div style="margin-bottom:10px">
        <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px">
          <span>${d.mountpoint} (${d.fstype})</span>
          <span class="muted">${formatBytes(d.used_bytes)} / ${formatBytes(d.total_bytes)}</span>
        </div>
        <div class="progress-bar"><div class="fill" style="width:${d.percent}%"></div></div>
      </div>`).join("");
    document.getElementById("disk-space-rows").innerHTML = rows;
  }

  // History backfill and the live WebSocket are independent: a slow/failed
  // history fetch must not delay the socket connecting or receiving data.
  fetch("/api/v1/resources/history")
    .then((r) => r.json())
    .then((history) => history.slice(-HISTORY).forEach(render))
    .catch(() => {});

  const ws = connectWs("/api/v1/ws/resources");
  ws.onmessage = (evt) => render(JSON.parse(evt.data));
</script>
{% endblock %}