{% extends "base.html" %}
{% block title %}Health — SimpleAudit Studio{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-6">
  <h1 class="text-lg font-semibold text-gray-100">System Health</h1>
  <div class="flex 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" 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 %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4" data-component="{{ name }}">
    <div class="flex items-center justify-between mb-2">
      <span class="text-sm font-medium text-gray-200 capitalize">{{ name }}</span>
      <span class="status-dot w-2.5 h-2.5 rounded-full bg-gray-600" data-dot></span>
    </div>
    <p class="text-xs text-gray-500 min-h-[1rem]" data-detail>{{ 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" %}
    <p class="text-xs text-gray-500 mt-1 truncate" data-engine>{{ comp.version|default:"—" }}{% if comp.commit %} · {{ comp.commit|slice:":8" }}{% endif %}</p>
    {% endif %}
    {% if name == "model_endpoints" %}
    <div class="mt-2 space-y-2 max-h-48 overflow-y-auto" 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">{{ 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">
            <span class="w-2 h-2 rounded-full shrink-0 bg-gray-600"></span>
            <span class="text-gray-400 truncate flex-1">{{ m.display_name }}</span>
            <span class="text-gray-600">{{ 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="bg-surface-raised rounded-xl border border-gray-800 p-4" 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" data-summary>—</p>
    <p class="text-xs text-gray-600 mt-1" data-sub></p>
  </div>
  <!-- Disk -->
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4" 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" data-summary>—</p>
    <p class="text-xs text-gray-600 mt-1" data-sub></p>
  </div>
  <!-- CPU -->
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4" 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" data-sub></p>
  </div>
  <!-- Queue / throughput -->
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4" data-resource="queue">
    <div class="flex items-center justify-between mb-2">
      <span class="text-sm font-medium text-gray-200">Audit 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" data-sub></p>
  </div>
</div>

<script>
(function () {
  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);
  }

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

  btn.onclick = (e) => { e.stopPropagation(); menu.classList.toggle("hidden"); };
  document.onclick = () => 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 || "";
      const lat = card.querySelector("[data-latency]");
      if (lat) lat.textContent = comp.latency_ms != null ? comp.latency_ms + " ms" : "";
      const eng = card.querySelector("[data-engine]");
      if (eng) eng.textContent = (comp.version || "—") + (comp.commit ? " · " + String(comp.commit).slice(0, 8) : "");
      // 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="' + g.name + '">' +
            '<p class="text-[10px] font-medium text-gray-500 uppercase tracking-wide mb-1">' + g.name + ' <span class="text-gray-600 normal-case">· ' + g.provider + '</span></p>' +
            '<ul class="space-y-0.5">' +
            g.models.map(m =>
              '<li class="flex items-center gap-2 text-xs">' +
              '<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">' + (m.display_name || m.model_id) + '</span>' +
              '<span class="text-gray-600">' + 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 %}