{% extends "base.html" %}
{% block title %}Health — SimpleAudit Studio{% endblock %}
{% block head %}
<style>
  /* Every health card is the same height; long content scrolls inside the card. */
  .hcard { height: 11rem; display: flex; flex-direction: column; }
  .hcard > * { flex-shrink: 0; }
  .hcard > .hcard-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* The model-endpoints card holds a list: it scrolls, while its detail line stays one line. */
  [data-component="model_endpoints"] > [data-detail] { flex: 0 0 auto; }
</style>
{% endblock %}
{% block content %}
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
  <h1 class="text-lg font-semibold text-gray-100">System Health</h1>
  <div class="flex flex-wrap items-center gap-3">
    <span id="overall-badge" class="px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800 text-gray-400">…</span>
    <span id="last-updated" class="text-xs text-gray-600"></span>
    <div class="relative group/refresh">
      <button id="refresh-btn" title="Auto-refresh interval" aria-label="Auto-refresh interval" class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-400 hover:text-gray-200 hover:border-gray-600 transition-colors">
        <span class="relative inline-flex items-center justify-center w-6 h-6">
          <svg class="w-6 h-6 -rotate-90" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" fill="none" stroke="#34d399" stroke-opacity="0.15" stroke-width="2"/>
            <circle id="refresh-ring" cx="12" cy="12" r="10" fill="none" stroke="#34d399" stroke-width="2" stroke-linecap="round" stroke-dasharray="62.83" stroke-dashoffset="0"/>
          </svg>
          <svg class="absolute w-3 h-3 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
        </span>
        <span id="refresh-label" class="text-emerald-400 font-medium">30s</span>
      </button>
      <div id="refresh-menu" class="hidden absolute right-0 top-full mt-1 w-36 bg-surface-raised border border-gray-700 rounded-lg shadow-xl z-50 py-1">
        <button data-sec="10" class="refresh-opt w-full text-left px-3 py-1.5 text-xs text-gray-400 hover:bg-surface-overlay hover:text-gray-200">Every 10 seconds</button>
        <button data-sec="30" class="refresh-opt w-full text-left px-3 py-1.5 text-xs text-gray-400 hover:bg-surface-overlay hover:text-gray-200">Every 30 seconds</button>
        <button data-sec="60" class="refresh-opt w-full text-left px-3 py-1.5 text-xs text-gray-400 hover:bg-surface-overlay hover:text-gray-200">Every 60 seconds</button>
        <hr class="my-1 border-gray-700/50">
        <div class="px-3 py-1.5 flex items-center gap-2">
          <input id="refresh-custom" type="number" min="10" max="3600" placeholder="sec"
                 class="w-full bg-surface-overlay border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 focus:outline-none focus:ring-1 focus:ring-accent/50">
          <button id="refresh-custom-set" class="text-xs text-accent hover:text-white whitespace-nowrap">Set</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Component status grid -->
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-3">Components</h2>
<div id="component-grid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 mb-8">
  {% for name, comp in health.components.items %}
  {# min-w-0: a long detail or model name must not widen the grid column. #}
  <div class="hcard bg-surface-raised rounded-xl border border-gray-800 p-4 min-w-0 {% if name == "model_endpoints" %}col-span-2 md:col-span-1{% endif %}" data-component="{{ name }}">
    <div class="flex items-center justify-between gap-2 mb-2">
      <span class="text-sm font-medium text-gray-200 capitalize truncate">{% if name == "model_endpoints" %}Model endpoints{% else %}{{ name }}{% endif %}</span>
      <span class="status-dot w-2.5 h-2.5 rounded-full bg-gray-600 shrink-0" data-dot></span>
    </div>
    <p class="hcard-scroll text-xs text-gray-500 min-h-[1rem] break-words" data-detail title="{{ comp.detail|default:'' }}">{{ comp.detail|default:"" }}</p>
    <p class="text-xs text-gray-600 mt-1" data-latency>{% if comp.latency_ms is not None %}{{ comp.latency_ms }} ms{% endif %}</p>
    {% if name == "engine" %}
    <div class="mt-1 space-y-0.5">
      <p class="text-xs text-gray-500 truncate" data-studio-title title="SimpleAudit Studio {{ comp.studio.version|default:'?' }}{% if comp.studio.commit %} · {{ comp.studio.commit }}{% endif %}"><span class="text-gray-400 font-medium">Studio</span>&nbsp;{{ comp.studio.version|default:"?" }}{% if comp.studio.commit %} · {{ comp.studio.commit|slice:":8" }}{% endif %}</p>
      <p class="text-xs text-gray-500 truncate" data-engine-title title="SimpleAudit engine {{ comp.version|default:'?' }}{% if comp.commit %} · {{ comp.commit }}{% endif %}"><span class="text-gray-400 font-medium">SimpleAudit</span>&nbsp;{{ comp.version|default:"?" }}{% if comp.commit %} · {{ comp.commit|slice:":8" }}{% endif %}</p>
    </div>
    {% endif %}
    {% if name == "model_endpoints" %}
    <div class="hcard-scroll mt-2 space-y-2 pr-1" data-endpoints>
      {% for group in comp.groups %}
      <div data-group="{{ group.name }}">
        <p class="text-[10px] font-medium text-gray-500 uppercase tracking-wide mb-1 truncate" title="{{ group.name }} · {{ group.provider }}">{{ group.name }} <span class="text-gray-600 normal-case">· {{ group.provider }}</span></p>
        <ul class="space-y-0.5">
          {% for m in group.models %}
          <li class="flex items-center gap-2 text-xs min-w-0">
            <span class="w-2 h-2 rounded-full shrink-0 bg-gray-600"></span>
            <span class="text-gray-400 truncate flex-1 min-w-0" title="{{ m.display_name }}">{{ m.display_name }}</span>
            <span class="text-gray-600 shrink-0">{{ m.status }}</span>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>

<!-- Resource & bottleneck panel -->
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-3">Resources &amp; Throughput</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
  <!-- Memory -->
  <div class="hcard bg-surface-raised rounded-xl border border-gray-800 p-4 min-w-0" data-resource="memory">
    <div class="flex items-center justify-between mb-2">
      <span class="text-sm font-medium text-gray-200">Memory</span>
      <span class="status-dot w-2.5 h-2.5 rounded-full bg-gray-600" data-dot></span>
    </div>
    <div class="bar-track h-1.5 rounded-full bg-gray-800 mb-2"><div class="bar-fill h-1.5 rounded-full bg-accent" data-bar style="width:0%"></div></div>
    <p class="text-xs text-gray-500 break-words" data-summary>—</p>
    <p class="text-xs text-gray-600 mt-1 hcard-scroll break-words" data-sub></p>
  </div>
  <!-- Disk -->
  <div class="hcard bg-surface-raised rounded-xl border border-gray-800 p-4 min-w-0" data-resource="disk">
    <div class="flex items-center justify-between mb-2">
      <span class="text-sm font-medium text-gray-200">Disk</span>
      <span class="status-dot w-2.5 h-2.5 rounded-full bg-gray-600" data-dot></span>
    </div>
    <div class="bar-track h-1.5 rounded-full bg-gray-800 mb-2"><div class="bar-fill h-1.5 rounded-full bg-accent" data-bar style="width:0%"></div></div>
    <p class="text-xs text-gray-500 break-words" data-summary>—</p>
    <p class="text-xs text-gray-600 mt-1 hcard-scroll break-words" data-sub></p>
  </div>
  <!-- CPU -->
  <div class="hcard bg-surface-raised rounded-xl border border-gray-800 p-4 min-w-0" data-resource="cpu">
    <div class="flex items-center justify-between mb-2">
      <span class="text-sm font-medium text-gray-200">CPU Load</span>
      <span class="status-dot w-2.5 h-2.5 rounded-full bg-gray-600" data-dot></span>
    </div>
    <p class="text-2xl font-bold text-gray-100" data-load>—</p>
    <p class="text-xs text-gray-600 mt-1 hcard-scroll break-words" data-sub></p>
  </div>
  <!-- Queue / throughput -->
  <div class="hcard bg-surface-raised rounded-xl border border-gray-800 p-4 min-w-0" data-resource="queue">
    <div class="flex items-center justify-between mb-2">
      <span class="text-sm font-medium text-gray-200">Run Queue</span>
      <span class="status-dot w-2.5 h-2.5 rounded-full bg-gray-600" data-dot></span>
    </div>
    <div class="grid grid-cols-2 gap-2 text-center" data-queue-counts>
      <div><span class="text-lg font-bold text-amber-400" data-q="active">—</span><p class="text-[10px] text-gray-600 uppercase">Active</p></div>
      <div><span class="text-lg font-bold text-gray-400" data-q="queued">—</span><p class="text-[10px] text-gray-600 uppercase">Queued</p></div>
      <div><span class="text-lg font-bold text-emerald-400" data-q="completed">—</span><p class="text-[10px] text-gray-600 uppercase">Done</p></div>
      <div><span class="text-lg font-bold text-red-400" data-q="failed">—</span><p class="text-[10px] text-gray-600 uppercase">Failed</p></div>
    </div>
    <p class="text-xs text-gray-600 mt-2 hcard-scroll break-words" data-sub></p>
  </div>
</div>

<script>
(function () {
  // Names come from user-edited connections/models: escape before innerHTML.
  let intervalSec = 30, nextAt = 0, rafId = null;
  const btn = document.getElementById("refresh-btn");
  const menu = document.getElementById("refresh-menu");
  const label = document.getElementById("refresh-label");
  const ring = document.getElementById("refresh-ring");
  const CIRC = 62.83;

  function tick() {
    const remain = Math.max(0, (nextAt - Date.now()) / 1000);
    ring.style.strokeDashoffset = CIRC * (1 - remain / intervalSec);
    rafId = requestAnimationFrame(tick);
  }

  let refreshTimer = null;
  function schedule() {
    cancelAnimationFrame(rafId);
    clearTimeout(refreshTimer);
    nextAt = Date.now() + intervalSec * 1000;
    label.textContent = intervalSec + "s";
    refreshTimer = setTimeout(refresh, intervalSec * 1000);
    rafId = requestAnimationFrame(tick);
  }

  btn.onclick = (e) => { e.stopPropagation(); menu.classList.toggle("hidden"); };
  document.addEventListener("click", () => menu.classList.add("hidden"));
  menu.onclick = (e) => e.stopPropagation();
  menu.querySelectorAll("[data-sec]").forEach(b => b.onclick = () => {
    intervalSec = +b.dataset.sec; menu.classList.add("hidden"); schedule();
  });
  const ci = document.getElementById("refresh-custom");
  const applyCustom = () => { const n = +ci.value; if (n >= 10) { intervalSec = n; menu.classList.add("hidden"); schedule(); } };
  document.getElementById("refresh-custom-set").onclick = applyCustom;
  ci.onkeydown = (e) => { if (e.key === "Enter") applyCustom(); };

  const DOT_COLORS = { up: "bg-emerald-500", degraded: "bg-amber-500", down: "bg-red-500", unknown: "bg-gray-600" };
  const OVERALL_STYLES = {
    ok: "bg-emerald-900/40 text-emerald-300",
    degraded: "bg-amber-900/40 text-amber-300",
    down: "bg-red-900/40 text-red-300",
  };

  function fmtBytes(n) {
    if (n === null || n === undefined) return "—";
    const units = ["B", "KB", "MB", "GB", "TB"];
    let i = 0, v = Number(n);
    while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
    return v.toFixed(v >= 100 || i === 0 ? 0 : 1) + " " + units[i];
  }

  function setDot(el, status) {
    el.className = "status-dot w-2.5 h-2.5 rounded-full " + (DOT_COLORS[status] || DOT_COLORS.unknown);
  }

  function render(data) {
    // Overall badge
    const badge = document.getElementById("overall-badge");
    badge.textContent = data.overall.toUpperCase();
    badge.className = "px-2.5 py-1 rounded-full text-xs font-medium " + (OVERALL_STYLES[data.overall] || OVERALL_STYLES.degraded);
    document.getElementById("last-updated").textContent = "updated " + new Date().toLocaleTimeString();

    // Components
    Object.entries(data.components || {}).forEach(([name, comp]) => {
      const card = document.querySelector('[data-component="' + name + '"]');
      if (!card) return;
      setDot(card.querySelector("[data-dot]"), comp.status);
      const detail = card.querySelector("[data-detail]");
      if (detail) { detail.textContent = comp.detail || ""; detail.title = comp.detail || ""; }
      const lat = card.querySelector("[data-latency]");
      if (lat) lat.textContent = comp.latency_ms != null ? comp.latency_ms + " ms" : "";
      // Engine card: two labeled lines — Studio (this app) and SimpleAudit (engine).
      if (name === "engine") {
        const studio = comp.studio || {};
        const sv = card.querySelector("[data-studio-title]");
        if (sv) {
          const sVer = studio.version || "?";
          const sCommit = studio.commit ? " · " + String(studio.commit).slice(0, 8) : "";
          sv.innerHTML = '<span class="text-gray-400 font-medium">Studio</span>&nbsp;' + esc(sVer + sCommit);
          sv.title = "SimpleAudit Studio " + sVer + (studio.commit ? " · " + studio.commit : "");
        }
        const eng = card.querySelector("[data-engine-title]");
        if (eng) {
          const eVer = comp.version || "?";
          const eCommit = comp.commit ? " · " + String(comp.commit).slice(0, 8) : "";
          eng.innerHTML = '<span class="text-gray-400 font-medium">SimpleAudit</span>&nbsp;' + esc(eVer + eCommit);
          eng.title = "SimpleAudit engine " + eVer + (comp.commit ? " · " + comp.commit : "");
        }
      }
      // Model endpoints grouped by connection
      if (comp.groups) {
        const list = card.querySelector("[data-endpoints]");
        if (list) {
          list.innerHTML = comp.groups.map(g =>
            '<div data-group="' + esc(g.name) + '">' +
            '<p class="text-[10px] font-medium text-gray-500 uppercase tracking-wide mb-1 truncate" title="' + esc(g.name + ' · ' + g.provider) + '">' + esc(g.name) + ' <span class="text-gray-600 normal-case">· ' + esc(g.provider) + '</span></p>' +
            '<ul class="space-y-0.5">' +
            g.models.map(m =>
              '<li class="flex items-center gap-2 text-xs min-w-0">' +
              '<span class="w-2 h-2 rounded-full shrink-0 ' + (DOT_COLORS[m.status] || DOT_COLORS.unknown) + '"></span>' +
              '<span class="text-gray-400 truncate flex-1 min-w-0" title="' + esc(m.display_name || m.model_id) + '">' + esc(m.display_name || m.model_id) + '</span>' +
              '<span class="text-gray-600 shrink-0">' + esc(m.status) + '</span></li>'
            ).join("") +
            '</ul></div>'
          ).join("");
        }
      }
    });

    // Resources
    const res = data.resources || {};
    const mem = res.memory || {};
    const memCard = document.querySelector('[data-resource="memory"]');
    if (memCard) {
      setDot(memCard.querySelector("[data-dot]"), mem.status);
      const pct = mem.used_percent != null ? Math.min(mem.used_percent, 100) : 0;
      const bar = memCard.querySelector("[data-bar]");
      bar.style.width = pct + "%";
      bar.className = "bar-fill h-1.5 rounded-full " + (pct > 90 ? "bg-red-500" : pct > 75 ? "bg-amber-500" : "bg-accent");
      memCard.querySelector("[data-summary]").textContent =
        mem.status === "up" ? fmtBytes(mem.used_bytes) + " / " + fmtBytes(mem.total_bytes) + " (" + mem.used_percent + "%)" : (mem.detail || "unavailable");
      memCard.querySelector("[data-sub]").textContent =
        mem.web_process_rss_bytes != null ? "web process: " + fmtBytes(mem.web_process_rss_bytes) : "";
    }

    const disk = res.disk || {};
    const diskCard = document.querySelector('[data-resource="disk"]');
    if (diskCard) {
      setDot(diskCard.querySelector("[data-dot]"), disk.status);
      const dpct = disk.used_percent != null ? Math.min(disk.used_percent, 100) : 0;
      const dbar = diskCard.querySelector("[data-bar]");
      dbar.style.width = dpct + "%";
      dbar.className = "bar-fill h-1.5 rounded-full " + (dpct > 90 ? "bg-red-500" : dpct > 75 ? "bg-amber-500" : "bg-accent");
      diskCard.querySelector("[data-summary]").textContent =
        disk.status === "up" ? fmtBytes(disk.used_bytes) + " / " + fmtBytes(disk.total_bytes) + " (" + disk.used_percent + "%)" : (disk.detail || "unavailable");
      diskCard.querySelector("[data-sub]").textContent = disk.status === "up" ? "free: " + fmtBytes(disk.free_bytes) : "";
    }

    const cpu = res.cpu || {};
    const cpuCard = document.querySelector('[data-resource="cpu"]');
    if (cpuCard) {
      setDot(cpuCard.querySelector("[data-dot]"), cpu.status);
      cpuCard.querySelector("[data-load]").textContent = cpu.load_1m != null ? cpu.load_1m : "—";
      cpuCard.querySelector("[data-sub]").textContent =
        cpu.status === "up" ? "per core " + cpu.load_per_core + " · " + cpu.cpu_count + " cores · 5m " + cpu.load_5m : (cpu.detail || "");
    }

    const q = res.queue || {};
    const qCard = document.querySelector('[data-resource="queue"]');
    if (qCard) {
      setDot(qCard.querySelector("[data-dot]"), q.status);
      const runs = q.runs || {};
      ["active", "queued", "completed", "failed"].forEach(k => {
        const el = qCard.querySelector('[data-q="' + k + '"]');
        if (el) el.textContent = runs[k] != null ? runs[k] : "—";
      });
      qCard.querySelector("[data-sub]").textContent =
        q.scenarios_in_flight != null ? q.scenarios_in_flight + " scenarios in flight" : "";
    }
  }

  async function refresh() {
    try {
      const resp = await fetch("/api/health/", { headers: { Accept: "application/json" } });
      if (!resp.ok) throw new Error("HTTP " + resp.status);
      render(await resp.json());
    } catch (e) {
      const badge = document.getElementById("overall-badge");
      badge.textContent = "REFRESH ERROR";
      badge.className = "px-2.5 py-1 rounded-full text-xs font-medium bg-red-900/40 text-red-300";
    }
    schedule();
  }

  refresh();
})();
</script>
{% endblock %}