// =============================================================================
// COMMAND TAB — agent fleet health, activity log, controls.
// =============================================================================

(function () {
  const { C } = window.JD_THEME;
  const { card, ct, bg, Empty, Loading, ErrorBox } = window.JD_STYLES;

  function Command() {
    const cmdQ = window.useJarvisData("command");
    const d = cmdQ.data || {};
    const log = d.log || [];
    const agents = d.agents || [];

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {cmdQ.error && <ErrorBox message={cmdQ.error.message} />}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12 }}>
          {[["Agents Online", d.agentsOnline, C.green], ["Tasks Run · 24h", d.tasksRun24h, C.gold], ["Approvals Pending", d.approvalsPending, C.yellow], ["Errors · 24h", d.errors24h, C.red]].map(([l, v, c]) => (
            <div key={l} style={card()}>
              <div style={{ fontSize: 12, color: C.muted, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 6 }}>{l}</div>
              <div style={{ fontSize: 30, color: v ? c : C.muted, fontVariantNumeric: "tabular-nums" }}>{v || "—"}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14 }}>
          <div style={card()}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
              <div style={ct}>System Activity Log</div>
              <div style={{ display: "flex", gap: 6 }}>
                <button style={{ ...bg, fontSize: 12 }}>All</button>
                <button style={{ ...bg, fontSize: 12, borderColor: "rgba(212,160,23,0.4)", color: C.yellow }}>Warnings</button>
                <button style={{ ...bg, fontSize: 12, borderColor: "rgba(224,82,82,0.4)", color: C.red }}>Errors</button>
              </div>
            </div>
            {cmdQ.loading ? <Loading /> :
             log.length === 0 ? <Empty label="No agent activity yet" sub="Adapter should append entries from 06_Command/Agent_Log.md" /> : log.map((l, i) => (
              <div key={i} style={{ display: "flex", gap: 10, padding: "10px 0", borderBottom: "0.5px solid " + C.border, alignItems: "flex-start" }}>
                <div style={{ width: 7, height: 7, borderRadius: "50%", background: l.c, marginTop: 6, flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", gap: 8, marginBottom: 3, alignItems: "baseline" }}>
                    <span style={{ fontSize: 14, color: C.gold, fontWeight: 500 }}>{l.a}</span>
                    <span style={{ fontSize: 13, color: C.muted }}>{l.t}</span>
                  </div>
                  <div style={{ fontSize: 15, color: "rgba(222,214,185,0.88)", lineHeight: 1.5 }}>{l.m}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={card()}>
              <div style={ct}>Agent Health</div>
              {agents.length === 0 ? <Empty label="No agents registered" /> : agents.map(([n, c, s, t]) => (
                <div key={n} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "0.5px solid " + C.border, fontSize: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <div style={{ width: 7, height: 7, borderRadius: "50%", background: c }} />
                    <div>
                      <div style={{ color: "rgba(222,214,185,0.9)" }}>{n}</div>
                      <div style={{ color: C.muted, fontSize: 11 }}>{t}</div>
                    </div>
                  </div>
                  <span style={{ color: c, fontSize: 12, padding: "2px 8px", borderRadius: 10, background: c + "18", border: "0.5px solid " + c + "30" }}>{s}</span>
                </div>
              ))}
            </div>
            <div style={card()}>
              <div style={ct}>Controls</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <button style={{ ...bg, width: "100%", padding: "10px 14px" }}>Pause All Agents</button>
                <button style={{ ...bg, width: "100%", padding: "10px 14px", borderColor: "rgba(74,159,212,0.4)", color: C.blue }}>Run Morning Brief</button>
                <button style={{ ...bg, width: "100%", padding: "10px 14px", borderColor: "rgba(62,207,142,0.4)", color: C.green }}>Sync Vault</button>
                <button style={{ ...bg, width: "100%", padding: "10px 14px", borderColor: "rgba(224,82,82,0.4)", color: C.red }}>Emergency Stop</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.JD_TABS = window.JD_TABS || {};
  window.JD_TABS.Command = Command;
})();