"use client";
// Prompts système : sélection, édition monospace, historique des versions,
// publication d'une nouvelle version avec confirmation.
import { useCallback, useEffect, useState } from "react";
import { FileCode2, Send } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Badge, Button, Card, EmptyState, Modal, Skeleton, Spinner, Textarea, cn } from "@/components/ui";
import { ErrorBanner, SectionTitle, SuccessFlash, fmtDate, fmtInt, postJson, useFetchJson } from "./shared";

type HistoryRow = { id: number; version: number; active: number; created_by: string | null; created_at: string };
type PromptDetail = { name: string; content: string; history: HistoryRow[] };

const MAX_CHARS = 20_000;
const MIN_CHARS = 10;

export function AdminPrompts() {
  const { data, error, loading, reload } = useFetchJson<{ names: string[] }>("/api/admin/prompts");
  const [selected, setSelected] = useState<string | null>(null);
  const [detail, setDetail] = useState<PromptDetail | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [detailError, setDetailError] = useState<string | null>(null);
  const [content, setContent] = useState("");
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [publishing, setPublishing] = useState(false);
  const [publishError, setPublishError] = useState<string | null>(null);
  const [flash, setFlash] = useState<string | null>(null);

  const loadDetail = useCallback(async (name: string) => {
    setDetailLoading(true);
    setDetailError(null);
    try {
      const res = await fetch(`/api/admin/prompts?name=${encodeURIComponent(name)}`);
      const j = (await res.json().catch(() => null)) as (PromptDetail & { error?: string }) | null;
      if (!res.ok || !j) throw new Error(j?.error || `Erreur ${res.status}`);
      setDetail(j);
      setContent(j.content);
    } catch (e) {
      setDetailError(e instanceof Error ? e.message : "Impossible de charger le prompt.");
    } finally {
      setDetailLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!selected && data?.names.length) {
      setSelected(data.names[0]);
    }
  }, [data, selected]);

  useEffect(() => {
    if (selected) loadDetail(selected);
  }, [selected, loadDetail]);

  const dirty = detail !== null && content !== detail.content;
  const tooShort = content.trim().length < MIN_CHARS;
  const tooLong = content.length > MAX_CHARS;
  const currentVersion = detail?.history.find((h) => h.active)?.version ?? detail?.history[0]?.version ?? 0;

  async function publish() {
    if (!selected) return;
    setPublishing(true);
    setPublishError(null);
    try {
      const r = await postJson<{ ok: boolean; version: number }>("/api/admin/prompts", { name: selected, content });
      setConfirmOpen(false);
      setFlash(`Version ${r.version} de « ${selected} » publiée — elle s'applique dès les prochaines conversations.`);
      setTimeout(() => setFlash(null), 5000);
      await loadDetail(selected);
    } catch (e) {
      setPublishError(e instanceof Error ? e.message : "La publication a échoué.");
    } finally {
      setPublishing(false);
    }
  }

  return (
    <div className="animate-fade-up">
      <PageHeader
        title="Prompts système"
        subtitle="Instructions modulaires de l'assistant — versionnées, publication immédiate"
      />

      {flash && <div className="mb-4"><SuccessFlash message={flash} /></div>}

      {loading ? (
        <div className="grid gap-4 lg:grid-cols-[220px_1fr]">
          <Skeleton className="h-72" />
          <Skeleton className="h-[480px]" />
        </div>
      ) : error || !data ? (
        <ErrorBanner message={error ?? "Données indisponibles."} onRetry={reload} />
      ) : data.names.length === 0 ? (
        <Card>
          <EmptyState
            icon={<FileCode2 />}
            title="Aucun prompt"
            description="Aucun prompt système n'a été trouvé (dossier prompts/ vide et base de données sans versions)."
          />
        </Card>
      ) : (
        <div className="grid items-start gap-4 lg:grid-cols-[230px_1fr]">
          {/* Liste des prompts */}
          <Card className="p-2 lg:sticky lg:top-16">
            <nav aria-label="Prompts" className="flex gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
              {data.names.map((name) => (
                <button
                  key={name}
                  type="button"
                  onClick={() => setSelected(name)}
                  className={cn(
                    "whitespace-nowrap rounded-lg px-3 py-2 text-left font-mono text-[12.5px] transition-colors lg:whitespace-normal",
                    selected === name
                      ? "bg-brand-100 font-semibold text-brand-700 dark:bg-brand-900/60 dark:text-brand-200"
                      : "text-muted hover:bg-surface-2 hover:text-fg dark:hover:bg-brand-900/30"
                  )}
                >
                  {name}
                </button>
              ))}
            </nav>
          </Card>

          {/* Éditeur */}
          <div className="min-w-0 space-y-4">
            {detailLoading ? (
              <Skeleton className="h-[480px]" />
            ) : detailError ? (
              <ErrorBanner message={detailError} onRetry={() => selected && loadDetail(selected)} />
            ) : detail ? (
              <>
                <Card className="p-5">
                  <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
                    <div className="flex items-center gap-2.5">
                      <h2 className="font-mono text-[15px] font-semibold text-fg">{detail.name}</h2>
                      <Badge tone="brand">v{currentVersion}</Badge>
                      {dirty && <Badge tone="amber">Modifications non publiées</Badge>}
                    </div>
                    <Button
                      size="sm"
                      onClick={() => setConfirmOpen(true)}
                      disabled={!dirty || tooShort || tooLong}
                    >
                      <Send size={14} />
                      Publier une nouvelle version
                    </Button>
                  </div>
                  <Textarea
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                    spellCheck={false}
                    className="min-h-[420px] resize-y font-mono text-[12.5px] leading-relaxed"
                    aria-label={`Contenu du prompt ${detail.name}`}
                  />
                  <div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-[12px]">
                    <span className={cn("tabular-nums", tooLong || tooShort ? "font-medium text-red-600 dark:text-red-400" : "text-muted")}>
                      {fmtInt(content.length)} / {fmtInt(MAX_CHARS)} caractères
                      {tooShort && " — minimum 10 caractères"}
                      {tooLong && " — limite dépassée"}
                    </span>
                    <span className="text-muted">
                      Les changements publiés s'appliquent immédiatement aux prochaines conversations — aucune remise en route requise.
                    </span>
                  </div>
                </Card>

                <Card className="p-5">
                  <SectionTitle>Historique des versions</SectionTitle>
                  {detail.history.length === 0 ? (
                    <p className="text-sm text-muted">
                      Aucune version en base — le contenu affiché provient du fichier <span className="font-mono">prompts/{detail.name}.md</span>.
                      La première publication créera la version 1.
                    </p>
                  ) : (
                    <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="py-2 pr-3 font-medium">Version</th>
                            <th className="py-2 pr-3 font-medium">Date</th>
                            <th className="py-2 pr-3 font-medium">Auteur</th>
                            <th className="py-2 font-medium">Statut</th>
                          </tr>
                        </thead>
                        <tbody>
                          {detail.history.map((h) => (
                            <tr key={h.id} className="border-b border-app last:border-0">
                              <td className="py-2 pr-3 tabular-nums font-medium text-fg">v{h.version}</td>
                              <td className="py-2 pr-3 tabular-nums text-muted">{fmtDate(h.created_at)}</td>
                              <td className="py-2 pr-3 text-muted">{h.created_by ?? "—"}</td>
                              <td className="py-2">{h.active ? <Badge tone="green">Active</Badge> : <Badge>Archivée</Badge>}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </Card>
              </>
            ) : null}
          </div>
        </div>
      )}

      <Modal open={confirmOpen} onClose={() => (publishing ? null : setConfirmOpen(false))} title="Publier une nouvelle version">
        <p className="text-sm text-fg">
          Publier la version <b>v{currentVersion + 1}</b> du prompt <span className="font-mono">{selected}</span>&nbsp;?
        </p>
        <p className="mt-2 text-[13px] text-muted">
          La nouvelle version devient active immédiatement : toutes les prochaines conversations l'utiliseront.
          Les versions précédentes restent consultables dans l'historique.
        </p>
        {publishError && <div className="mt-3"><ErrorBanner message={publishError} /></div>}
        <div className="mt-5 flex justify-end gap-2">
          <Button variant="secondary" onClick={() => setConfirmOpen(false)} disabled={publishing}>
            Annuler
          </Button>
          <Button onClick={publish} disabled={publishing}>
            {publishing && <Spinner />}
            Publier
          </Button>
        </div>
      </Modal>
    </div>
  );
}