"use client";

import { useEffect, useMemo, useState } from "react";
import { api, ApiError } from "@/lib/api";
import { useLive } from "@/lib/events";
import { fmtAgo, fmtBytes, fmtGB, fmtParams } from "@/lib/format";
import type { Candidate, Job } from "@/lib/types";
import { CompatPill, Modal, PageHeader, Pill, Progress, SizePill, Spinner, useToast } from "@/components/ui";

const TASKS = ["", "general", "coding", "reasoning", "vision", "embedding", "reranker"];
const SIZES = ["", "TINY", "SMALL", "MEDIUM", "LARGE", "XL"];

export default function HarvesterPage() {
  const live = useLive();
  const toast = useToast();
  const [rows, setRows] = useState<Candidate[]>([]);
  const [starter, setStarter] = useState<{ slot: string; candidate: Candidate | null }[]>([]);
  const [lastScan, setLastScan] = useState<number | null>(null);
  const [task, setTask] = useState("");
  const [rt, setRt] = useState("");
  const [size, setSize] = useState("");
  const [q, setQ] = useState("");
  const [dups, setDups] = useState(false);
  const [opts, setOpts] = useState(false);
  const [scanOpts, setScanOpts] = useState({ runtimes: ["mlx", "gguf"], min_downloads: 500, limit_per_author: 150, max_ram_gb: "", search: "" });
  const [busy, setBusy] = useState(false);

  const scanJob = Object.values(live.jobs).find((j) => j.kind === "harvest" && (j.status === "running" || j.status === "queued"));

  const load = () => {
    const p = new URLSearchParams();
    if (task) p.set("task", task);
    if (rt) p.set("runtime", rt);
    if (size) p.set("size_class", size);
    if (q) p.set("q", q);
    if (dups) p.set("include_duplicates", "true");
    api.get<{ candidates: Candidate[]; last_scan: number | null; starter: { slot: string; candidate: Candidate | null }[] }>(`/api/harvest/candidates?${p}`)
      .then((r) => { setRows(r.candidates); setLastScan(r.last_scan); setStarter(r.starter); }).catch(() => {});
  };
  useEffect(() => { load(); }, [task, rt, size, q, dups, live.version]); // eslint-disable-line react-hooks/exhaustive-deps

  const scan = async () => {
    setBusy(true);
    try {
      await api.post("/api/harvest/scan", { ...scanOpts, max_ram_gb: scanOpts.max_ram_gb ? Number(scanOpts.max_ram_gb) : null, search: scanOpts.search || null });
      toast.push("Harvest started — this takes a minute or two", "good");
      setOpts(false);
    } catch (e) {
      toast.push(e instanceof ApiError ? e.message : "Failed", "bad");
    } finally {
      setBusy(false);
    }
  };
  const toggle = async (c: Candidate) => {
    await api.post("/api/harvest/select", { repo_id: c.repo_id, selected: !c.selected });
    load();
  };
  const dismiss = async (c: Candidate) => { await api.post("/api/harvest/dismiss", { repo_id: c.repo_id }); load(); };
  const queue = async () => {
    setBusy(true);
    try {
      const r = await api.post<{ queued: { repo: string; job?: string; error?: string }[] }>("/api/harvest/queue");
      const ok = r.queued.filter((x) => x.job).length;
      const bad = r.queued.filter((x) => x.error);
      toast.push(`${ok} download${ok === 1 ? "" : "s"} queued${bad.length ? ` · ${bad.length} failed: ${bad[0].error}` : ""}`, bad.length ? "bad" : "good");
      load();
    } finally {
      setBusy(false);
    }
  };
  const selected = rows.filter((r) => r.selected);
  const selectedBytes = selected.reduce((a, r) => a + (r.download_bytes || 0), 0);
  const families = useMemo(() => [...new Set(rows.map((r) => r.family))].sort(), [rows]);

  return (
    <div>
      {toast.view}
      <PageHeader title="Model Harvester" sub={<>Explores Hugging Face (mlx-community, unsloth, bartowski, ggml-org…), keeps only models that fit this Mac, removes duplicate quantizations and proposes a download queue. {lastScan ? <>Last scan {fmtAgo(lastScan)}.</> : "No scan yet."}</>}
        actions={<>
          <button className="btn" onClick={() => setOpts(true)}>Options</button>
          <button className="btn btn-primary" onClick={scan} disabled={busy || !!scanJob}>{scanJob ? <><Spinner /> Scanning…</> : "Scan Hugging Face"}</button>
        </>} />

      {scanJob && <div className="card p-4 mb-4"><div className="text-sm mb-2">{String((scanJob.detail as { stage?: string }).stage || "starting")}</div><Progress value={scanJob.progress} /></div>}

      {starter.some((s) => s.candidate) && (
        <div className="card p-4 mb-4">
          <div className="flex items-center justify-between mb-2"><div className="font-medium text-sm">Suggested starter library</div><span className="text-xs text-ink-3">best candidate per slot — tick the ones you want</span></div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-2">
            {starter.map((s) => (
              <div key={s.slot} className={`rounded-lg border p-2.5 text-xs ${s.candidate ? "border-border bg-surface-2" : "border-dashed border-border text-ink-3"}`}>
                <div className="label mb-1">{s.slot}</div>
                {s.candidate ? (
                  <label className="flex items-start gap-2 cursor-pointer">
                    <input type="checkbox" className="mt-0.5" checked={!!s.candidate.selected} onChange={() => toggle(s.candidate!)} disabled={!!s.candidate.installed} />
                    <span className="min-w-0"><span className="block truncate font-medium text-ink" title={s.candidate.repo_id}>{s.candidate.name}</span><span className="text-ink-3 num">{fmtGB(s.candidate.estimated_ram_gb)} · {s.candidate.quantization}{s.candidate.installed ? " · installed" : ""}</span></span>
                  </label>
                ) : "no candidate"}
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="flex flex-wrap gap-2 items-center mb-3">
        <input className="input max-w-xs" placeholder="Search…" value={q} onChange={(e) => setQ(e.target.value)} />
        <select className="input w-auto" value={task} onChange={(e) => setTask(e.target.value)}>{TASKS.map((t) => <option key={t} value={t}>{t || "All tasks"}</option>)}</select>
        <select className="input w-auto" value={rt} onChange={(e) => setRt(e.target.value)}><option value="">MLX + GGUF</option><option value="mlx">MLX</option><option value="llamacpp">GGUF</option></select>
        <select className="input w-auto" value={size} onChange={(e) => setSize(e.target.value)}>{SIZES.map((s) => <option key={s} value={s}>{s || "All sizes"}</option>)}</select>
        <label className="text-xs text-ink-2 flex items-center gap-1.5"><input type="checkbox" checked={dups} onChange={(e) => setDups(e.target.checked)} /> show duplicate quantizations</label>
        <div className="ml-auto flex items-center gap-2 text-xs text-ink-2 num">
          {selected.length > 0 && <span>{selected.length} selected · {fmtBytes(selectedBytes)}</span>}
          <button className="btn btn-primary btn-sm" disabled={!selected.length || busy} onClick={queue}>Queue downloads</button>
        </div>
      </div>

      <div className="card overflow-x-auto">
        <table className="tbl">
          <thead><tr><th></th><th>Model</th><th>Task</th><th>Runtime</th><th>Quant</th><th className="text-right">Params</th><th className="text-right">Download</th><th className="text-right">Est. RAM</th><th>Compat</th><th className="text-right">Downloads</th><th className="text-right">Score</th><th></th></tr></thead>
          <tbody>
            {rows.map((c) => (
              <tr key={c.repo_id} className={c.installed ? "opacity-60" : ""}>
                <td><input type="checkbox" checked={!!c.selected} disabled={!!c.installed} onChange={() => toggle(c)} /></td>
                <td><a className="font-medium hover:underline" href={`https://huggingface.co/${c.repo_id}`} target="_blank" rel="noreferrer">{c.name}</a><div className="text-xs text-ink-3 truncate max-w-[300px]">{c.repo_id}{c.duplicate_of ? ` · duplicate of ${c.duplicate_of.split("/")[1]}` : ""}{c.installed ? " · installed" : ""}</div></td>
                <td><Pill tone={c.task === "coding" ? "accent" : c.task === "reasoning" ? "violet" : c.task === "vision" ? "warn" : "neutral"}>{c.task}</Pill></td>
                <td className="text-ink-2">{c.runtime === "mlx" ? "MLX" : "GGUF"}</td>
                <td className="mono text-xs">{c.quantization || "—"}</td>
                <td className="text-right num">{fmtParams(c.parameter_count)}</td>
                <td className="text-right num">{fmtBytes(c.download_bytes)}</td>
                <td className="text-right num">{fmtGB(c.estimated_ram_gb)} <SizePill cls={c.size_class} /></td>
                <td><CompatPill status={c.compatibility_status} reason={c.compatibility_reason} /></td>
                <td className="text-right num text-ink-2">{c.downloads.toLocaleString()}</td>
                <td className="text-right num">{c.score.toFixed(0)}</td>
                <td><button className="btn btn-ghost btn-sm" title="Hide" onClick={() => dismiss(c)}>✕</button></td>
              </tr>
            ))}
            {!rows.length && <tr><td colSpan={12} className="text-center text-ink-3 py-10">{lastScan ? "No candidates match." : "Run a scan to discover compatible models."}</td></tr>}
          </tbody>
        </table>
      </div>
      {families.length > 0 && <div className="text-xs text-ink-3 mt-2">Families: {families.join(", ")}</div>}

      <Modal open={opts} onClose={() => setOpts(false)} title="Harvest options">
        <div className="flex flex-col gap-3 text-sm">
          <div className="flex gap-4">
            {["mlx", "gguf"].map((r) => <label key={r} className="flex items-center gap-2"><input type="checkbox" checked={scanOpts.runtimes.includes(r)} onChange={(e) => setScanOpts({ ...scanOpts, runtimes: e.target.checked ? [...scanOpts.runtimes, r] : scanOpts.runtimes.filter((x) => x !== r) })} /> {r.toUpperCase()}</label>)}
          </div>
          <label className="flex flex-col gap-1"><span className="label">Minimum downloads</span><input className="input" type="number" value={scanOpts.min_downloads} onChange={(e) => setScanOpts({ ...scanOpts, min_downloads: Number(e.target.value) })} /></label>
          <label className="flex flex-col gap-1"><span className="label">Models listed per author</span><input className="input" type="number" value={scanOpts.limit_per_author} onChange={(e) => setScanOpts({ ...scanOpts, limit_per_author: Number(e.target.value) })} /></label>
          <label className="flex flex-col gap-1"><span className="label">Max RAM (GB, blank = safe budget)</span><input className="input" value={scanOpts.max_ram_gb} onChange={(e) => setScanOpts({ ...scanOpts, max_ram_gb: e.target.value })} /></label>
          <label className="flex flex-col gap-1"><span className="label">Search term (optional)</span><input className="input" value={scanOpts.search} onChange={(e) => setScanOpts({ ...scanOpts, search: e.target.value })} placeholder="qwen, gemma, coder…" /></label>
          <div className="flex justify-end gap-2 mt-2"><button className="btn" onClick={() => setOpts(false)}>Cancel</button><button className="btn btn-primary" onClick={scan} disabled={busy}>Scan</button></div>
        </div>
      </Modal>
    </div>
  );
}

export type { Job };