/* ============================================================================
   DIVONCI WORLD — EVIDENCE & RISK  (screens_evidence_risk.jsx)
   ----------------------------------------------------------------------------
   The audit & validation truth layer. Merges the former Evidence, Risk Console
   and Activity Log into one surface with three lenses. The Activity lens is a
   LIVE audit stream — DW.subscribe('audit_events') pushes new rows in real time.
   ========================================================================== */
const { useState: useStateER, useEffect: useEffectER, useRef: useRefER } = React;

function EvidenceLens() {
  const { data, loading, error, refetch } = useResource("evidence_items", {});
  if (loading) return <div style={{ padding: 18 }}><LoadingState lines={5} label="Loading evidence" /></div>;
  if (error) return <ErrorState error={error} onRetry={refetch} />;
  if (!data.length) return <EmptyState icon="evidence" title="No evidence on record" hint="Verified claims from BroDex land here." />;
  return (
    <div>
      {data.map((e, i) => (
        <div key={e.id || i} style={{ display: "grid", gridTemplateColumns: "12px 1fr 120px", gap: 14, alignItems: "center", padding: "14px 18px", borderBottom: "1px solid var(--hairline)" }}>
          <Led state={e.state} />
          <span style={{ fontSize: 13.5, color: "var(--ink)" }}>{e.claim}</span>
          <span style={{ textAlign: "right" }}><span className="sbadge" style={{ color: DW.STATE_META[e.state].c }}>{e.label}</span></span>
        </div>
      ))}
    </div>
  );
}

function RiskLens() {
  const { data, loading, error, refetch } = useResource("risks", {});
  if (loading) return <div style={{ padding: 18 }}><LoadingState lines={4} label="Loading risks" /></div>;
  if (error) return <ErrorState error={error} onRetry={refetch} />;
  if (!data.length) return <EmptyState icon="risk" title="No open risks" hint="Risk records scored by the Council appear here." />;
  return (
    <div>
      {data.map((r) => (
        <div key={r.id} style={{ display: "grid", gridTemplateColumns: "12px 1fr 88px 64px 110px", gap: 14, alignItems: "center", padding: "14px 18px", borderBottom: "1px solid var(--hairline)" }}>
          <Led state={r.state} />
          <div>
            <div style={{ fontSize: 13.5, color: "var(--ink)" }}>{r.name}</div>
            <div className="client-mono" style={{ marginTop: 3 }}>owner · {r.owner}</div>
          </div>
          <div className="riskbar" style={{ height: 6 }}><i style={{ width: r.score * 10 + "%", background: DW.STATE_META[r.state].c }} /></div>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600, color: DW.STATE_META[r.state].c }}>{r.score}</span>
          <span style={{ textAlign: "right" }}><span className="sbadge" style={{ color: DW.STATE_META[r.state].c }}>{r.band}</span></span>
        </div>
      ))}
    </div>
  );
}

function ActivityLens() {
  const { data, loading, error, refetch } = useResource("audit_events", { limit: 60 }, { channel: "audit_events" });
  const firstId = useRefER(null);
  const newest = data && data[0] && data[0].id;
  const isNew = newest && firstId.current && newest !== firstId.current;
  useEffectER(() => { if (newest) firstId.current = newest; }, [newest]);

  if (loading) return <div style={{ padding: 18 }}><LoadingState lines={6} label="Loading audit stream" /></div>;
  if (error) return <ErrorState error={error} onRetry={refetch} />;
  if (!data.length) return <EmptyState icon="log" title="Audit stream is quiet" hint="Every production-impacting action writes an event here." />;
  return (
    <div>
      {data.map((a, i) => (
        <div key={a.id} className={"audit-row " + (a.production ? "prod " : "") + (i === 0 && isNew ? "audit-new" : "")}>
          <span className="at">{a.t}</span>
          <Led state={a.state || "active"} size={8} />
          <span className="aa"><b>{a.actor}</b> {a.action} {a.target ? <span style={{ color: "var(--ink-3)" }}>· {a.target}</span> : null} <span style={{ color: "var(--ink-4)", fontFamily: "var(--font-mono)", fontSize: 10 }}>[{a.area}]</span></span>
          {a.production ? <span className="prodtag">prod</span> : <span />}
        </div>
      ))}
    </div>
  );
}

function EvidenceRisk({ nav, lens = "evidence" }) {
  const [tab, setTab] = useStateER(lens);
  const evidence = useResource("evidence_items", {});
  const risks = useResource("risks", {});

  const failing = (evidence.data || []).filter((e) => e.state === "crisis").length;
  const highRisk = (risks.data || []).filter((r) => r.band === "HIGH").length;

  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="title"><span className="sub">Truth layer · merged</span>Evidence &amp; Risk</div>
          <div className="meta">Evidence, risk and the live audit log, unified. This is where Diego distinguishes proof from claim, and watches every production action as it happens.</div>
        </div>
      </div>

      <div className="cols c-4" style={{ marginBottom: "var(--s-6)" }}>
        <Panel style={{ padding: "13px 16px" }}><div className="mtile"><div className="k"><Icon name="evidence" style={{ width: 13, height: 13 }} /> Evidence items</div><div className="v">{evidence.loading ? "—" : evidence.data.length}</div></div></Panel>
        <Panel style={{ padding: "13px 16px" }}><div className="mtile"><div className="k"><Led state="crisis" size={7} /> Failing checks</div><div className="v" style={{ color: failing ? "var(--state-crisis)" : "var(--ink)" }}>{evidence.loading ? "—" : failing}</div></div></Panel>
        <Panel style={{ padding: "13px 16px" }}><div className="mtile"><div className="k"><Icon name="risk" style={{ width: 13, height: 13 }} /> Open risks</div><div className="v">{risks.loading ? "—" : risks.data.length}</div></div></Panel>
        <Panel style={{ padding: "13px 16px" }}><div className="mtile"><div className="k"><Led state="caution" size={7} /> High band</div><div className="v" style={{ color: highRisk ? "var(--state-caution)" : "var(--ink)" }}>{risks.loading ? "—" : highRisk}</div></div></Panel>
      </div>

      <div className="seg" style={{ marginBottom: "var(--s-6)" }} role="tablist">
        {[["evidence", "Evidence"], ["risk", "Risk"], ["activity", "Activity"]].map(([k, l]) => (
          <button key={k} className={tab === k ? "on" : ""} data-accent="violet" role="tab" aria-selected={tab === k} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>

      <Panel className="tight">
        <PHead icon={tab === "evidence" ? "evidence" : tab === "risk" ? "risk" : "log"}
          eyebrow={tab === "evidence" ? "Evidence ledger" : tab === "risk" ? "Risk records" : "Audit stream · live"}
          right={tab === "activity" ? <span className="sbadge" style={{ color: "var(--state-clear)" }}><span className="led pulse" />LIVE</span> : null} />
        {tab === "evidence" && <EvidenceLens />}
        {tab === "risk" && <RiskLens />}
        {tab === "activity" && <ActivityLens />}
      </Panel>

      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)", marginTop: 14, lineHeight: 1.6 }}>
        ⇄ Evidence, Risk and Activity each read a distinct resource through DW.get. The Activity stream stays live via DW.subscribe('audit_events') — every DW.mutate writes a row here.
      </div>
    </div>
  );
}

Object.assign(window, { EvidenceRisk });