import { useEffect, useState } from "react";
import { Bot, Undo2 } from "lucide-react";
import { api, type PolicyModel } from "../lib/api.ts";
import { OllamaModelsModal } from "./AdminPanel.tsx";
import { NodesSection } from "./OllamaNodes.tsx";
import { CatalogSection } from "./OllamaCatalog.tsx";
import { Button, Input, Spinner, Switch } from "./ui.tsx";
import { useT } from "../lib/i18n.ts";
import { cn } from "../lib/cn.ts";

/** Admin models section: node pool, per-model policy, Ollama library + HF catalog. */
export function ModelsPanel() {
  const [models, setModels] = useState<PolicyModel[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [ollamaOpen, setOllamaOpen] = useState(false);
  const { t } = useT();

  async function refresh(force = false) {
    setError("");
    try {
      const res = await api.adminModelPolicy(force);
      setModels(res.models);
    } catch (err) {
      setError(err instanceof Error ? err.message : t("admin.loadFailed"));
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  function apply(updated: PolicyModel) {
    setModels((prev) => prev.map((m) => (m.id === updated.id ? updated : m)));
  }

  const groups = (() => {
    const byGroup = new Map<string, PolicyModel[]>();
    for (const m of models) {
      const g = m.group ?? m.driver;
      const list = byGroup.get(g) ?? [];
      list.push(m);
      byGroup.set(g, list);
    }
    return [...byGroup.entries()];
  })();

  return (
    <div className="space-y-5">
      <NodesSection />

      <section>
        <div className="mb-2 flex items-center gap-2">
          <p className="text-sm font-medium">{t("models.title")}</p>
          <button
            onClick={() => refresh(true)}
            className="ml-auto rounded-full p-2 opacity-60 transition hover:bg-stone-200/60 hover:opacity-100 dark:hover:bg-zinc-800"
            title={t("models.refresh")}
            aria-label={t("models.refreshAria")}
          >
            <Undo2 size={15} />
          </button>
        </div>
        <p className="mb-3 text-sm opacity-60">{t("models.desc")}</p>
        {error && <p className="mb-3 rounded-2xl bg-red-500/10 px-4 py-2.5 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>}
        {loading && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.loading")}</p>}
        {!loading && models.length === 0 && !error && (
          <p className="rounded-3xl border border-dashed border-stone-300 px-4 py-8 text-center text-sm opacity-50 dark:border-zinc-700">
            {t("models.empty")}
          </p>
        )}
        {groups.map(([group, list]) => (
          <div key={group} className="mb-4">
            <p className="mb-1.5 text-xs font-medium uppercase tracking-wider opacity-50">{group}</p>
            <ul className="space-y-2">
              {list.map((m) => (
                <ModelRow key={m.id} model={m} onChanged={apply} onError={setError} />
              ))}
            </ul>
          </div>
        ))}
      </section>

      <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <p className="text-sm font-medium">{t("models.ollamaTitle")}</p>
        <p className="mt-0.5 text-sm opacity-60">{t("models.ollamaDesc")}</p>
        <div className="mt-3">
          <Button
            variant="secondary"
            size="sm"
            onClick={() => setOllamaOpen(true)}
          >
            <Bot size={14} /> {t("ollama.models")}
          </Button>
        </div>
      </section>

      <OllamaModelsModal
        open={ollamaOpen}
        onClose={() => {
          setOllamaOpen(false);
          refresh();
        }}
      />

      <CatalogSection />
    </div>
  );
}

/* ---------- per-model policy rows ---------- */

function ModelRow({ model, onChanged, onError }: {
  model: PolicyModel;
  onChanged: (m: PolicyModel) => void;
  onError: (msg: string) => void;
}) {
  const { t } = useT();
  const [hourly, setHourly] = useState(model.hourly === 0 ? "" : String(model.hourly));
  const [daily, setDaily] = useState(model.daily === 0 ? "" : String(model.daily));
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    setHourly(model.hourly === 0 ? "" : String(model.hourly));
    setDaily(model.daily === 0 ? "" : String(model.daily));
  }, [model.hourly, model.daily]);

  async function patch(p: { enabled?: boolean; hourly?: number; daily?: number }) {
    setBusy(true);
    try {
      const res = await api.adminModelPolicyPatch(model.id, p);
      onChanged(res.model);
      onError("");
    } catch (err) {
      onError(err instanceof Error ? err.message : t("models.saveFailed"));
    } finally {
      setBusy(false);
    }
  }

  function commitNumber(kind: "hourly" | "daily", raw: string) {
    const v = raw.trim() === "" ? 0 : Number(raw);
    if (!Number.isInteger(v) || v < 0 || v > 1000000) {
      if (kind === "hourly") setHourly(model.hourly === 0 ? "" : String(model.hourly));
      else setDaily(model.daily === 0 ? "" : String(model.daily));
      return;
    }
    if (v === model[kind]) return;
    void patch({ [kind]: v });
  }

  return (
    <li
      className={cn(
        "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-2xl border border-stone-200/70 bg-white px-3.5 py-2.5 dark:border-zinc-800 dark:bg-zinc-900",
        !model.enabled && "opacity-60",
      )}
    >
      <span className="min-w-0 flex-1 basis-44">
        <span className="block truncate text-sm font-medium">{model.label || model.id}</span>
        <span className="block truncate font-mono text-xs opacity-50">{model.id}</span>
      </span>
      <label className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs opacity-80">
        <span className="w-24 shrink-0">
          <Input
            type="number"
            min={0}
            max={1000000}
            value={hourly}
            disabled={busy}
            placeholder={t("models.unlimited")}
            aria-label={t("models.hourly")}
            onChange={(e) => setHourly(e.target.value)}
            onBlur={(e) => commitNumber("hourly", e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") (e.target as HTMLInputElement).blur();
            }}
          />
        </span>
        {t("models.hourly")}
      </label>
      <label className="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs opacity-80">
        <span className="w-24 shrink-0">
          <Input
            type="number"
            min={0}
            max={1000000}
            value={daily}
            disabled={busy}
            placeholder={t("models.unlimited")}
            aria-label={t("models.daily")}
            onChange={(e) => setDaily(e.target.value)}
            onBlur={(e) => commitNumber("daily", e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") (e.target as HTMLInputElement).blur();
            }}
          />
        </span>
        {t("models.daily")}
      </label>
      <Switch
        label={t("models.enabled")}
        checked={model.enabled}
        disabled={busy}
        onChange={(v) => void patch({ enabled: v })}
      />
    </li>
  );
}