"use client";
// Modèles : catalogue OpenRouter avec surcharges (activer/désactiver, favori, note)
// et éditeur des préréglages ordonnés.
import { useMemo, useState } from "react";
import { ArrowDown, ArrowUp, Check, Pencil, Plus, Search, Sparkles, Star, X } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Badge, Button, Card, EmptyState, Input, Skeleton, Spinner, Tabs, cn } from "@/components/ui";
import { ErrorBanner, SectionTitle, SuccessFlash, Toggle, fmtInt, postJson, useFetchJson } from "./shared";

type ModelInfo = {
  id: string;
  name: string;
  provider: string;
  description: string;
  contextLength: number;
  pricing: { prompt: number; completion: number };
  supportsImages: boolean;
  supportsFiles: boolean;
  supportsTools: boolean;
  supportsReasoning: boolean;
  supportsStructured: boolean;
  isFree: boolean;
  costTier: "économique" | "modéré" | "coûteux";
  enabled: boolean;
  favorite: boolean;
  note: string;
};

type Preset = { label: string; models: string[]; description: string };
type ModelsResponse = { models: ModelInfo[]; presets: Record<string, Preset>; defaultPresets: Record<string, Preset> };

const FILTERS = [
  { key: "all", label: "Tous" },
  { key: "enabled", label: "Activés" },
  { key: "disabled", label: "Désactivés" },
  { key: "vision", label: "Vision" },
  { key: "free", label: "Gratuits" },
];

const TIER_TONE: Record<ModelInfo["costTier"], "green" | "amber" | "red"> = {
  "économique": "green",
  "modéré": "amber",
  "coûteux": "red",
};
const TIER_LABEL: Record<ModelInfo["costTier"], string> = {
  "économique": "Économique",
  "modéré": "Modéré",
  "coûteux": "Coûteux",
};

const PAGE_SIZE = 50;

export function AdminModels() {
  const { data, error, loading, reload, setData } = useFetchJson<ModelsResponse>("/api/admin/models");
  const [search, setSearch] = useState("");
  const [filter, setFilter] = useState("all");
  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
  const [actionError, setActionError] = useState<string | null>(null);
  const [editingNote, setEditingNote] = useState<string | null>(null);
  const [noteDraft, setNoteDraft] = useState("");
  const [savingNote, setSavingNote] = useState(false);

  // Préréglages en édition locale
  const [presets, setPresets] = useState<Record<string, Preset> | null>(null);
  const [savingPresets, setSavingPresets] = useState(false);
  const [presetsFlash, setPresetsFlash] = useState<string | null>(null);
  const effectivePresets = presets ?? data?.presets ?? null;

  const models = useMemo(() => data?.models ?? [], [data]);
  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return models.filter((m) => {
      if (filter === "enabled" && !m.enabled) return false;
      if (filter === "disabled" && m.enabled) return false;
      if (filter === "vision" && !m.supportsImages) return false;
      if (filter === "free" && !m.isFree) return false;
      if (q && !m.name.toLowerCase().includes(q) && !m.id.toLowerCase().includes(q) && !m.provider.toLowerCase().includes(q)) return false;
      return true;
    });
  }, [models, search, filter]);

  async function override(modelId: string, patch: { enabled?: boolean; favorite?: boolean; note?: string }) {
    setActionError(null);
    const before = models;
    // Mise à jour optimiste
    setData((d) =>
      d ? { ...d, models: d.models.map((m) => (m.id === modelId ? { ...m, ...patch } : m)) } : d
    );
    try {
      await postJson("/api/admin/models", { action: "override", modelId, ...patch });
    } catch (e) {
      setData((d) => (d ? { ...d, models: before } : d));
      setActionError(e instanceof Error ? e.message : "L'action a échoué.");
    }
  }

  async function saveNote(modelId: string) {
    setSavingNote(true);
    await override(modelId, { note: noteDraft.slice(0, 300) });
    setSavingNote(false);
    setEditingNote(null);
  }

  async function savePresets() {
    if (!effectivePresets) return;
    setSavingPresets(true);
    setActionError(null);
    setPresetsFlash(null);
    try {
      await postJson("/api/admin/models", { action: "presets", presets: effectivePresets });
      setPresetsFlash("Préréglages enregistrés.");
      setTimeout(() => setPresetsFlash(null), 3500);
    } catch (e) {
      setActionError(e instanceof Error ? e.message : "L'enregistrement des préréglages a échoué.");
    } finally {
      setSavingPresets(false);
    }
  }

  function mutatePreset(key: string, fn: (p: Preset) => Preset) {
    if (!effectivePresets) return;
    setPresets({ ...effectivePresets, [key]: fn(effectivePresets[key]) });
  }

  if (loading) {
    return (
      <div className="animate-fade-up">
        <PageHeader title="Modèles" subtitle="Catalogue OpenRouter, surcharges et préréglages" />
        <Skeleton className="mb-3 h-10 w-full max-w-md" />
        <Skeleton className="h-96" />
      </div>
    );
  }
  if (error || !data) {
    return (
      <div>
        <PageHeader title="Modèles" />
        <ErrorBanner message={error ?? "Données indisponibles."} onRetry={reload} />
      </div>
    );
  }

  const visible = filtered.slice(0, visibleCount);

  return (
    <div className="animate-fade-up">
      <PageHeader
        title="Modèles"
        subtitle={`${fmtInt(models.length)} modèles au catalogue · ${fmtInt(models.filter((m) => m.enabled).length)} activés`}
      />

      {actionError && <div className="mb-4"><ErrorBanner message={actionError} /></div>}

      <div className="mb-4 flex flex-wrap items-center gap-3">
        <div className="relative w-full max-w-xs">
          <Search size={15} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
          <Input
            value={search}
            onChange={(e) => { setSearch(e.target.value); setVisibleCount(PAGE_SIZE); }}
            placeholder="Rechercher un modèle…"
            className="pl-9"
            aria-label="Rechercher un modèle"
          />
        </div>
        <Tabs tabs={FILTERS} active={filter} onChange={(k) => { setFilter(k); setVisibleCount(PAGE_SIZE); }} />
      </div>

      {filtered.length === 0 ? (
        <Card>
          <EmptyState icon={<Search />} title="Aucun modèle ne correspond" description="Modifiez la recherche ou le filtre." />
        </Card>
      ) : (
        <Card className="overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-[13px]">
              <thead>
                <tr className="border-b border-app text-left text-[12px] text-muted">
                  <th className="px-4 py-2 font-medium">Modèle</th>
                  <th className="px-3 py-2 font-medium">Fournisseur</th>
                  <th className="px-3 py-2 text-right font-medium">Entrée / sortie ($/M)</th>
                  <th className="px-3 py-2 text-right font-medium">Contexte</th>
                  <th className="px-3 py-2 font-medium">Capacités</th>
                  <th className="px-3 py-2 font-medium">Palier</th>
                  <th className="px-3 py-2 text-center font-medium">Activé</th>
                  <th className="px-3 py-2 text-center font-medium">Favori</th>
                  <th className="px-4 py-2 font-medium">Note</th>
                </tr>
              </thead>
              <tbody>
                {visible.map((m) => (
                  <tr key={m.id} className={cn("border-b border-app last:border-0", !m.enabled && "opacity-55")}>
                    <td className="max-w-[260px] px-4 py-2">
                      <p className="truncate font-medium text-fg" title={m.name}>{m.name}</p>
                      <p className="truncate font-mono text-[11px] text-muted" title={m.id}>{m.id}</p>
                    </td>
                    <td className="px-3 py-2 text-muted">{m.provider}</td>
                    <td className="whitespace-nowrap px-3 py-2 text-right tabular-nums text-fg">
                      {m.isFree ? <Badge tone="gold">Gratuit</Badge> : `${m.pricing.prompt.toFixed(2)} / ${m.pricing.completion.toFixed(2)}`}
                    </td>
                    <td className="px-3 py-2 text-right tabular-nums text-muted">{Math.round(m.contextLength / 1000)} k</td>
                    <td className="px-3 py-2">
                      <div className="flex flex-wrap gap-1">
                        {m.supportsImages && <Badge tone="brand">Vision</Badge>}
                        {m.supportsFiles && <Badge tone="brand">Fichiers</Badge>}
                        {m.supportsReasoning && <Badge tone="brand">Raisonnement</Badge>}
                        {m.supportsTools && <Badge tone="brand">Outils</Badge>}
                      </div>
                    </td>
                    <td className="px-3 py-2"><Badge tone={TIER_TONE[m.costTier]}>{TIER_LABEL[m.costTier]}</Badge></td>
                    <td className="px-3 py-2 text-center">
                      <Toggle checked={m.enabled} onChange={(v) => override(m.id, { enabled: v })} label={`Activer ${m.name}`} />
                    </td>
                    <td className="px-3 py-2 text-center">
                      <button
                        type="button"
                        onClick={() => override(m.id, { favorite: !m.favorite })}
                        aria-label={m.favorite ? `Retirer ${m.name} des favoris` : `Ajouter ${m.name} aux favoris`}
                        aria-pressed={m.favorite}
                        className="rounded-md p-1 hover:bg-surface-2 dark:hover:bg-brand-900/40"
                      >
                        <Star size={16} className={m.favorite ? "fill-gold-500 text-gold-500" : "text-muted"} />
                      </button>
                    </td>
                    <td className="min-w-[180px] px-4 py-2">
                      {editingNote === m.id ? (
                        <div className="flex items-center gap-1.5">
                          <Input
                            value={noteDraft}
                            onChange={(e) => setNoteDraft(e.target.value)}
                            maxLength={300}
                            autoFocus
                            className="h-8 text-[12.5px]"
                            onKeyDown={(e) => {
                              if (e.key === "Enter") saveNote(m.id);
                              if (e.key === "Escape") setEditingNote(null);
                            }}
                            aria-label={`Note pour ${m.name}`}
                          />
                          <Button size="icon" variant="ghost" onClick={() => saveNote(m.id)} disabled={savingNote} aria-label="Enregistrer la note">
                            {savingNote ? <Spinner /> : <Check size={15} />}
                          </Button>
                          <Button size="icon" variant="ghost" onClick={() => setEditingNote(null)} aria-label="Annuler">
                            <X size={15} />
                          </Button>
                        </div>
                      ) : (
                        <button
                          type="button"
                          onClick={() => { setEditingNote(m.id); setNoteDraft(m.note); }}
                          className="group flex w-full items-center gap-1.5 text-left"
                        >
                          <span className={cn("min-w-0 flex-1 truncate text-[12.5px]", m.note ? "text-fg" : "italic text-muted")}>
                            {m.note || "Ajouter une note…"}
                          </span>
                          <Pencil size={13} className="shrink-0 text-muted opacity-0 transition-opacity group-hover:opacity-100" />
                        </button>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {filtered.length > visibleCount && (
            <div className="border-t border-app p-3 text-center">
              <Button size="sm" variant="secondary" onClick={() => setVisibleCount((c) => c + PAGE_SIZE)}>
                Afficher plus ({fmtInt(filtered.length - visibleCount)} restants)
              </Button>
            </div>
          )}
        </Card>
      )}

      {/* ---------------- Préréglages ---------------- */}
      <section className="mt-10">
        <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
          <SectionTitle sub="Listes ordonnées : le premier modèle disponible et activé de chaque liste est utilisé.">
            Préréglages
          </SectionTitle>
          <div className="flex items-center gap-3">
            <SuccessFlash message={presetsFlash} />
            <Button size="sm" onClick={savePresets} disabled={savingPresets || !presets}>
              {savingPresets && <Spinner />}
              Enregistrer les préréglages
            </Button>
          </div>
        </div>
        {!effectivePresets ? (
          <Card>
            <EmptyState icon={<Sparkles />} title="Aucun préréglage" description="Les préréglages par défaut apparaîtront après le premier chargement des modèles." />
          </Card>
        ) : (
          <div className="grid gap-4 md:grid-cols-2">
            {Object.entries(effectivePresets).map(([key, preset]) => (
              <PresetEditor
                key={key}
                presetKey={key}
                preset={preset}
                models={models}
                onChange={(fn) => mutatePreset(key, fn)}
              />
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

function PresetEditor({
  presetKey,
  preset,
  models,
  onChange,
}: {
  presetKey: string;
  preset: Preset;
  models: ModelInfo[];
  onChange: (fn: (p: Preset) => Preset) => void;
}) {
  const [query, setQuery] = useState("");
  const matches = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return [];
    return models
      .filter((m) => m.enabled && !preset.models.includes(m.id) && (m.name.toLowerCase().includes(q) || m.id.toLowerCase().includes(q)))
      .slice(0, 8);
  }, [query, models, preset.models]);

  function move(index: number, delta: number) {
    onChange((p) => {
      const next = [...p.models];
      const j = index + delta;
      if (j < 0 || j >= next.length) return p;
      [next[index], next[j]] = [next[j], next[index]];
      return { ...p, models: next };
    });
  }

  return (
    <Card className="p-4">
      <div className="mb-2 flex items-baseline justify-between gap-2">
        <div>
          <h3 className="text-[14px] font-semibold text-fg">{preset.label}</h3>
          <p className="text-[12px] text-muted">{preset.description}</p>
        </div>
        <span className="shrink-0 font-mono text-[11px] text-muted">{presetKey}</span>
      </div>

      {preset.models.length === 0 ? (
        <p className="py-3 text-center text-[12.5px] italic text-muted">Aucun modèle — ajoutez-en ci-dessous.</p>
      ) : (
        <ul className="mb-2 space-y-1">
          {preset.models.map((id, i) => {
            const m = models.find((x) => x.id === id);
            return (
              <li key={id} className="flex items-center gap-2 rounded-lg border border-app px-2.5 py-1.5">
                <span className="w-4 shrink-0 text-right text-[11px] tabular-nums text-muted">{i + 1}.</span>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-[12.5px] font-medium text-fg">{m?.name ?? id}</p>
                  {(!m || !m.enabled) && <p className="text-[11px] text-amber-600 dark:text-amber-400">{!m ? "Introuvable au catalogue" : "Désactivé"}</p>}
                </div>
                <button type="button" onClick={() => move(i, -1)} disabled={i === 0} aria-label="Monter" className="rounded p-1 text-muted hover:bg-surface-2 hover:text-fg disabled:opacity-30 dark:hover:bg-brand-900/40">
                  <ArrowUp size={13} />
                </button>
                <button type="button" onClick={() => move(i, 1)} disabled={i === preset.models.length - 1} aria-label="Descendre" className="rounded p-1 text-muted hover:bg-surface-2 hover:text-fg disabled:opacity-30 dark:hover:bg-brand-900/40">
                  <ArrowDown size={13} />
                </button>
                <button
                  type="button"
                  onClick={() => onChange((p) => ({ ...p, models: p.models.filter((x) => x !== id) }))}
                  aria-label="Retirer"
                  className="rounded p-1 text-muted hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400"
                >
                  <X size={13} />
                </button>
              </li>
            );
          })}
        </ul>
      )}

      {preset.models.length < 10 && (
        <div className="relative">
          <div className="relative">
            <Plus size={14} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
            <Input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Ajouter un modèle (recherche)…"
              className="h-8 pl-8 text-[12.5px]"
              aria-label={`Ajouter un modèle au préréglage ${preset.label}`}
            />
          </div>
          {matches.length > 0 && (
            <ul className="absolute z-20 mt-1 w-full overflow-hidden rounded-lg border border-app bg-card shadow-lg">
              {matches.map((m) => (
                <li key={m.id}>
                  <button
                    type="button"
                    onClick={() => {
                      onChange((p) => ({ ...p, models: [...p.models, m.id] }));
                      setQuery("");
                    }}
                    className="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-[12.5px] hover:bg-surface-2 dark:hover:bg-brand-900/40"
                  >
                    <span className="truncate font-medium text-fg">{m.name}</span>
                    <span className="shrink-0 font-mono text-[10.5px] text-muted">{m.id}</span>
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </Card>
  );
}