"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import { useLive } from "@/lib/events";
import { fmtBytes, fmtDate, fmtDuration, fmtGB, fmtMs } from "@/lib/format";
import type { SystemInfo } from "@/lib/types";
import { KV, Meter, PageHeader, Pill, Sparkline, StatTile, Tabs } from "@/components/ui";

interface Storage { total_gb: number; used_gb: number; free_gb: number; models_gb: number; logs_gb: number; database_gb: number; cache_gb: number; other_gb: number; model_root: string; min_free_gb: number; models: { id: string; name: string; disk_size_bytes: number; runtime: string; last_used_at: number | null }[] }
interface Procs { workers: { model_id: string; pid: number; port: number; runtime: string; rss_gb: number; cpu_percent: number; status: string; threads: number }[]; server: { pid: number; rss_gb: number; cpu_percent: number; threads: number } }
interface Hist { ts: number; mem_used_gb: number; gpu_percent: number | null; cpu_percent: number; swap_used_gb: number; worker_rss_gb: number }

export default function SystemPage() {
  const live = useLive();
  const [sys, setSys] = useState<SystemInfo | null>(null);
  const [storage, setStorage] = useState<Storage | null>(null);
  const [procs, setProcs] = useState<Procs | null>(null);
  const [hist, setHist] = useState<Hist[]>([]);
  const [range, setRange] = useState(60);
  const [tab, setTab] = useState<"overview" | "storage" | "processes" | "logs">("overview");
  const [audit, setAudit] = useState<{ created_at: number; actor: string; action: string; target: string | null; detail: string | null }[]>([]);
  const [events, setEvents] = useState<{ created_at: number; model_id: string | null; event: string; detail: string | null }[]>([]);

  useEffect(() => {
    api.get<SystemInfo>("/api/system").then(setSys).catch(() => {});
    api.get<{ history: Hist[] }>(`/api/system/metrics?minutes=${range}`).then((r) => setHist(r.history)).catch(() => {});
  }, [range, live.version]);
  useEffect(() => {
    if (tab === "storage") api.get<Storage>("/api/system/storage").then(setStorage).catch(() => {});
    if (tab === "processes") api.get<Procs>("/api/system/processes").then(setProcs).catch(() => {});
    if (tab === "logs") { api.get<{ logs: typeof audit }>("/api/logs/audit?limit=100").then((r) => setAudit(r.logs)); api.get<{ events: typeof events }>("/api/logs/events?limit=100").then((r) => setEvents(r.events)); }
  }, [tab, live.version]);

  const t = live.metrics || sys?.telemetry;
  const hw = sys?.hardware;
  const series = hist.length > 3 ? hist : live.metricsHistory.map((m) => ({ ts: m.ts, mem_used_gb: m.mem_used_gb, gpu_percent: m.gpu_percent, cpu_percent: m.cpu_percent, swap_used_gb: m.swap_used_gb, worker_rss_gb: m.worker_rss_gb || 0 }));

  return (
    <div>
      <PageHeader title="System" sub={hw ? `${hw.hostname} · ${hw.chip} · ${hw.os} ${hw.os_version} · Python ${hw.python} · LLM API ${sys?.version}` : "…"} />
      <Tabs value={tab} onChange={setTab} tabs={[{ id: "overview", label: "Overview" }, { id: "storage", label: "Storage" }, { id: "processes", label: "Processes" }, { id: "logs", label: "Audit & events" }]} />

      {tab === "overview" && t && hw && (
        <div className="flex flex-col gap-4 mt-4">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
            <StatTile label="Unified memory" value={`${t.mem_used_gb.toFixed(1)} / ${t.mem_total_gb.toFixed(0)} GB`} sub={`${t.mem_available_gb.toFixed(1)} GB available · wired ${fmtGB(t.mem_wired_gb)} · compressed ${fmtGB(t.mem_compressed_gb)}`}>
              <Meter value={t.mem_used_gb} max={t.mem_total_gb} tone={t.mem_pressure_level === "normal" ? "accent" : t.mem_pressure_level === "warning" ? "warn" : "bad"} />
            </StatTile>
            <StatTile label="Memory pressure" value={<span className={t.mem_pressure_level === "normal" ? "text-good" : t.mem_pressure_level === "warning" ? "text-warn" : "text-bad"}>{t.mem_pressure_level}</span>} sub={`${t.mem_pressure_percent}% · swap ${fmtGB(t.swap_used_gb)} / ${fmtGB(t.swap_total_gb)}`} />
            <StatTile label="GPU" value={t.gpu_percent != null ? `${t.gpu_percent.toFixed(0)}%` : "n/a"} sub={`${hw.gpu_cores ?? "—"} cores · renderer ${t.gpu_renderer_percent ?? "—"}% · ${fmtGB(t.gpu_memory_gb)} Metal`} />
            <StatTile label="Thermal" value={t.thermal_state} sub={t.thermal_cpu_speed_limit != null ? `CPU speed limit ${t.thermal_cpu_speed_limit}%` : "no throttling recorded"} />
          </div>
          <div className="card p-4">
            <div className="flex items-center justify-between mb-3">
              <div className="font-medium text-sm">History</div>
              <div className="flex gap-1">{[15, 60, 360, 1440].map((m) => <button key={m} onClick={() => setRange(m)} className={`btn btn-sm ${range === m ? "btn-primary" : ""}`}>{m < 60 ? `${m}m` : `${m / 60}h`}</button>)}</div>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              <div><div className="label mb-1">Memory used (GB)</div><Sparkline data={series.map((h) => h.mem_used_gb)} max={t.mem_total_gb} height={80} unit=" GB" /></div>
              <div><div className="label mb-1">Worker memory (GB)</div><Sparkline data={series.map((h) => h.worker_rss_gb || 0)} max={t.mem_total_gb} height={80} color="var(--series-7)" unit=" GB" /></div>
              <div><div className="label mb-1">GPU utilization (%)</div><Sparkline data={series.map((h) => h.gpu_percent ?? 0)} max={100} height={80} color="var(--series-3)" unit="%" /></div>
              <div><div className="label mb-1">CPU (%)</div><Sparkline data={series.map((h) => h.cpu_percent)} max={100} height={80} color="var(--series-2)" unit="%" /></div>
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="card p-4"><div className="label mb-2">Hardware</div>
              <KV k="Chip" v={hw.chip} /><KV k="Memory" v={`${hw.memory_gb} GB unified`} /><KV k="CPU" v={`${hw.cpu_cores} cores (${hw.performance_cores ?? "?"} performance + ${hw.efficiency_cores ?? "?"} efficiency)`} /><KV k="GPU" v={`${hw.gpu_cores ?? "?"} cores`} /><KV k="Disk" v={`${hw.disk_total_gb} GB`} /><KV k="OS" v={`${hw.os} ${hw.os_version}`} /><KV k="Uptime" v={fmtDuration(t.uptime_seconds)} /><KV k="Load average" v={t.load_avg.join(" / ")} />
            </div>
            <div className="card p-4"><div className="label mb-2">Runtimes & policy</div>
              <KV k="MLX" v={sys?.runtimes.mlx ? `mlx ${sys.runtimes.mlx} · mlx-lm ${sys.runtimes.mlx_lm}` : <Pill tone="bad">missing</Pill>} />
              <KV k="mlx-vlm (vision)" v={sys?.runtimes.mlx_vlm || <Pill tone="warn">not installed</Pill>} />
              <KV k="llama.cpp" v={sys?.runtimes.llama_cpp || <Pill tone="warn">not installed</Pill>} />
              <KV k="Model memory budget" v={`${sys?.policy.max_model_memory_gb} GB (absolute ${sys?.policy.absolute_max_memory_gb} GB)`} />
              <KV k="macOS reserve" v={`${sys?.policy.macos_reserve_gb} GB`} />
              <KV k="Simultaneous models" v={sys?.policy.max_simultaneous_models} />
              <KV k="Disk reserve" v={`${sys?.policy.min_free_disk_gb} GB`} />
              <KV k="Server started" v={fmtDate(sys?.started_at)} />
            </div>
          </div>
        </div>
      )}

      {tab === "storage" && storage && (
        <div className="flex flex-col gap-4 mt-4">
          <div className="card p-4">
            <div className="flex justify-between text-sm mb-2"><span>{storage.used_gb.toFixed(0)} GB used of {storage.total_gb.toFixed(0)} GB</span><span className="text-ink-3">{storage.free_gb.toFixed(0)} GB free · reserve {storage.min_free_gb} GB</span></div>
            <div className="flex h-3 rounded-full overflow-hidden bg-surface-3 gap-px">
              {[["models_gb", "var(--series-1)"], ["cache_gb", "var(--series-4)"], ["logs_gb", "var(--series-2)"], ["database_gb", "var(--series-3)"], ["other_gb", "var(--color-border-strong)"]].map(([k, c]) => (
                <div key={k} title={k} style={{ width: `${(storage[k as keyof Storage] as number) / storage.total_gb * 100}%`, background: c }} />
              ))}
            </div>
            <div className="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-xs text-ink-2 num">
              <span><i className="inline-block w-2 h-2 rounded-sm mr-1" style={{ background: "var(--series-1)" }} />Models {storage.models_gb.toFixed(1)} GB</span>
              <span><i className="inline-block w-2 h-2 rounded-sm mr-1" style={{ background: "var(--series-4)" }} />HF cache {storage.cache_gb.toFixed(1)} GB</span>
              <span><i className="inline-block w-2 h-2 rounded-sm mr-1" style={{ background: "var(--series-2)" }} />Logs {storage.logs_gb.toFixed(2)} GB</span>
              <span><i className="inline-block w-2 h-2 rounded-sm mr-1" style={{ background: "var(--series-3)" }} />Database {storage.database_gb.toFixed(2)} GB</span>
              <span><i className="inline-block w-2 h-2 rounded-sm mr-1" style={{ background: "var(--color-border-strong)" }} />Other {storage.other_gb.toFixed(0)} GB</span>
            </div>
            <div className="text-xs text-ink-3 mt-2 mono">{storage.model_root}</div>
          </div>
          <div className="card overflow-x-auto">
            <table className="tbl"><thead><tr><th>Model</th><th>Runtime</th><th className="text-right">Size</th><th>Last used</th></tr></thead>
              <tbody>{storage.models.map((m) => <tr key={m.id} className="row-link" onClick={() => (location.href = `/models/${m.id}`)}><td className="font-medium">{m.name}</td><td className="text-ink-2">{m.runtime}</td><td className="text-right num">{fmtBytes(m.disk_size_bytes)}</td><td className="text-ink-2">{m.last_used_at ? fmtDate(m.last_used_at) : "never"}</td></tr>)}</tbody></table>
          </div>
          <div className="text-xs text-ink-3">Cleanup is manual by design: delete a model from its page (confirmation required). Nothing is removed automatically.</div>
        </div>
      )}

      {tab === "processes" && procs && (
        <div className="card mt-4 overflow-x-auto">
          <table className="tbl"><thead><tr><th>Process</th><th>PID</th><th>Port</th><th>Runtime</th><th className="text-right">Memory</th><th className="text-right">CPU</th><th className="text-right">Threads</th><th>Status</th></tr></thead>
            <tbody>
              <tr><td className="font-medium">llm-api server</td><td className="num">{procs.server.pid}</td><td></td><td>python</td><td className="text-right num">{fmtGB(procs.server.rss_gb, 2)}</td><td className="text-right num">{procs.server.cpu_percent}%</td><td className="text-right num">{procs.server.threads}</td><td><Pill tone="good">running</Pill></td></tr>
              {procs.workers.map((w) => <tr key={w.pid}><td className="font-medium">worker · {w.model_id}</td><td className="num">{w.pid}</td><td className="num">{w.port}</td><td>{w.runtime}</td><td className="text-right num">{fmtGB(w.rss_gb, 2)}</td><td className="text-right num">{w.cpu_percent}%</td><td className="text-right num">{w.threads}</td><td><Pill tone={w.status === "ready" ? "good" : "accent"}>{w.status}</Pill></td></tr>)}
              {!procs.workers.length && <tr><td colSpan={8} className="text-center text-ink-3 py-6">No inference worker running.</td></tr>}
            </tbody></table>
        </div>
      )}

      {tab === "logs" && (
        <div className="grid lg:grid-cols-2 gap-4 mt-4">
          <div className="card"><div className="px-4 py-2.5 border-b border-border font-medium text-sm">Model events</div>
            <div className="divide-y divide-border text-xs max-h-[60vh] overflow-auto">{events.map((e, i) => <div key={i} className="px-4 py-2 flex gap-3"><span className="text-ink-3 shrink-0 w-36">{fmtDate(e.created_at)}</span><span className="font-medium w-28 shrink-0">{e.event}</span><span className="truncate text-ink-2">{e.model_id}{e.detail ? ` · ${e.detail}` : ""}</span></div>)}</div></div>
          <div className="card"><div className="px-4 py-2.5 border-b border-border font-medium text-sm">Audit log</div>
            <div className="divide-y divide-border text-xs max-h-[60vh] overflow-auto">{audit.map((a, i) => <div key={i} className="px-4 py-2 flex gap-3"><span className="text-ink-3 shrink-0 w-36">{fmtDate(a.created_at)}</span><span className="font-medium w-32 shrink-0">{a.action}</span><span className="truncate text-ink-2">{a.actor} {a.target ? `→ ${a.target}` : ""} {a.detail || ""}</span></div>)}</div></div>
        </div>
      )}
      <div className="hidden">{fmtMs(0)}</div>
    </div>
  );
}