import { type ReactNode, useState } from "react";
import { Link } from "react-router";
import type { ApiError, Job } from "../api";
import { useJob } from "../hooks";

export function Loading({ what = "Loading" }: { what?: string }) { return <div className="loading" role="status">{what}…</div>; }
export function ErrorBox({ error }: { error: ApiError | Error | string | null }) {
  if (!error) return null;
  const e = error as ApiError;
  return <div className="alert error" role="alert">{typeof error === "string" ? error : `${e.code ? e.code + ": " : ""}${e.message}`}{e.correlationId ? <span className="hint"> (ref {e.correlationId})</span> : null}</div>;
}
export function Empty({ children }: { children: ReactNode }) { return <div className="empty">{children}</div>; }

const TONE: Record<string, string> = {
  succeeded: "good", done: "good", pass: "good", verified: "good", allow: "good", online: "good", ok: "good", resolved: "good", approved: "good", validated: "good", registered: "good", monitored: "good", tested: "good", independently_reproduced: "good", production: "good",
  failed: "critical", dead: "critical", fail: "critical", blocked: "critical", deny: "critical", critical: "critical", revoked: "critical", rejected: "critical", block: "critical",
  high: "serious", serious: "serious", quarantined: "serious", stale: "serious", deprecated: "serious", quarantine: "serious", unverified: "serious", research: "accent",
  medium: "warn", warn: "warn", warning: "warn", running: "warn", in_progress: "warn", intent: "warn", unobserved: "warn", unknown: "warn", discovery: "warn", open: "warn",
  low: "", info: "", queued: "", proposed: "", observed: "", documented: "", implemented: "accent", inspected: "", modeled: "", discovered: "", development: "", accepted: "",
};
export function Badge({ v, label }: { v: string | null | undefined; label?: string }) {
  const s = v ?? "—";
  return <span className={`badge ${TONE[s] ?? ""}`}>{label ?? s}</span>;
}
export function Bool({ v, yes = "yes", no = "no" }: { v: boolean | null | undefined; yes?: string; no?: string }) { return <span className={`badge ${v ? "good" : "warn"}`}>{v ? yes : no}</span>; }

export function Td({ l, children, className, wide }: { l: string; children: ReactNode; className?: string; wide?: boolean }) {
  return <td data-l={l} className={`${className ?? ""} ${wide ? "wide" : ""}`.trim()}>{children}</td>;
}

export function KV({ items }: { items: [string, ReactNode][] }) {
  return <dl className="kv">{items.map(([k, v]) => (<div key={k} style={{ display: "contents" }}><dt>{k}</dt><dd>{v ?? "—"}</dd></div>))}</dl>;
}

export function Tabs({ tabs, active, onChange }: { tabs: string[]; active: string; onChange: (t: string) => void }) {
  return <div className="tabs" role="tablist">{tabs.map((t) => <button key={t} role="tab" aria-selected={t === active} className={t === active ? "active" : ""} onClick={() => onChange(t)}>{t}</button>)}</div>;
}

export function JobStatus({ jobId, label = "job", onDone }: { jobId: string | null; label?: string; onDone?: (j: Job) => void }) {
  const job = useJob(jobId, onDone);
  if (!jobId) return null;
  if (!job) return <div className="alert">Submitted {label} {jobId.slice(0, 8)}… waiting for worker</div>;
  const terminal = ["done", "dead", "cancelled", "failed"].includes(job.state);
  return (
    <div className={`alert ${job.state === "done" ? "ok" : job.state === "dead" ? "error" : ""}`}>
      <div className="row between"><span>{label} <code>{job.id.slice(0, 8)}</code> <Badge v={job.state} /> {!terminal && <span className="hint">(attempt {job.attempts}, polling…)</span>}</span><Link to={`/operations?job=${job.id}`} className="hint">details</Link></div>
      {job.error && <pre style={{ marginTop: 6 }}>{job.error}</pre>}
      {job.result && <JsonTree data={job.result} open />}
    </div>
  );
}

export function JsonTree({ data, open = false, depth = 0 }: { data: unknown; open?: boolean; depth?: number }) {
  if (data === null || data === undefined) return <span className="lit">null</span>;
  if (typeof data === "string") return <span className="str">"{data.length > 400 ? data.slice(0, 400) + "…" : data}"</span>;
  if (typeof data === "number" || typeof data === "boolean") return <span className="num">{String(data)}</span>;
  const isArr = Array.isArray(data);
  const entries = isArr ? (data as unknown[]).map((v, i) => [String(i), v] as [string, unknown]) : Object.entries(data as Record<string, unknown>);
  if (entries.length === 0) return <span className="lit">{isArr ? "[]" : "{}"}</span>;
  const inner = (
    <ul>{entries.slice(0, 300).map(([k, v]) => (<li key={k}><span className="key">{isArr ? `[${k}]` : k}</span>: <JsonTree data={v} open={open && depth < 2} depth={depth + 1} /></li>))}{entries.length > 300 && <li className="lit">… {entries.length - 300} more</li>}</ul>
  );
  const wrapper = <details open={open || depth === 0}><summary>{isArr ? `array[${entries.length}]` : `object{${entries.length}}`}</summary>{inner}</details>;
  return depth === 0 ? <div className="jsontree">{wrapper}</div> : wrapper;
}

export function CopyBox({ text }: { text: string }) {
  const [ok, setOk] = useState(false);
  return (
    <div className="codebox">
      <button className="btn sm copy" onClick={() => { navigator.clipboard?.writeText(text).then(() => { setOk(true); setTimeout(() => setOk(false), 1500); }); }}>{ok ? "copied" : "copy"}</button>
      <pre>{text}</pre>
    </div>
  );
}

export function Confirm({ label, onConfirm, className = "btn sm danger", disabled }: { label: string; onConfirm: () => void; className?: string; disabled?: boolean }) {
  const [arm, setArm] = useState(false);
  if (!arm) return <button className={className} disabled={disabled} onClick={() => setArm(true)}>{label}</button>;
  return <span className="row"><button className={className} onClick={() => { setArm(false); onConfirm(); }}>confirm {label}</button><button className="btn sm" onClick={() => setArm(false)}>cancel</button></span>;
}

export function Pager({ offset, limit, total, onChange }: { offset: number; limit: number; total: number; onChange: (o: number) => void }) {
  return <div className="pager"><span>{total === 0 ? "0" : `${offset + 1}–${Math.min(offset + limit, total)}`} of {total}</span><button className="btn sm" disabled={offset === 0} onClick={() => onChange(Math.max(0, offset - limit))}>‹ prev</button><button className="btn sm" disabled={offset + limit >= total} onClick={() => onChange(offset + limit)}>next ›</button></div>;
}

export function Spinner() { return <span className="hint">working…</span>; }