// src/components/content/import-csv-dialog.tsx — import CSV des content_items (ELEVA-59).
"use client";

import { ImportIcon } from "lucide-react";
import { useRef, useState } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  type ContentImportPreview,
  commitContentImportAction,
  previewContentImportAction,
} from "@/lib/content/import-actions";

export function ImportCsvDialog({
  siteId,
  open,
  onOpenChange,
  onImported,
}: {
  siteId: string;
  open: boolean;
  onOpenChange: (v: boolean) => void;
  onImported: () => void;
}) {
  const [csv, setCsv] = useState<string | null>(null);
  const [preview, setPreview] = useState<ContentImportPreview | null>(null);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  function reset() {
    setCsv(null);
    setPreview(null);
    setPending(false);
    setError(null);
  }

  async function loadFile(file: File) {
    // Server Actions cap the payload at 1 MB; reject oversized files up front.
    if (file.size > 1_000_000) {
      setError("Fichier trop lourd (max 1 Mo)");
      return;
    }
    reset();
    const text = await file.text();
    setCsv(text);
    setPending(true);
    try {
      setPreview(await previewContentImportAction(siteId, text));
    } catch {
      setError("Import impossible (fichier invalide ou trop volumineux).");
    } finally {
      setPending(false);
    }
  }

  async function commit() {
    if (!csv) return;
    setPending(true);
    try {
      const res = await commitContentImportAction(siteId, csv);
      const parts = [`${res.created} créé(s)`, `${res.updated} mis à jour`];
      if (res.keywordsLinked > 0)
        parts.push(`${res.keywordsLinked} mot(s)-clé(s) lié(s)`);
      if (res.keywordsUnknown > 0)
        parts.push(`${res.keywordsUnknown} mot(s)-clé(s) introuvable(s)`);
      toast.success(`Import terminé : ${parts.join(", ")}`);
      onImported();
      onOpenChange(false);
      reset();
    } catch {
      toast.error("Échec de l'import");
    } finally {
      setPending(false);
    }
  }

  const importable = preview
    ? preview.counts.created + preview.counts.updated
    : 0;

  return (
    <Dialog
      open={open}
      onOpenChange={(o) => {
        if (!o) reset();
        onOpenChange(o);
      }}
    >
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Importer du contenu</DialogTitle>
          <DialogDescription>
            CSV au format de l&apos;export — matching par titre, mots-clés liés
            par terme.
          </DialogDescription>
        </DialogHeader>

        {error ? (
          <p className="text-destructive text-sm" role="alert">
            {error}
          </p>
        ) : null}

        {!preview ? (
          <button
            type="button"
            onClick={() => inputRef.current?.click()}
            onDragOver={(e) => e.preventDefault()}
            onDrop={(e) => {
              e.preventDefault();
              const f = e.dataTransfer.files[0];
              if (f) loadFile(f);
            }}
            className="flex h-40 w-full flex-col items-center justify-center gap-2 rounded-lg border border-input border-dashed text-muted-foreground text-sm"
          >
            <ImportIcon className="size-6" />
            {pending
              ? "Analyse…"
              : "Dépose ton CSV ici, ou clique pour parcourir"}
            <input
              ref={inputRef}
              type="file"
              accept=".csv,text/csv"
              className="hidden"
              onChange={(e) => {
                const f = e.target.files?.[0];
                if (f) loadFile(f);
              }}
            />
          </button>
        ) : (
          <div className="grid gap-3">
            {preview.rows.length > 0 ? (
              <div className="max-h-72 overflow-auto rounded-lg border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Ligne</TableHead>
                      <TableHead>Titre</TableHead>
                      <TableHead>Action</TableHead>
                      <TableHead>Mot-clé principal</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {preview.rows.map((r) => (
                      <TableRow key={r.line}>
                        <TableCell>{r.line}</TableCell>
                        <TableCell>{r.title}</TableCell>
                        <TableCell>
                          {r.action === "new" ? (
                            <Badge>nouveau</Badge>
                          ) : (
                            <Badge variant="secondary">mise à jour</Badge>
                          )}
                        </TableCell>
                        <TableCell>
                          {r.primaryKeywordTerm ? (
                            r.primaryKeywordFound ? (
                              r.primaryKeywordTerm
                            ) : (
                              <span className="text-amber-600">
                                ⚠️ {r.primaryKeywordTerm} introuvable
                              </span>
                            )
                          ) : (
                            <span className="text-muted-foreground">—</span>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            ) : null}
            {preview.errors.length > 0 ? (
              <ul className="text-destructive text-sm" role="alert">
                {preview.errors.map((e) => (
                  <li key={e.line}>
                    Ligne {e.line} : {e.error}
                  </li>
                ))}
              </ul>
            ) : null}
            <p className="text-muted-foreground text-sm">
              {preview.counts.created} création(s) · {preview.counts.updated}{" "}
              mise(s) à jour · {preview.counts.errors} erreur(s)
            </p>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={reset} disabled={pending}>
                Autre fichier
              </Button>
              <Button onClick={commit} disabled={pending || importable === 0}>
                {pending ? "Import…" : `Importer (${importable})`}
              </Button>
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}