"use client";

import { useEffect, useState } from "react";
import { api, ApiError } from "@/lib/api";
import { useLive } from "@/lib/events";
import type { Model } from "@/lib/types";
import { PageHeader, Toggle, useToast } from "@/components/ui";

type S = Record<string, string | number | boolean | null>;

export default function SettingsPage() {
  const live = useLive();
  const toast = useToast();
  const [s, setS] = useState<S | null>(null);
  const [defaults, setDefaults] = useState<S>({});
  const [paths, setPaths] = useState<Record<string, string>>({});
  const [hfToken, setHfToken] = useState(false);
  const [models, setModels] = useState<Model[]>([]);
  const [aliases, setAliases] = useState<Record<string, string>>({});
  const [alias, setAlias] = useState("");
  const [aliasModel, setAliasModel] = useState("");
  const [pw, setPw] = useState({ current: "", next: "", confirm: "" });
  const [dirty, setDirty] = useState<S>({});

  const load = () => {
    api.get<{ settings: S; defaults: S; paths: Record<string, string>; hf_token_set: boolean }>("/api/settings").then((r) => { setS(r.settings); setDefaults(r.defaults); setPaths(r.paths); setHfToken(r.hf_token_set); });
    api.get<{ models: Model[]; aliases: Record<string, string> }>("/api/models").then((r) => { setModels(r.models); setAliases(r.aliases); });
  };
  useEffect(() => { load(); }, [live.version]);

  const set = (k: string, v: string | number | boolean | null) => { setS((o) => ({ ...(o || {}), [k]: v })); setDirty((d) => ({ ...d, [k]: v })); };
  const save = async () => {
    try {
      await api.patch("/api/settings", dirty);
      toast.push("Settings saved", "good");
      setDirty({});
      load();
    } catch (e) {
      toast.push(e instanceof ApiError ? e.message : "Failed", "bad");
    }
  };
  const addAlias = async () => {
    try {
      await api.put("/api/aliases", { alias: alias.trim(), model_id: aliasModel });
      setAlias("");
      load();
    } catch (e) {
      toast.push(e instanceof ApiError ? e.message : "Failed", "bad");
    }
  };
  const changePw = async (e: React.FormEvent) => {
    e.preventDefault();
    if (pw.next !== pw.confirm) return toast.push("Passwords do not match", "bad");
    try {
      await api.post("/api/auth/password", { current_password: pw.current, new_password: pw.next });
      toast.push("Password changed", "good");
      setPw({ current: "", next: "", confirm: "" });
    } catch (err) {
      toast.push(err instanceof ApiError ? err.message : "Failed", "bad");
    }
  };
  if (!s) return <div className="text-ink-3 text-sm">Loading…</div>;
  const textModels = models.filter((m) => m.installed && !m.embedding && !m.reranker);
  const Num = ({ k, label, hint, step = 1 }: { k: string; label: string; hint?: string; step?: number }) => (
    <label className="flex flex-col gap-1 text-sm"><span className="label">{label}</span>
      <input className="input" type="number" step={step} value={s[k] as number ?? ""} onChange={(e) => set(k, e.target.value === "" ? null : Number(e.target.value))} />
      {hint && <span className="text-xs text-ink-3">{hint} · default {String(defaults[k])}</span>}</label>
  );
  const Sel = ({ k, label, hint }: { k: string; label: string; hint?: string }) => (
    <label className="flex flex-col gap-1 text-sm"><span className="label">{label}</span>
      <select className="input" value={(s[k] as string) || ""} onChange={(e) => set(k, e.target.value || null)}>
        <option value="">none</option>{textModels.map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}</select>
      {hint && <span className="text-xs text-ink-3">{hint}</span>}</label>
  );

  return (
    <div>
      {toast.view}
      <PageHeader title="Settings" actions={<button className="btn btn-primary" disabled={!Object.keys(dirty).length} onClick={save}>Save changes</button>} />
      <div className="grid lg:grid-cols-2 gap-4">
        <div className="card p-4 flex flex-col gap-4">
          <div className="font-medium text-sm">Memory policy</div>
          <Num k="max_model_memory_gb" label="Max model memory (GB)" hint="Safe budget for weights + KV cache + runtime. Models above it are refused." step={0.5} />
          <Num k="absolute_max_memory_gb" label="Absolute limit (GB)" hint="Hard ceiling even with force-load." step={0.5} />
          <Num k="max_simultaneous_models" label="Simultaneous large models" hint="Small embedding/reranker models can stay resident alongside." />
          <Num k="model_idle_timeout_minutes" label="Idle unload (minutes)" hint="0 disables. Pinned models are never idle-unloaded." />
          <Num k="default_context" label="Default context (tokens)" hint="Used when a model has no recommended context." />
          <Num k="default_max_tokens" label="Default max_tokens" hint="When a request does not specify one." />
        </div>
        <div className="card p-4 flex flex-col gap-4">
          <div className="font-medium text-sm">Models & runtimes</div>
          <Sel k="default_model" label="Default model" hint="Used when a request omits `model`." />
          <Sel k="preload_model" label="Preload at startup" hint="Default none — conserve RAM." />
          <div className="flex flex-col gap-3 pt-1">
            <Toggle checked={!!s.allow_mlx} onChange={(v) => set("allow_mlx", v)} label="Allow MLX models" />
            <Toggle checked={!!s.allow_gguf} onChange={(v) => set("allow_gguf", v)} label="Allow GGUF (llama.cpp) models" />
            <Toggle checked={!!s.allow_downloads} onChange={(v) => set("allow_downloads", v)} label="Allow downloads from Hugging Face" />
            <Toggle checked={!!s.log_prompts} onChange={(v) => set("log_prompts", v)} label="Log prompts and completions (privacy: off by default)" />
          </div>
          <Num k="min_free_disk_gb" label="Minimum free disk (GB)" hint="Downloads that would go below this are refused." />
          <div className="text-xs text-ink-3">Hugging Face token: {hfToken ? <span className="text-good">configured (HF_TOKEN)</span> : <span>not set — gated repos will fail. Set HF_TOKEN in .env.</span>}</div>
        </div>
        <div className="card p-4">
          <div className="font-medium text-sm mb-3">Model aliases</div>
          <p className="text-xs text-ink-3 mb-3">Clients can request <code className="mono">fast</code>, <code className="mono">coder</code>, <code className="mono">reasoning</code>, <code className="mono">vision</code>, <code className="mono">embedding</code>, <code className="mono">default</code>… <code className="mono">auto</code> picks a model from the prompt (code, images, length) using these aliases.</p>
          <div className="flex flex-col gap-1.5 mb-3">
            {Object.entries(aliases).map(([a, mid]) => (
              <div key={a} className="flex items-center gap-2 text-sm"><span className="mono text-xs bg-surface-2 px-1.5 py-0.5 rounded text-accent w-28 truncate">{a}</span><span className="text-ink-3">→</span><span className="truncate flex-1">{mid}</span><button className="btn btn-ghost btn-sm" onClick={() => api.del(`/api/aliases/${a}`).then(load)}>✕</button></div>
            ))}
            {!Object.keys(aliases).length && <div className="text-xs text-ink-3">No aliases yet.</div>}
          </div>
          <div className="flex gap-2">
            <input className="input w-32" placeholder="alias" value={alias} onChange={(e) => setAlias(e.target.value)} list="alias-suggest" />
            <datalist id="alias-suggest">{["default", "fast", "coder", "reasoning", "vision", "embedding", "reranker"].map((a) => <option key={a} value={a} />)}</datalist>
            <select className="input flex-1" value={aliasModel} onChange={(e) => setAliasModel(e.target.value)}><option value="">model…</option>{models.filter((m) => m.installed).map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}</select>
            <button className="btn" disabled={!alias.trim() || !aliasModel} onClick={addAlias}>Add</button>
          </div>
        </div>
        <div className="card p-4 flex flex-col gap-4">
          <div className="font-medium text-sm">Account & paths</div>
          <form onSubmit={changePw} className="flex flex-col gap-2">
            <input className="input" type="password" placeholder="Current password" autoComplete="current-password" value={pw.current} onChange={(e) => setPw({ ...pw, current: e.target.value })} required />
            <input className="input" type="password" placeholder="New password (min 10)" autoComplete="new-password" value={pw.next} onChange={(e) => setPw({ ...pw, next: e.target.value })} required minLength={10} />
            <input className="input" type="password" placeholder="Confirm new password" autoComplete="new-password" value={pw.confirm} onChange={(e) => setPw({ ...pw, confirm: e.target.value })} required />
            <button className="btn self-start">Change password</button>
          </form>
          <div className="text-xs text-ink-3 flex flex-col gap-1 mono">
            {Object.entries(paths).map(([k, v]) => <div key={k}><span className="text-ink-2">{k}:</span> {v}</div>)}
          </div>
        </div>
      </div>
    </div>
  );
}