"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 { getAdminSlides, deleteAdminSlide } from "@/lib/api/admin/contenu";
import type { AdminSlide } from "@/types/admin";
import { Plus, Pencil, Trash2 } from "lucide-react";

export default function AdminSlidesPage() {
  const router = useRouter();
  const [slides, setSlides] = useState<AdminSlide[]>([]);
  const [chargement, setChargement] = useState(true);
  const [aSupprimer, setASupprimer] = useState<AdminSlide | null>(null);

  const charger = () => {
    setChargement(true);
    getAdminSlides().then(setSlides).finally(() => setChargement(false));
  };

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

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

  const colonnes: Column<AdminSlide>[] = useMemo(
    () => [
      { key: "ordre", label: "Ordre", sortable: true },
      { key: "titre", label: "Titre principal", sortable: true },
      { key: "sousTitre", label: "Sous-titre" },
      { key: "actif", label: "Statut", render: (s) => <StatusBadge status={s.actif ? "ACTIF" : "INACTIF"} /> },
      {
        key: "actions" as any,
        label: "Actions",
        align: "right",
        render: (s) => (
          <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
            <Button size="sm" variant="secondaire" onClick={() => router.push(`/admin/contenu/slides/${s.id}`)}>
              <Pencil size={14} />
            </Button>
            <Button size="sm" variant="danger" onClick={() => setASupprimer(s)}>
              <Trash2 size={14} />
            </Button>
          </div>
        ),
      },
    ],
    [router],
  );

  return (
    <div>
      <PageHeader
        title="Carrousel Hero"
        subtitle="Gérez les visuels et messages affichés dans le carrousel de la page d'accueil."
        actions={
          <Button onClick={() => router.push("/admin/contenu/slides/nouveau")}>
            <Plus size={16} /> Nouveau slide
          </Button>
        }
      />

      <DataTable<AdminSlide>
        columns={colonnes}
        data={slides}
        isLoading={chargement}
        keyExtractor={(s) => s.id}
        emptyTitle="Aucun slide configuré"
      />

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