// Agents — Gartner-tiered agent hub. Each module has a named agent with guardrails + confidence.
// Central to the sales narrative: "AI workforce compliance solution for the Agentive era."

function Agents() {
  const { state, dispatch } = useApp();

  const totalActions = state.agents.reduce((a, x) => a + x.actions24h, 0);
  const totalPending = state.agents.reduce((a, x) => a + x.pending, 0);
  const avgConfidence = state.agents.reduce((a, x) => a + x.confidence, 0) / state.agents.length;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Agentive era · human-in-the-loop</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>Agents</h1>
          <div className="page-sub">{state.agents.length} agents live · {totalActions} actions in the last 24h · {totalPending} awaiting your approval · guardrails always on</div>
        </div>
        <div className="hstack" style={{ flexWrap: "wrap" }}>
          <Badge tone="ai" dot>Gartner tiers · L1–L4</Badge>
          <button className="btn" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Policy export queued · pdf" } })}><Icon name="download" size={13} /> Guardrail policy</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16, marginBottom: 20 }}>
        <div className="kpi">
          <div className="kpi-label">Active agents</div>
          <div className="kpi-value">{state.agents.length}</div>
          <div className="kpi-delta"><span className="tone-up">▲ all healthy</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Actions past 24h</div>
          <div className="kpi-value" style={{ fontSize: 28 }}>{totalActions}</div>
          <div className="kpi-delta">Across all modules</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Pending human approval</div>
          <div className="kpi-value" style={{ fontSize: 28, color: totalPending ? "var(--amber-ink)" : "var(--sage-ink)" }}>{totalPending}</div>
          <div className="kpi-delta">{totalPending ? "Queued below" : "Nothing waiting"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Avg confidence</div>
          <div className="kpi-value" style={{ fontSize: 28 }}>{Math.round(avgConfidence * 100)}<span className="unit">%</span></div>
          <div className="kpi-delta"><span className="tone-up">▲ above 80% threshold</span></div>
        </div>
      </div>

      {/* Agent cards */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 16 }}>
        {state.agents.map(a => (
          <div key={a.id} className="card">
            <div className="card-head" style={{ alignItems: "flex-start" }}>
              <div className="hstack" style={{ gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--ink)", color: "var(--paper)", display: "grid", placeItems: "center" }}>
                  <Icon name={a.icon} size={17} />
                </div>
                <div>
                  <div className="card-title">{a.name}</div>
                  <div className="card-sub">{a.scope.join(" · ")}</div>
                </div>
              </div>
              <div className="hstack" style={{ gap: 6, flexWrap: "wrap" }}>
                <TierBadge tier={a.tier} />
              </div>
            </div>
            <div className="card-body vstack" style={{ gap: 12 }}>
              <div className="hstack" style={{ gap: 12, flexWrap: "wrap", fontSize: 12 }}>
                <div className="vstack" style={{ gap: 2 }}>
                  <span className="eyebrow">Confidence · 7d</span>
                  <div className="hstack" style={{ gap: 8, alignItems: "flex-end" }}>
                    <ConfidencePill value={a.confidence} />
                    <div style={{ width: 80 }}>
                      <Sparkline points={a.confidenceTrend.map(v => v * 100)} color="var(--sage-ink)" fill="var(--sage)" height={28} />
                    </div>
                  </div>
                </div>
                <div className="vstack" style={{ gap: 2 }}>
                  <span className="eyebrow">Actions 24h</span>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{a.actions24h}</div>
                </div>
                <div className="vstack" style={{ gap: 2 }}>
                  <span className="eyebrow">Pending</span>
                  <div style={{ fontSize: 14, fontWeight: 600, color: a.pending ? "var(--amber-ink)" : "var(--sage-ink)" }}>{a.pending}</div>
                </div>
              </div>
              <div style={{ padding: 10, background: "var(--bone)", border: "1px dashed var(--line)", borderRadius: 6, fontSize: 12 }}>
                <div className="hstack" style={{ gap: 6, marginBottom: 2 }}>
                  <Icon name="shield" size={11} /> <span className="eyebrow" style={{ fontSize: 9 }}>Human in the loop</span>
                </div>
                <div>{a.approver}</div>
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-3)" }}><strong style={{ color: "var(--ink)" }}>Latest:</strong> {a.lastAction}</div>
              <div className="hstack" style={{ gap: 6 }}>
                <button className="btn" onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "guardrails", agentId: a.id } })}><Icon name="lock" size={12} /> Guardrails</button>
                {a.pending > 0 && <button className="btn sage" onClick={() => dispatch({ type: "SET_COPILOT", open: true })}>Review queue<Icon name="arrowRight" size={12} /></button>}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Agent inbox — pending approvals (reads state.plans) */}
      <div className="card" style={{ marginTop: 20 }}>
        <div className="card-head">
          <div>
            <div className="card-title">Agent inbox · pending human approval</div>
            <div className="card-sub">Every L3 action routes here first · L4 agents escalate above their limits</div>
          </div>
          <Badge tone="warn" dot>{state.plans.length} items</Badge>
        </div>
        <div className="card-body vstack" style={{ gap: 10 }}>
          {state.plans.length === 0 && (
            <div style={{ padding: 24, textAlign: "center" }}>
              <div className="serif" style={{ fontSize: 18, marginBottom: 4 }}>Inbox clear.</div>
              <div className="sub">No agent actions waiting on human approval right now.</div>
            </div>
          )}
          {state.plans.map(p => (
            <div key={p.id} className="hstack" style={{ gap: 12, padding: 12, background: "var(--bone)", border: "1px solid var(--line)", borderRadius: 8 }}>
              <Icon name="sparkle" size={16} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{p.title}</div>
                <div className="sub" style={{ fontSize: 11.5 }}>{p.summary}</div>
                <div className="hstack" style={{ gap: 6, marginTop: 6 }}>
                  <TierBadge tier="L3" />
                  <ConfidencePill value={0.93} />
                </div>
              </div>
              <div className="hstack" style={{ gap: 6 }}>
                <button className="btn" onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "plan-review", planId: p.id } })}>Review</button>
                <button className="btn sage" onClick={() => { dispatch({ type: "APPROVE_AI_PLAN", planId: p.id }); dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `Plan approved · ${p.steps.length} actions` } }); }}>Approve</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Agents });