import { Link, useParams } from "react-router";
import type { Endpoint, Evidence, PackageRow, Variable } from "../api";
import { useFetch, fmtDate } from "../hooks";
import { Badge, ErrorBox, JsonTree, KV, Loading, Td } from "../components/ui";
import { EvidenceList } from "../components/shared";

type V = { id: string; api_id: string; api_name: string; api_slug: string; version: string; lifecycle: string; contract: Record<string, unknown>; contract_hash: string; source_kind: string; source_url: string | null; changelog: string | null; created_by: string | null; created_at: string; endpoints: Endpoint[]; variables: Variable[]; evidence: Evidence[]; packages: PackageRow[] };

export default function VersionDetail() {
  const { id } = useParams();
  const { data, error, loading } = useFetch<V>(`versions/${id}`);
  if (loading) return <Loading />; if (error) return <ErrorBox error={error} />; if (!data) return null;
  return (
    <div>
      <h1>{data.api_name} — version {data.version} <Badge v={data.lifecycle} /></h1>
      <div className="card"><KV items={[["API", <Link to={`/apis/${data.api_id}`}>{data.api_name}</Link>], ["Contract hash", <code>{data.contract_hash}</code>], ["Source", `${data.source_kind} ${data.source_url ?? ""}`], ["Created", `${fmtDate(data.created_at)} by ${data.created_by ?? "system"}`], ["Endpoints", data.endpoints.length], ["Variables", data.variables.length]]} /></div>
      <div className="card"><h3>Packages compiled from this version</h3>{data.packages.length ? data.packages.map((k) => <div key={k.id}><Link to={`/akps/${k.id}`}>{k.akp_id} v{k.version}</Link> <Badge v={k.lifecycle} /> <Badge v={k.knowledge_state} /></div>) : <span className="hint">none</span>}</div>
      <div className="card"><h3>Endpoints</h3><table className="tbl"><thead><tr><th>Method</th><th>Path</th><th>Operation</th><th>Inferred</th></tr></thead><tbody>{data.endpoints.map((e) => <tr key={e.id}><Td l="method"><code>{e.method}</code></Td><Td l="path"><Link to={`/endpoints/${e.id}`}>{e.path}</Link></Td><Td l="operation">{e.operation_id}</Td><Td l="inferred">{e.inferred ? <Badge v="warn" label="inferred" /> : "no"}</Td></tr>)}</tbody></table></div>
      <div className="card"><h3>Evidence</h3><EvidenceList evidence={data.evidence} /></div>
      <div className="card"><h3>Canonical contract (immutable)</h3><JsonTree data={data.contract} /></div>
    </div>
  );
}