"use client";

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

interface Inspect {
  repository: string; runtime: string; format: string; files: { path: string; size: number }[]; all_files: { path: string; size: number }[];
  download_bytes: number; weights_bytes: number; quantization: string | null; parameter_count: number | null; model_type: string | null;
  pipeline_tag: string | null; vision: boolean; embedding: boolean; reranker: boolean; max_context: number | null;
  compatibility: { status: string; reason: string; estimated_ram_gb: number | null; recommended_context: number | null }; size_class: string;
  disk: { free_gb: number; free_after_gb: number; min_free_gb: number; ok: boolean }; target_dir: string; already_installed: string | null;
  downloads: number | null; likes: number | null; gated: boolean;
}

export default function DownloadsPage() {
  const live = useLive();
  const toast = useToast();
  const [repo, setRepo] = useState("");
  const [quant, setQuant] = useState("");
  const [insp, setInsp] = useState<Inspect | null>(null);
  const [busy, setBusy] = useState(false);
  const [history, setHistory] = useState<Job[]>([]);

  useEffect(() => { api.get<{ downloads: Job[] }>("/api/downloads").then((r) => setHistory(r.downloads)).catch(() => {}); }, [live.version]);

  const jobs = useMemo(() => {
    const map = new Map<string, Job>();
    for (const j of history) map.set(j.id, j);
    for (const j of Object.values(live.jobs)) if (j.kind === "download") map.set(j.id, j);
    return [...map.values()].sort((a, b) => b.created_at - a.created_at);
  }, [history, live.jobs]);
  const active = jobs.filter((j) => j.status === "running" || j.status === "queued");
  const done = jobs.filter((j) => j.status !== "running" && j.status !== "queued");

  const inspect = async () => {
    if (!repo.trim()) return;
    setBusy(true);
    setInsp(null);
    try {
      setInsp(await api.post<Inspect>("/api/models/inspect", { repository: repo.trim(), quant: quant || null }));
    } catch (e) {
      toast.push(e instanceof ApiError ? e.message : "Inspect failed", "bad");
    } finally {
      setBusy(false);
    }
  };
  const download = async (force = false) => {
    if (!insp) return;
    setBusy(true);
    try {
      await api.post("/api/models/download", { repository: insp.repository, quant: quant || null, force });
      toast.push(`Download started: ${insp.repository}`, "good");
      setInsp(null);
      setRepo("");
    } catch (e) {
      toast.push(e instanceof ApiError ? e.message : "Download failed", "bad");
    } finally {
      setBusy(false);
    }
  };
  const ggufQuants = insp ? [...new Set(insp.all_files.filter((f) => f.path.toLowerCase().endsWith(".gguf") && !/mmproj/i.test(f.path)).map((f) => f.path.replace(/-\d{5}-of-\d{5}/, "").replace(/\.gguf$/i, "").split(/[-_.]/).slice(-2).join("_")))] : [];

  return (
    <div>
      {toast.view}
      <PageHeader title="Downloads" sub="Add models from Hugging Face. Every download is inspected for size, RAM and compatibility first." />
      <div className="card p-4 mb-5">
        <form className="flex flex-col sm:flex-row gap-2" onSubmit={(e) => { e.preventDefault(); inspect(); }}>
          <input className="input flex-1" placeholder="mlx-community/Qwen3-4B-Instruct-2507-4bit  or  unsloth/Qwen3.6-35B-A3B-GGUF  or a huggingface.co URL" value={repo} onChange={(e) => setRepo(e.target.value)} />
          <input className="input sm:w-36" placeholder="quant (GGUF)" value={quant} onChange={(e) => setQuant(e.target.value)} title="Preferred GGUF quantization, e.g. Q4_K_M" />
          <button className="btn btn-primary" disabled={busy || !repo.trim()}>{busy && !insp ? <Spinner /> : "Inspect"}</button>
        </form>
        {insp && (
          <div className="mt-4 grid md:grid-cols-2 gap-4">
            <div>
              <div className="flex items-center gap-2 flex-wrap mb-2">
                <span className="font-medium">{insp.repository}</span>
                <Pill tone="accent">{insp.runtime === "mlx" ? "MLX" : "GGUF · llama.cpp"}</Pill>
                <CompatPill status={insp.compatibility.status} reason={insp.compatibility.reason} />
                <SizePill cls={insp.size_class} />
                {insp.gated && <Pill tone="warn">gated</Pill>}
                {insp.already_installed && <Pill tone="good">installed as {insp.already_installed}</Pill>}
              </div>
              <KV k="Download size" v={fmtBytes(insp.download_bytes)} />
              <KV k="Expected RAM" v={<>{fmtGB(insp.compatibility.estimated_ram_gb)} at {fmtCtx(insp.compatibility.recommended_context)} context</>} />
              <KV k="Parameters" v={fmtParams(insp.parameter_count)} />
              <KV k="Quantization" v={insp.quantization} />
              <KV k="Architecture" v={insp.model_type} />
              <KV k="Type" v={insp.embedding ? "embedding" : insp.reranker ? "reranker" : insp.vision ? "vision-language" : "text generation"} />
              <KV k="Max context" v={fmtCtx(insp.max_context)} />
              <KV k="Free disk after" v={<span className={insp.disk.ok ? "" : "text-bad"}>{insp.disk.free_after_gb} GB (reserve {insp.disk.min_free_gb} GB)</span>} />
              <KV k="Target" v={insp.target_dir} mono />
              <KV k="Popularity" v={<>{insp.downloads?.toLocaleString() ?? "—"} downloads · {insp.likes ?? "—"} likes</>} />
              <div className="text-xs text-ink-3 mt-2">{insp.compatibility.reason}</div>
              {ggufQuants.length > 1 && <div className="text-xs text-ink-3 mt-1">Available GGUF quantizations: {ggufQuants.join(", ")} — set one in the quant field and inspect again.</div>}
              <div className="flex gap-2 mt-4">
                <button className="btn btn-primary" disabled={busy || !insp.disk.ok || insp.compatibility.status === "incompatible" || !!insp.already_installed} onClick={() => download(false)}>{busy ? <Spinner /> : `Download ${fmtBytes(insp.download_bytes)}`}</button>
                {(insp.compatibility.status === "incompatible" || insp.already_installed) && <button className="btn" disabled={busy || !insp.disk.ok} onClick={() => download(true)}>Force</button>}
              </div>
            </div>
            <div className="card bg-bg p-3 max-h-72 overflow-auto">
              <div className="label mb-2">Files to download ({insp.files.length})</div>
              <table className="tbl text-xs"><tbody>{insp.files.map((f) => <tr key={f.path}><td className="mono">{f.path}</td><td className="text-right num">{fmtBytes(f.size)}</td></tr>)}</tbody></table>
            </div>
          </div>
        )}
      </div>

      <h2 className="text-sm font-medium mb-2">Queue</h2>
      <div className="flex flex-col gap-2 mb-6">
        {active.map((j) => <JobRow key={j.id} j={j} onCancel={() => api.post(`/api/jobs/${j.id}/cancel`)} />)}
        {!active.length && <div className="card p-5 text-sm text-ink-3 text-center">No active downloads.</div>}
      </div>
      <h2 className="text-sm font-medium mb-2">History</h2>
      <div className="card divide-y divide-border">
        {done.slice(0, 30).map((j) => (
          <div key={j.id} className="px-4 py-2.5 flex items-center gap-3 text-sm">
            <Pill tone={j.status === "completed" ? "good" : j.status === "failed" ? "bad" : "neutral"}>{j.status}</Pill>
            <div className="min-w-0 flex-1"><div className="truncate">{String(j.payload.repository)}</div><div className="text-xs text-ink-3">{fmtDate(j.created_at)} · {fmtBytes(Number(j.payload.download_bytes))}{j.error ? ` · ${j.error}` : ""}</div></div>
            {j.status === "failed" && <button className="btn btn-sm" onClick={() => api.post(`/api/downloads/${j.id}/retry`).then(() => toast.push("Retrying", "good")).catch((e) => toast.push(e.message, "bad"))}>Retry</button>}
          </div>
        ))}
        {!done.length && <div className="p-5 text-sm text-ink-3 text-center">Nothing yet.</div>}
      </div>
    </div>
  );
}

export function JobRow({ j, onCancel }: { j: Job; onCancel?: () => void }) {
  const d = j.detail as { downloaded?: number; total?: number; speed_bps?: number; eta_seconds?: number; current_file?: string; stage?: string; file_index?: number; file_count?: number };
  return (
    <div className="card p-4">
      <div className="flex items-center justify-between gap-3 mb-2">
        <div className="min-w-0"><div className="font-medium truncate">{j.title}</div>
          <div className="text-xs text-ink-3 truncate">{d.stage || d.current_file || j.status}{d.file_index ? ` · file ${d.file_index}/${d.file_count}` : ""}</div></div>
        <div className="text-right text-xs num shrink-0">
          <div>{d.downloaded != null ? `${fmtBytes(d.downloaded)} / ${fmtBytes(d.total)}` : `${Math.round(j.progress * 100)}%`}</div>
          <div className="text-ink-3">{d.speed_bps ? fmtSpeed(d.speed_bps) : ""}{d.eta_seconds ? ` · ETA ${fmtDuration(d.eta_seconds)}` : ""}</div>
        </div>
        {onCancel && <button className="btn btn-sm" onClick={onCancel}>Cancel</button>}
      </div>
      <Progress value={j.progress} />
    </div>
  );
}