import { Link, useSearchParams } from "react-router";
import { qs, type ExecutionRow, type Project } from "../api";
import { useFetch, fmtDate } from "../hooks";
import { Badge, Empty, ErrorBox, Loading, Pager, Td } from "../components/ui";

const STATES = ["intent", "running", "succeeded", "failed", "blocked", "quarantined", "unobserved"];
export default function Executions() {
  const [sp, setSp] = useSearchParams();
  const project_id = sp.get("project_id") ?? "", state = sp.get("state") ?? "", offset = Number(sp.get("offset") ?? 0), limit = 50;
  const { data, error, loading } = useFetch<{ executions: ExecutionRow[]; total: number }>(`executions${qs({ project_id, state, limit, offset })}`);
  const projects = useFetch<{ projects: Project[] }>("projects");
  const set = (k: string, v: string) => setSp((p) => { const n = new URLSearchParams(p); if (v) n.set(k, v); else n.delete(k); if (k !== "offset") n.delete("offset"); return n; });
  return (
    <div>
      <h1>Execution Observatory</h1><p className="hint">Every mediated call: intent persisted before the request, outcome after. Blocked and quarantined rows are policy decisions, not errors.</p>
      <div className="filters">
        <select aria-label="Project" value={project_id} onChange={(e) => set("project_id", e.target.value)}><option value="">all projects</option>{projects.data?.projects.map((p) => <option key={p.id} value={p.slug}>{p.name}</option>)}</select>
        <select aria-label="State" value={state} onChange={(e) => set("state", e.target.value)}><option value="">all states</option>{STATES.map((s) => <option key={s}>{s}</option>)}</select>
      </div>
      {loading && <Loading />}<ErrorBox error={error} />
      {data && data.executions.length === 0 && <Empty>No executions match.</Empty>}
      {data && data.executions.length > 0 && (<>
        <table className="tbl"><thead><tr><th>When</th><th>State</th><th>Decision</th><th>Project</th><th>API / AKP</th><th>Request</th><th>Status</th><th>ms</th><th>Caller</th></tr></thead><tbody>
          {data.executions.map((e) => <tr key={e.id}><Td l="when"><Link to={`/executions/${e.id}`}>{fmtDate(e.created_at)}</Link></Td><Td l="state"><Badge v={e.state} />{e.provisional && <Badge v="warn" label="provisional" />}{e.observed === false && <Badge v="unobserved" />}</Td><Td l="decision"><Badge v={e.decision ?? "—"} /></Td><Td l="project">{e.project_slug} <span className="hint">{e.policy_mode}</span></Td><Td l="api">{e.akp_id ? `${e.akp_id} v${e.akp_version}` : e.api_name ?? <span className="hint">unregistered</span>}</Td><Td l="request" wide><span className="truncate mono">{e.method} {e.url}</span>{e.error && <div className="hint" style={{ color: "var(--critical)" }}>{e.error.slice(0, 120)}</div>}</Td><Td l="status">{e.status_code ?? "—"}</Td><Td l="ms" className="num">{e.duration_ms ?? "—"}</Td><Td l="caller"><span className="hint">{e.agent_name ?? e.caller}</span></Td></tr>)}
        </tbody></table>
        <Pager offset={offset} limit={limit} total={data.total} onChange={(o) => set("offset", String(o))} />
      </>)}
    </div>
  );
}