import { Link } from "react-router";
import type { Overview as O } from "../api";
import { useFetch, ago, fmtDate } from "../hooks";
import { Badge, Empty, ErrorBox, Loading, Td } from "../components/ui";
import { Breakdown, DailyBars } from "../components/charts";

const TILES: [string, string][] = [["apis", "APIs"], ["endpoints", "Endpoints"], ["packages", "Knowledge packages"], ["executions", "Executions"], ["executions_24h", "Executions (24 h)"], ["datasets", "Datasets"], ["verified_datasets", "Verified datasets"], ["open_debt", "Open debt"], ["critical_debt", "Critical debt"], ["credentials", "Credentials"], ["projects", "Projects"], ["agents", "Agents"]];
const SEV: Record<string, string> = { critical: "critical", high: "serious", medium: "warn", low: "" };

export default function Overview() {
  const { data, error, loading } = useFetch<O>("overview");
  if (loading) return <Loading what="Loading overview" />;
  if (error) return <ErrorBox error={error} />;
  if (!data) return null;
  const c = data.counts;
  return (
    <div>
      <div className="row between"><h1>Overview</h1><span className="hint">AKOS {data.version}</span></div>
      <div className="tiles" style={{ marginBottom: 14 }}>{TILES.map(([k, l]) => <div className="tile" key={k}><div className="k">{l}</div><div className="v">{(c[k] ?? 0).toLocaleString()}</div></div>)}</div>
      <div className="grid c2">
        <div className="card"><h3>Executions per day (14 d)</h3><DailyBars data={data.daily} /></div>
        <div className="card"><h3>Workers & queue</h3>
          {data.workers.length === 0 ? <div className="alert error">No live worker — jobs will not run. Check Operations.</div> : data.workers.map((w) => <div key={w.name} className="row between" style={{ fontSize: 13 }}><span><Badge v="online" /> {w.name} <span className="hint">v{w.version}</span></span><span className="hint">{w.current_job ? `job ${w.current_job.slice(0, 8)}` : "idle"} · seen {ago(w.last_seen)}</span></div>)}
          <div className="row" style={{ marginTop: 10 }}><span className="badge">queued {data.jobs.queued}</span><span className="badge warn">running {data.jobs.running}</span><span className={`badge ${data.jobs.dead ? "critical" : ""}`}>dead {data.jobs.dead}</span>{data.jobs.oldest_queued && <span className="hint">oldest queued {ago(data.jobs.oldest_queued)}</span>}</div>
          <h3>Executions by state (7 d)</h3><Breakdown items={data.execution_states_7d.map((s) => ({ label: s.state, n: s.n }))} />
        </div>
        <div className="card"><h3>API lifecycle</h3><Breakdown items={data.lifecycle.map((s) => ({ label: s.lifecycle, n: s.n }))} /><h3>Package knowledge state</h3><Breakdown items={data.knowledge_states.map((s) => ({ label: s.knowledge_state, n: s.n }))} color="var(--s3)" /></div>
        <div className="card"><h3>Open knowledge debt by severity</h3>{data.debt.length ? <Breakdown items={["critical", "high", "medium", "low"].filter((s) => data.debt.some((d) => d.severity === s)).map((s) => ({ label: s, n: data.debt.find((d) => d.severity === s)!.n, tone: SEV[s] || "s1" }))} /> : <Empty>No open debt.</Empty>}<p><Link to="/debt">Open Knowledge Debt →</Link></p></div>
      </div>
      <div className="card"><div className="row between"><h3>Recent executions</h3><Link to="/executions">all →</Link></div>
        {data.recent_executions.length === 0 ? <Empty>No executions yet. Use the MCP tool <code>execute_api</code> or the CLI.</Empty> : (
          <table className="tbl"><thead><tr><th>When</th><th>State</th><th>API</th><th>Request</th><th>Status</th><th>ms</th></tr></thead><tbody>
            {data.recent_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} /></Td><Td l="api">{e.api_name ?? <span className="hint">unregistered</span>}</Td><Td l="request" wide><span className="truncate mono">{e.method} {e.url}</span></Td><Td l="status">{e.status_code ?? "—"}</Td><Td l="ms" className="num">{e.duration_ms ?? "—"}</Td></tr>)}
          </tbody></table>)}
      </div>
    </div>
  );
}