"use client";

import { Cpu, Database, MemoryStick, Server } from "lucide-react";
import { useAdminQuery } from "@/components/admin/use-query";
import type { SystemResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, DataTable, ErrorState, TableSkeleton, TileSkeleton, StatGrid, StatTile, KV, Pill, Mono, type Column } from "@/components/admin/primitives";
import { bytes, duration, int, ms, num } from "@/components/admin/format";
import { cn } from "@/lib/utils";

type Service = SystemResponse["services"][number];
type TableRow = SystemResponse["tables"][number] & { __max: number };

const serviceCols: Column<Service>[] = [
  { key: "status", header: "Status", render: (s) => <Pill tone={s.status === "ok" ? "success" : "danger"} dot>{s.status}</Pill> },
  { key: "name", header: "Service", render: (s) => <span className="font-medium text-fg">{s.name}</span> },
  { key: "node", header: "Node", mono: true, render: (s) => <Mono>{s.node}</Mono> },
  { key: "version", header: "Version", mono: true, render: (s) => <Mono>v{s.version}</Mono> },
  { key: "uptime", header: "Uptime", align: "right", render: (s) => (s.uptimeSec === null ? <span className="text-fg-4">—</span> : duration(s.uptimeSec)) },
  { key: "latency", header: "Latency", align: "right", render: (s) => (s.latencyMs < 0 ? <span className="text-danger">unreachable</span> : ms(s.latencyMs, 1)) },
];

const tableCols: Column<TableRow>[] = [
  { key: "table", header: "Table", mono: true, render: (t) => <Mono className="text-fg">{t.table}</Mono> },
  { key: "rows", header: "Live rows", align: "right", render: (t) => int(t.rows) },
  { key: "bytes", header: "Total size", align: "right", render: (t) => bytes(t.bytes) },
  {
    key: "share",
    header: "",
    render: (t) => <span className="block h-1.5 w-full max-w-[160px] overflow-hidden rounded-full bg-surface-3"><span className="block h-full rounded-full bg-accent/70" style={{ width: `${Math.min(100, (num(t.bytes) / num(t.__max)) * 100)}%` }} /></span>,
  },
];

export default function AdminSystemPage() {
  const q = useAdminQuery<SystemResponse>("/api/admin/system", { refreshMs: 15_000 });
  const d = q.data;
  const maxBytes = d ? Math.max(1, ...d.tables.map((t) => num(t.bytes))) : 1;
  const tables = (d?.tables ?? []).map((t) => ({ ...t, __max: maxBytes }));
  const down = d?.services.filter((s) => s.status !== "ok").length ?? 0;
  const memPct = d ? 1 - d.process.freeMemMb / Math.max(1, d.process.totalMemMb) : 0;

  return (
    <>
      <PageHeader title="System Health" description="API process, dependencies and storage. Refreshes every 15 seconds." actions={<RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />} />
      {q.error && !d ? (
        <ErrorState error={q.error} onRetry={() => void q.refresh()} />
      ) : !d ? (
        <div className="space-y-4">
          <TileSkeleton count={4} cols={4} />
          <Panel>
            <TableSkeleton rows={3} cols={6} />
          </Panel>
        </div>
      ) : (
        <div className={cn("space-y-4", q.stale && "opacity-70")}>
          <StatGrid cols={4}>
            <StatTile label="Services" value={down === 0 ? "All healthy" : `${down} down`} tone={down === 0 ? "success" : "danger"} sub={`${d.services.length} monitored · ${d.games} games loaded`} icon={<Server className="h-3.5 w-3.5" />} />
            <StatTile label="Spin latency · 1 h" value={<span>{ms(d.spins.avg)} <span className="text-fg-4">avg</span></span>} sub={`p95 ${ms(d.spins.p95)} · n=${int(d.spins.n)}`} tone={num(d.spins.p95) > 250 ? "danger" : "neutral"} />
            <StatTile label="Process memory" value={`${int(d.process.rssMb)} MB`} sub={`heap ${int(d.process.heapMb)} MB · Node ${d.process.nodeVersion}`} icon={<MemoryStick className="h-3.5 w-3.5" />} />
            <StatTile label="Load average" value={d.process.load.map((l) => l.toFixed(2)).join(" / ")} sub={`${d.process.cpus} CPUs · ${d.process.platform}`} tone={d.process.load[0] > d.process.cpus ? "danger" : "neutral"} icon={<Cpu className="h-3.5 w-3.5" />} />
          </StatGrid>

          <Panel title="Services" padded={false}>
            <DataTable columns={serviceCols} rows={d.services} rowKey={(s) => s.name} dense />
          </Panel>

          <div className="grid gap-4 xl:grid-cols-[1fr_1.4fr]">
            <Panel title="Host" description="Node running the API process">
              <KV
                items={[
                  { label: "Platform", value: d.process.platform, mono: true },
                  { label: "Node.js", value: d.process.nodeVersion, mono: true },
                  { label: "CPUs", value: String(d.process.cpus) },
                  { label: "Load 1 / 5 / 15", value: d.process.load.map((l) => l.toFixed(2)).join(" / "), mono: true },
                  { label: "Memory used", value: `${int(d.process.totalMemMb - d.process.freeMemMb)} / ${int(d.process.totalMemMb)} MB` },
                  { label: "RSS / heap", value: `${int(d.process.rssMb)} / ${int(d.process.heapMb)} MB` },
                ]}
              />
              <div className="mt-4">
                <div className="mb-1 flex justify-between text-[11px] text-fg-4">
                  <span>Host memory</span>
                  <span>{Math.round(memPct * 100)}%</span>
                </div>
                <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-3">
                  <div className={cn("h-full rounded-full", memPct > 0.9 ? "bg-danger" : memPct > 0.75 ? "bg-[#ffb454]" : "bg-accent")} style={{ width: `${Math.round(memPct * 100)}%` }} />
                </div>
              </div>
            </Panel>
            <Panel title="Largest tables" description="pg_stat_user_tables, top 15 by total relation size" padded={false} actions={<Database className="h-3.5 w-3.5 text-fg-4" />}>
              <DataTable columns={tableCols} rows={tables} rowKey={(t) => t.table} dense empty="No table statistics available." />
            </Panel>
          </div>
        </div>
      )}
    </>
  );
}