"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import PageHeader from "@/components/admin/ui/PageHeader";
import Button from "@/components/admin/ui/Button";
import DataTable, { type Column } from "@/components/admin/ui/DataTable";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import ConfirmDialog from "@/components/admin/ui/ConfirmDialog";
import { getAdminTemoignages, deleteAdminTemoignage } from "@/lib/api/admin/contenu";
import type { AdminTemoignage } from "@/types/admin";
import { Plus, Pencil, Trash2 } from "lucide-react";

export default function AdminTemoignagesPage() {
  const router = useRouter();
  const [temoignages, setTemoignages] = useState<AdminTemoignage[]>([]);
  const [chargement, setChargement] = useState(true);
  const [aSupprimer, setASupprimer] = useState<AdminTemoignage | null>(null);

  const charger = () => {
    setChargement(true);
    getAdminTemoignages().then(setTemoignages).finally(() => setChargement(false));
  };

  useEffect(() => {
    charger();
  }, []);

  const confirmerSuppression = async () => {
    if (!aSupprimer) return;
    try {
      await deleteAdminTemoignage(aSupprimer.id);
      setASupprimer(null);
      charger();
    } catch {}
  };

  const colonnes: Column<AdminTemoignage>[] = useMemo(
    () => [
      { key: "auteur", label: "Client / Auteur", sortable: true },
      { key: "entreprise", label: "Entreprise", render: (t) => t.entreprise || "—" },
      { key: "note", label: "Note", align: "center", render: (t) => `${"⭐".repeat(t.note)} (${t.note}/5)` },
      { key: "actif", label: "Statut", render: (t) => <StatusBadge status={t.actif ? "ACTIF" : "INACTIF"} /> },
      {
        key: "actions" as any,
        label: "Actions",
        align: "right",
        render: (t) => (
          <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
            <Button size="sm" variant="secondaire" onClick={() => router.push(`/admin/contenu/temoignages/${t.id}`)}>
              <Pencil size={14} />
            </Button>
            <Button size="sm" variant="danger" onClick={() => setASupprimer(t)}>
              <Trash2 size={14} />
            </Button>
          </div>
        ),
      },
    ],
    [router],
  );

  return (
    <div>
      <PageHeader
        title="Témoignages"
        subtitle="Gérez les avis clients affichés sur le site public."
        actions={
          <Button onClick={() => router.push("/admin/contenu/temoignages/nouveau")}>
            <Plus size={16} /> Nouveau témoignage
          </Button>
        }
      />

      <DataTable<AdminTemoignage>
        columns={colonnes}
        data={temoignages}
        isLoading={chargement}
        keyExtractor={(t) => t.id}
        emptyTitle="Aucun témoignage enregistré"
      />

      <ConfirmDialog
        open={aSupprimer !== null}
        title="Supprimer ce témoignage ?"
        description="Cette action est irréversible et retirera immédiatement le témoignage du site public."
        confirmLabel="Supprimer"
        danger
        onConfirm={confirmerSuppression}
        onCancel={() => setASupprimer(null)}
      />
    </div>
  );
}