import { useState, type FormEvent } from "react";
import { Link } from "react-router";
import { api, ApiError, type Debt, type Endpoint, type Evidence } from "../api";
import { fmtDate } from "../hooks";
import { Badge, ErrorBox, JsonTree, Td } from "./ui";

export function EvidenceList({ evidence }: { evidence: Evidence[] }) {
  if (!evidence.length) return <div className="empty">No machine evidence recorded yet.</div>;
  return (
    <div className="stack">
      {[...evidence].reverse().map((e) => (
        <details key={e.id} className="card tight">
          <summary><Badge v={e.result} /> <b>{e.kind}</b> <span className="hint">{fmtDate(e.created_at)} · {e.created_by ?? "system"}</span></summary>
          <div style={{ marginTop: 8 }}>
            {e.command && <div className="hint">command: <code>{e.command}</code></div>}
            {e.output_excerpt && <pre style={{ marginTop: 6 }}>{e.output_excerpt}</pre>}
            {e.output_hash && <div className="hint">output sha256 <code>{e.output_hash}</code></div>}
            {Object.keys(e.details ?? {}).length > 0 && <JsonTree data={e.details} />}
          </div>
        </details>
      ))}
    </div>
  );
}

export function DebtTable({ debt, onChange }: { debt: Debt[]; onChange?: () => void }) {
  const [err, setErr] = useState<ApiError | null>(null);
  if (!debt.length) return <div className="empty">No knowledge debt.</div>;
  const patch = async (id: string, status: string) => { setErr(null); try { await api(`debt/${id}`, { method: "PATCH", body: { status } }); onChange?.(); } catch (e) { setErr(e as ApiError); } };
  return (
    <div>
      <ErrorBox error={err} />
      <table className="tbl"><thead><tr><th>Severity</th><th>Kind</th><th>Subject</th><th>Description</th><th>Remediation</th><th>Status</th><th>Created</th></tr></thead><tbody>
        {debt.map((d) => (<tr key={d.id}>
          <Td l="severity"><Badge v={d.severity} /></Td><Td l="kind"><code>{d.kind}</code></Td>
          <Td l="subject"><SubjectLink type={d.subject_type} id={d.subject_id} label={d.subject_label ?? undefined} /></Td>
          <Td l="description" wide>{d.description}</Td><Td l="remediation" wide><span className="hint">{d.remediation ?? "—"}</span></Td>
          <Td l="status">{onChange ? <select aria-label="status" value={d.status} onChange={(e) => patch(d.id, e.target.value)}>{["open", "in_progress", "resolved", "accepted"].map((s) => <option key={s}>{s}</option>)}</select> : <Badge v={d.status} />}</Td>
          <Td l="created">{fmtDate(d.created_at)}</Td>
        </tr>))}
      </tbody></table>
    </div>
  );
}

export function SubjectLink({ type, id, label }: { type: string; id: string; label?: string }) {
  const to = type === "akp" ? `/akps/${id}` : type === "api" ? `/apis/${id}` : type === "execution" ? `/executions/${id}` : type === "version" ? `/versions/${id}` : type === "dataset" ? `/datasets/${id}` : null;
  const text = label ?? `${type} ${id.slice(0, 8)}`;
  return to ? <Link to={to}>{text}</Link> : <span>{text}</span>;
}

export function LifecycleButtons({ allowed, onTransition }: { allowed: string[]; onTransition: (to: string, reason: string) => Promise<void> }) {
  const [err, setErr] = useState<ApiError | null>(null); const [busy, setBusy] = useState<string | null>(null); const [reason, setReason] = useState("");
  if (!allowed.length) return <span className="hint">no transitions available</span>;
  return (
    <div>
      <div className="row"><input aria-label="Transition reason" placeholder="reason (optional)" style={{ maxWidth: 260 }} value={reason} onChange={(e) => setReason(e.target.value)} />
        {allowed.map((t) => <button key={t} className="btn sm" disabled={busy !== null} onClick={async () => { setBusy(t); setErr(null); try { await onTransition(t, reason); } catch (e) { setErr(e as ApiError); } finally { setBusy(null); } }}>→ {t}</button>)}</div>
      <ErrorBox error={err} />
    </div>
  );
}

/** Execute form for one endpoint: query + path params → POST /execute. */
export function ExecuteForm({ endpoint, apiId, packageId, projects }: { endpoint: Endpoint; apiId?: string; packageId?: string; projects: { slug: string; name: string }[] }) {
  const [vals, setVals] = useState<Record<string, string>>(() => Object.fromEntries(endpoint.parameters.filter((p) => p.example !== undefined && p.example !== null).map((p) => [p.name, String(p.example)])));
  const [project, setProject] = useState("default"); const [purpose, setPurpose] = useState("");
  const [res, setRes] = useState<Record<string, unknown> | null>(null); const [err, setErr] = useState<ApiError | null>(null); const [busy, setBusy] = useState(false);
  const submit = async (e: FormEvent) => {
    e.preventDefault(); setBusy(true); setErr(null); setRes(null);
    const path_params: Record<string, string> = {}, query: Record<string, string> = {};
    for (const p of endpoint.parameters) { const v = vals[p.name]; if (v === undefined || v === "") continue; (p.in === "path" ? path_params : query)[p.name] = v; }
    try { setRes(await api("execute", { body: { project_id: project, api_id: packageId ? undefined : apiId, package_id: packageId, endpoint_id: endpoint.id, operation_id: endpoint.operation_id, method: endpoint.method === "MCP" ? "GET" : endpoint.method, path_params, query, purpose, caller: "ui" } })); }
    catch (ex) { const e = ex as ApiError; setErr(e); const p = e.payload as { execution?: Record<string, unknown> } | undefined; if (p?.execution) setRes(p.execution); }
    finally { setBusy(false); }
  };
  const ex = res as { id?: string; state?: string; status_code?: number; duration_ms?: number; response_hash?: string; policy_decision?: { decision: string; reasons: string[] } } | null;
  return (
    <form onSubmit={submit} className="card tight">
      <div className="form-grid">
        {endpoint.parameters.map((p) => <div className="field" key={p.name}><label htmlFor={`p-${endpoint.id}-${p.name}`}>{p.name} <span className="hint">({p.in}{p.required ? ", required" : ""})</span></label><input id={`p-${endpoint.id}-${p.name}`} required={p.required} value={vals[p.name] ?? ""} onChange={(e) => setVals({ ...vals, [p.name]: e.target.value })} placeholder={p.description?.slice(0, 60)} /></div>)}
        <div className="field"><label htmlFor={`proj-${endpoint.id}`}>Project (policy mode applies)</label><select id={`proj-${endpoint.id}`} value={project} onChange={(e) => setProject(e.target.value)}>{projects.map((p) => <option key={p.slug} value={p.slug}>{p.name}</option>)}</select></div>
        <div className="field"><label htmlFor={`purp-${endpoint.id}`}>Purpose</label><input id={`purp-${endpoint.id}`} value={purpose} onChange={(e) => setPurpose(e.target.value)} /></div>
      </div>
      <div className="row"><button className="btn primary sm" disabled={busy}>{busy ? "Executing…" : `Execute ${endpoint.method} ${endpoint.path}`}</button></div>
      <ErrorBox error={err} />
      {ex && <div className="alert" style={{ marginTop: 8 }}>execution <Link to={`/executions/${ex.id}`}>{String(ex.id).slice(0, 8)}</Link> <Badge v={ex.state} /> status {ex.status_code ?? "—"} · {ex.duration_ms ?? "—"} ms · hash <code>{ex.response_hash?.slice(0, 16) ?? "—"}</code>{ex.policy_decision && <div className="hint">policy {ex.policy_decision.decision}: {ex.policy_decision.reasons.join("; ")}</div>}</div>}
    </form>
  );
}

export function EndpointRow({ e, apiId, packageId, projects }: { e: Endpoint; apiId?: string; packageId?: string; projects: { slug: string; name: string }[] }) {
  return (
    <details className="card tight">
      <summary><code>{e.method}</code> <b>{e.path}</b> <span className="hint">{e.operation_id}</span> {e.inferred && <Badge v="warn" label="inferred" />} {e.summary && <span className="hint">— {e.summary}</span>}</summary>
      <div style={{ marginTop: 8 }} className="grid c2">
        <div><h3>Parameters</h3>{e.parameters.length ? <table className="tbl"><thead><tr><th>Name</th><th>In</th><th>Req</th><th>Schema</th><th>Description</th></tr></thead><tbody>{e.parameters.map((p) => <tr key={p.name}><Td l="name"><code>{p.name}</code></Td><Td l="in">{p.in}</Td><Td l="required">{p.required ? "yes" : ""}</Td><Td l="schema"><code>{p.schema?.type ? String(p.schema.type) : "—"}</code></Td><Td l="description" wide><span className="hint">{p.description}</span></Td></tr>)}</tbody></table> : <span className="hint">none</span>}
          {Object.keys(e.pagination ?? {}).length > 0 && <><h3>Pagination</h3><JsonTree data={e.pagination} open /></>}
          <h3>Execute</h3><ExecuteForm endpoint={e} apiId={apiId} packageId={packageId} projects={projects} /></div>
        <div><h3>Response schema</h3>{e.response_schema ? <JsonTree data={e.response_schema} open /> : <span className="hint">not documented</span>}
          {e.request_schema ? <><h3>Request schema</h3><JsonTree data={e.request_schema} /></> : null}
          <p className="hint"><Link to={`/endpoints/${e.id}`}>endpoint page →</Link></p></div>
      </div>
    </details>
  );
}