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

type E = Endpoint & { api_version_id: string; version: string; api_id: string; api_name: string; base_url: string | null; variables: Variable[]; executions: ExecutionRow[] };

export default function EndpointDetail() {
  const { id } = useParams();
  const { data, error, loading } = useFetch<E>(`endpoints/${id}`);
  const projects = useFetch<{ projects: Project[] }>("projects");
  if (loading) return <Loading />; if (error) return <ErrorBox error={error} />; if (!data) return null;
  return (
    <div>
      <h1><code>{data.method}</code> {data.path}</h1>
      <div className="card"><KV items={[["API", <Link to={`/apis/${data.api_id}`}>{data.api_name}</Link>], ["Version", <Link to={`/versions/${data.api_version_id}`}>{data.version}</Link>], ["Operation", data.operation_id], ["Base URL", <code>{data.base_url}</code>], ["Summary", data.summary ?? "—"], ["Description", data.description ?? "—"], ["Evidence", data.inferred ? <Badge v="warn" label="schema inferred from probe" /> : <Badge v="good" label="documented" />]]} /></div>
      <EndpointRow e={data} apiId={data.api_id} projects={projects.data?.projects.map((p) => ({ slug: p.slug, name: `${p.name} (${p.policy_mode})` })) ?? [{ slug: "default", name: "default" }]} />
      <div className="card"><h3>Variables</h3>{data.variables.length ? <table className="tbl"><thead><tr><th>Name</th><th>Path</th><th>Type</th><th>Unit</th></tr></thead><tbody>{data.variables.map((v) => <tr key={v.id}><Td l="name"><code>{v.name}</code></Td><Td l="path"><code>{v.json_path}</code></Td><Td l="type">{v.data_type}</Td><Td l="unit">{v.unit ?? "—"}</Td></tr>)}</tbody></table> : <span className="hint">none</span>}</div>
      <div className="card"><h3>Recent executions</h3>{data.executions.length ? data.executions.map((e) => <div key={e.id} className="row between" style={{ fontSize: 13 }}><Link to={`/executions/${e.id}`}>{fmtDate(e.created_at)}</Link><span><Badge v={e.state} /> {e.status_code ?? "—"} · {e.duration_ms ?? "—"} ms</span></div>) : <span className="hint">none</span>}</div>
    </div>
  );
}