async function fetchStatus() {
  const el = document.getElementById("status-content");
  try {
    const res = await fetch("/health");
    const d = await res.json();
    const isOk = d.status === "ok";
    const isDegraded = d.status === "degraded";
    const dotClass = isOk ? "ok" : isDegraded ? "degraded" : "error";
    const label = isOk ? "All Systems Operational" : isDegraded ? "Degraded Performance" : "Service Disruption";
    const now = new Date().toLocaleTimeString();

    el.innerHTML =
      "<div class=\"status-hero\">" +
        "<div class=\"status-indicator\"><span class=\"status-dot " + dotClass + "\"></span> " + label + "</div>" +
        "<div class=\"status-meta\">Version " + d.version + " · Last checked " + now + " · Auto-refreshes every 30s</div>" +
      "</div>" +
      "<div class=\"status-grid\">" +
        "<div class=\"status-card\">" +
          "<h3>🗄️ Database</h3>" +
          "<div class=\"status-row\"><span class=\"status-label\">Status</span><span class=\"status-value " + (d.database && d.database.status === "ok" ? "ok" : "err") + "\">" + (d.database && d.database.status === "ok" ? "Connected" : "Error") + "</span></div>" +
          "<div class=\"status-row\"><span class=\"status-label\">Engine</span><span class=\"status-value\">" + (d.database ? d.database.version : "Unknown") + "</span></div>" +
        "</div>" +
        "<div class=\"status-card\">" +
          "<h3>🖨️ PDF Engine</h3>" +
          "<div class=\"status-row\"><span class=\"status-label\">Status</span><span class=\"status-value " + (d.pool && d.pool.available > 0 ? "ok" : "warn") + "\">" + (d.pool && d.pool.available > 0 ? "Ready" : "Busy") + "</span></div>" +
          "<div class=\"status-row\"><span class=\"status-label\">Available</span><span class=\"status-value\">" + (d.pool ? d.pool.available : 0) + " / " + (d.pool ? d.pool.size : 0) + "</span></div>" +
          "<div class=\"status-row\"><span class=\"status-label\">Queue</span><span class=\"status-value " + (d.pool && d.pool.queueDepth > 0 ? "warn" : "ok") + "\">" + (d.pool ? d.pool.queueDepth : 0) + " waiting</span></div>" +
          "<div class=\"status-row\"><span class=\"status-label\">PDFs Generated</span><span class=\"status-value\">" + (d.pool ? d.pool.pdfCount.toLocaleString() : "0") + "</span></div>" +
          "<div class=\"status-row\"><span class=\"status-label\">Uptime</span><span class=\"status-value\">" + formatUptime(d.pool ? d.pool.uptimeSeconds : 0) + "</span></div>" +
        "</div>" +
      "</div>" +
      "<div style=\"text-align:center;margin-top:16px;\"><a href=\"/health\" style=\"font-size:0.8rem;color:var(--muted);\">Raw JSON endpoint →</a></div>";
  } catch (e) {
    el.innerHTML = "<div class=\"status-hero\"><div class=\"status-indicator\"><span class=\"status-dot error\"></span> Unable to reach API</div><div class=\"status-meta\">The service may be temporarily unavailable. Please try again shortly.</div></div>";
  }
}

function formatUptime(s) {
  if (!s && s !== 0) return "Unknown";
  if (s < 60) return s + "s";
  if (s < 3600) return Math.floor(s/60) + "m " + (s%60) + "s";
  var h = Math.floor(s/3600);
  var m = Math.floor((s%3600)/60);
  return h + "h " + m + "m";
}

fetchStatus();
setInterval(fetchStatus, 30000);