// System Health Dashboard — monitors all bots and crons

function HealthView() {
  var data = window.SYSTEM_HEALTH || {};
  var summary = data.summary || {};
  var checks = data.checks || {};
  var checkedAt = data.checked_at || "";

  var statusIcon = function(s) {
    return { ok: "🟢", running: "🟢", stale: "🟡", dead: "🔴", error: "🔴", missing: "⚫" }[s] || "⚪";
  };
  var statusColor = function(s) {
    return { ok: "var(--up)", running: "var(--up)", stale: "var(--warn)", dead: "var(--down)", error: "var(--down)", missing: "var(--fg-3)" }[s] || "var(--fg-2)";
  };

  var entries = Object.entries(checks);
  var groups = {
    "Hook Monitor": entries.filter(function(e) { return ["pool_watcher","hooklist_fetch","token_discovery","hook_data_upload"].includes(e[0]); }),
    "JP Stock DD": entries.filter(function(e) { return ["news_agent","price_fetch","kairos_gen","health_check"].includes(e[0]); }),
    "Cloud DD Triggers": entries.filter(function(e) { return e[0].startsWith("cloud_"); }),
  };

  return (
    <div>
      {/* Summary bar */}
      <div style={{ display: "flex", gap: 16, marginBottom: 20, flexWrap: "wrap" }}>
        <div style={{ background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 10, padding: "14px 20px", flex: 1, minWidth: 100 }}>
          <div style={{ fontSize: 28, fontWeight: 700, color: summary.error > 0 ? "var(--down)" : "var(--up)" }}>
            {summary.score || "?"}
          </div>
          <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono", textTransform: "uppercase" }}>Health Score</div>
        </div>
        <div style={{ background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 10, padding: "14px 20px" }}>
          <div style={{ fontSize: 28, fontWeight: 700, color: "var(--up)" }}>{summary.ok || 0}</div>
          <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>OK</div>
        </div>
        <div style={{ background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 10, padding: "14px 20px" }}>
          <div style={{ fontSize: 28, fontWeight: 700, color: "var(--warn)" }}>{summary.stale || 0}</div>
          <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>Stale</div>
        </div>
        <div style={{ background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 10, padding: "14px 20px" }}>
          <div style={{ fontSize: 28, fontWeight: 700, color: "var(--down)" }}>{summary.error || 0}</div>
          <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>Error</div>
        </div>
      </div>

      {checkedAt && (
        <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "JetBrains Mono", marginBottom: 16 }}>
          Last check: {checkedAt.slice(0, 19).replace("T", " ")}
        </div>
      )}

      {/* Grouped checks */}
      {Object.entries(groups).map(function(group) {
        var groupName = group[0];
        var items = group[1];
        if (items.length === 0) return null;
        return (
          <div key={groupName} style={{ marginBottom: 24 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-1)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8 }}>
              {groupName}
            </div>
            {items.map(function(item) {
              var key = item[0];
              var check = item[1];
              var status = check.status || "?";
              var age = check.age_min;
              return (
                <div key={key} style={{
                  display: "flex", alignItems: "center", gap: 12,
                  padding: "10px 16px", marginBottom: 4,
                  background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 8,
                  borderLeft: "3px solid " + statusColor(status),
                }}>
                  <span style={{ fontSize: 16 }}>{statusIcon(status)}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-0)" }}>
                      {check.name || key}
                    </div>
                    <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>
                      {check.expected || ""}
                      {check.pid ? " · PID " + check.pid : ""}
                      {check.has_error ? " · ⚠ errors in log" : ""}
                    </div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: statusColor(status) }}>
                      {status.toUpperCase()}
                    </div>
                    {typeof age === "number" && (
                      <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "JetBrains Mono" }}>
                        {age < 60 ? Math.round(age) + "m ago" : Math.round(age / 60) + "h ago"}
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        );
      })}

      {/* Cloud DD commits */}
      {checks.cloud_dd_recent && checks.cloud_dd_recent.commits && (
        <div style={{ marginTop: 16 }}>
          <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono", marginBottom: 6 }}>Recent DD commits:</div>
          {checks.cloud_dd_recent.commits.map(function(c, i) {
            return <div key={i} style={{ fontSize: 12, color: "var(--fg-1)", fontFamily: "JetBrains Mono", padding: "2px 0" }}>{c}</div>;
          })}
        </div>
      )}
    </div>
  );
}

window.HealthView = HealthView;