"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import { useLive } from "@/lib/events";
import { fmtAgo, fmtDuration, fmtGB, fmtMs, fmtNum } from "@/lib/format";
import type { Model, SystemInfo } from "@/lib/types";
import { Meter, Pill, Sparkline, StatTile, StatusPill } from "@/components/ui";

interface Stats { totals: { requests: number; prompt_tokens: number; completion_tokens: number; avg_tps: number | null; avg_ttft_ms: number | null; errors: number }; per_model: { model_id: string; requests: number; completion_tokens: number; avg_tps: number | null }[]; all_time: { requests: number; completion_tokens: number; prompt_tokens: number } }

export default function Dashboard() {
  const live = useLive();
  const [sys, setSys] = useState<SystemInfo | null>(null);
  const [models, setModels] = useState<Model[]>([]);
  const [stats, setStats] = useState<Stats | null>(null);

  useEffect(() => {
    api.get<SystemInfo>("/api/system").then(setSys).catch(() => {});
    api.get<{ models: Model[] }>("/api/models").then((r) => setModels(r.models)).catch(() => {});
    api.get<{ requests: Stats }>("/api/system/metrics?minutes=60&hours=24").then((r) => setStats(r.requests)).catch(() => {});
  }, [live.version]);

  const t = live.metrics || sys?.telemetry;
  const hw = sys?.hardware;
  const mgr = live.manager || sys?.manager;
  const loaded = mgr?.loaded || [];
  const cur = loaded.find((w) => w.status === "ready");
  const memHist = live.metricsHistory.map((m) => m.mem_used_gb);
  const gpuHist = live.metricsHistory.map((m) => m.gpu_percent ?? 0);
  const cpuHist = live.metricsHistory.map((m) => m.cpu_percent);
  const budget = sys?.policy.max_model_memory_gb ?? 45;
  const installed = models.filter((m) => m.installed);
  const recentTps = live.requests.map((r) => Number(r.tps) || 0).filter(Boolean).reverse();

  return (
    <div className="flex flex-col gap-5">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="text-xl font-semibold tracking-tight">Dashboard</h1>
          <div className="text-sm text-ink-3 mt-0.5">
            {hw ? <>{hw.chip} · {hw.memory_gb.toFixed(0)} GB unified memory · {hw.gpu_cores ?? "—"} GPU cores · {hw.cpu_cores} CPU cores · macOS {hw.os_version}</> : "…"}
          </div>
        </div>
        <div className="flex items-center gap-2 text-xs text-ink-3">
          <Pill tone={t?.mem_pressure_level === "normal" ? "good" : t?.mem_pressure_level === "warning" ? "warn" : "bad"}>Memory {t?.mem_pressure_level ?? "—"}</Pill>
          <Pill tone={t?.thermal_state === "nominal" ? "good" : "warn"}>Thermal {t?.thermal_state ?? "—"}</Pill>
          {t?.swap_used_gb ? <Pill tone="warn">Swap {fmtGB(t.swap_used_gb)}</Pill> : null}
        </div>
      </div>

      {live.alerts.length > 0 && (
        <div className="card border-[#5a4210] bg-[#1d1708] px-4 py-2.5 text-sm text-[#f0b23a]">{live.alerts[live.alerts.length - 1].message}</div>
      )}

      {/* Current model */}
      <section className="card p-5">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="min-w-0">
            <div className="label mb-1">Current model</div>
            {cur ? (
              <>
                <Link href={`/models/${cur.model_id}`} className="text-lg font-semibold tracking-tight hover:underline truncate block">{cur.model_id}</Link>
                <div className="text-sm text-ink-3 mt-1 flex flex-wrap gap-x-3 gap-y-1 num">
                  <span>{cur.runtime === "mlx" ? "MLX" : "llama.cpp"}</span>
                  <span>context {Math.round(cur.context / 1024)}K</span>
                  <span>memory {fmtGB(cur.measured_gb || cur.estimate_gb)}</span>
                  <span>loaded in {fmtMs(cur.load_ms)}</span>
                  <span>warm TTFT {fmtMs(cur.warm?.ttft_ms as number)}</span>
                  <span>{cur.requests} requests</span>
                  {cur.in_flight > 0 && <span className="text-accent">{cur.in_flight} in flight</span>}
                  {cur.pinned && <span className="text-violet">pinned</span>}
                </div>
              </>
            ) : Object.keys(mgr?.progress || {}).length ? (
              <div className="text-lg font-semibold tracking-tight text-accent pulse">Loading {Object.keys(mgr!.progress)[0]}… <span className="text-sm text-ink-3 font-normal">{Object.values(mgr!.progress)[0].status} · {Object.values(mgr!.progress)[0].elapsed_seconds}s</span></div>
            ) : (
              <div className="text-lg font-semibold tracking-tight text-ink-3">No model loaded <span className="text-sm font-normal">— the next API request loads it on demand</span></div>
            )}
            {loaded.length > 1 && (
              <div className="mt-2 flex flex-wrap gap-1.5">{loaded.filter((w) => w !== cur).map((w) => <Pill key={w.model_id} tone="accent">{w.model_id} · {fmtGB(w.measured_gb || w.estimate_gb)}</Pill>)}</div>
            )}
          </div>
          <div className="flex gap-2">
            <Link href="/playground" className="btn btn-primary">Open playground</Link>
            <Link href="/models" className="btn">Model library</Link>
          </div>
        </div>
        <div className="mt-4">
          <div className="flex justify-between text-xs text-ink-3 mb-1.5 num">
            <span>Model memory budget · {fmtGB(mgr?.resident_gb ?? 0)} resident of {fmtGB(budget, 0)}</span>
            <span>{t ? `${t.mem_used_gb.toFixed(1)} / ${t.mem_total_gb.toFixed(0)} GB system used` : ""}</span>
          </div>
          <Meter value={mgr?.resident_gb ?? 0} max={budget} tone={(mgr?.resident_gb ?? 0) > budget * 0.9 ? "warn" : "accent"} />
        </div>
      </section>

      {/* Telemetry */}
      <section className="grid grid-cols-2 lg:grid-cols-4 gap-3">
        <StatTile label="RAM used" value={t ? `${t.mem_used_gb.toFixed(1)} GB` : "—"} sub={t ? `${t.mem_available_gb.toFixed(1)} GB available · pressure ${t.mem_pressure_percent}%` : ""}>
          <Sparkline data={memHist} max={t?.mem_total_gb} unit=" GB" />
        </StatTile>
        <StatTile label="GPU" value={t?.gpu_percent != null ? `${t.gpu_percent.toFixed(0)}%` : "—"} sub={t?.gpu_memory_gb != null ? `${t.gpu_memory_gb.toFixed(1)} GB in use by Metal` : "Device utilization"}>
          <Sparkline data={gpuHist} max={100} color="var(--series-3)" unit="%" />
        </StatTile>
        <StatTile label="CPU" value={t ? `${t.cpu_percent.toFixed(0)}%` : "—"} sub={t ? `load ${t.load_avg.map((x) => x.toFixed(1)).join(" / ")}` : ""}>
          <Sparkline data={cpuHist} max={100} color="var(--series-2)" unit="%" />
        </StatTile>
        <StatTile label="Throughput" value={recentTps.length ? `${recentTps[recentTps.length - 1].toFixed(1)} tok/s` : cur && stats?.per_model.find((p) => p.model_id === cur.model_id)?.avg_tps ? `${stats.per_model.find((p) => p.model_id === cur.model_id)!.avg_tps!.toFixed(1)} tok/s` : "—"} sub="last requests, generation">
          <Sparkline data={recentTps} color="var(--series-7)" unit=" tok/s" />
        </StatTile>
      </section>

      <section className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
        <StatTile label="Requests (24h)" value={fmtNum(stats?.totals.requests ?? 0)} sub={`${fmtNum(stats?.totals.errors ?? 0)} errors`} />
        <StatTile label="Tokens generated (24h)" value={fmtNum(stats?.totals.completion_tokens ?? 0)} sub={`${fmtNum(stats?.all_time.completion_tokens ?? 0)} all time`} />
        <StatTile label="Avg TTFT" value={fmtMs(stats?.totals.avg_ttft_ms)} sub={`avg ${stats?.totals.avg_tps ? stats.totals.avg_tps.toFixed(1) : "—"} tok/s`} />
        <StatTile label="Installed models" value={installed.length} sub={`${installed.filter((m) => m.runtime === "mlx").length} MLX · ${installed.filter((m) => m.runtime === "llamacpp").length} GGUF`} />
        <StatTile label="Disk free" value={t ? `${t.disk_free_gb.toFixed(0)} GB` : "—"} sub={t ? `of ${t.disk_total_gb.toFixed(0)} GB` : ""} />
        <StatTile label="Uptime" value={fmtDuration(t?.app_uptime_seconds ?? 0)} sub={`system ${fmtDuration(t?.uptime_seconds ?? 0)}`} />
      </section>

      {/* Models + activity */}
      <section className="grid lg:grid-cols-[1.4fr_1fr] gap-4">
        <div className="card">
          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
            <div className="font-medium text-sm">Models</div>
            <Link href="/models" className="text-xs text-accent hover:underline">All models →</Link>
          </div>
          <div className="overflow-x-auto">
            <table className="tbl">
              <thead><tr><th>Model</th><th>Runtime</th><th className="text-right">Est. RAM</th><th className="text-right">Tok/s</th><th>Status</th></tr></thead>
              <tbody>
                {installed.slice().sort((a, b) => Number(b.loaded) - Number(a.loaded) || Number(b.favorite) - Number(a.favorite) || (b.last_used_at || 0) - (a.last_used_at || 0)).slice(0, 8).map((m) => (
                  <tr key={m.id} className="row-link" onClick={() => (location.href = `/models/${m.id}`)}>
                    <td><div className="font-medium truncate max-w-[260px]">{m.favorite && <span className="text-warn mr-1">★</span>}{m.name}</div><div className="text-xs text-ink-3">{m.family} · {m.quantization}</div></td>
                    <td className="text-ink-2">{m.runtime === "mlx" ? "MLX" : "GGUF"}</td>
                    <td className="text-right num">{fmtGB(m.estimated_ram_gb)}</td>
                    <td className="text-right num">{m.avg_tps ? m.avg_tps.toFixed(1) : "—"}</td>
                    <td><StatusPill status={m.status} /></td>
                  </tr>
                ))}
                {!installed.length && <tr><td colSpan={5} className="text-ink-3 text-center py-8">No models yet — <Link className="text-accent" href="/downloads">download one</Link></td></tr>}
              </tbody>
            </table>
          </div>
        </div>
        <div className="card">
          <div className="px-4 py-3 border-b border-border font-medium text-sm">Live activity</div>
          <ul className="divide-y divide-border text-sm max-h-[420px] overflow-auto">
            {live.requests.slice(0, 20).map((r, i) => (
              <li key={i} className="px-4 py-2.5 flex items-center justify-between gap-3">
                <div className="min-w-0">
                  <div className="truncate">{String(r.model_id)}</div>
                  <div className="text-xs text-ink-3">{String(r.endpoint).replace("/v1/", "")}{r.stream ? " · stream" : ""}</div>
                </div>
                <div className="text-right text-xs num shrink-0">
                  <div className={Number(r.status) >= 400 ? "text-bad" : "text-ink-2"}>{Number(r.status) >= 400 ? `error ${r.status}` : `${fmtNum(Number(r.completion_tokens) || 0)} tok · ${r.tps ? Number(r.tps).toFixed(1) : "—"} tok/s`}</div>
                  <div className="text-ink-3">TTFT {fmtMs(Number(r.ttft_ms))} · {fmtMs(Number(r.total_ms))}</div>
                </div>
              </li>
            ))}
            {!live.requests.length && <li className="px-4 py-8 text-center text-ink-3 text-xs">Requests appear here in real time{cur ? "" : ` · last used ${fmtAgo(installed[0]?.last_used_at)}`}</li>}
          </ul>
        </div>
      </section>
    </div>
  );
}