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

export default function AdminArticlesPage() {
  const router = useRouter();
  const [articles, setArticles] = useState<AdminArticle[]>([]);
  const [chargement, setChargement] = useState(true);
  const [aSupprimer, setASupprimer] = useState<AdminArticle | null>(null);

  const charger = () => {
    setChargement(true);
    getAdminArticles().then(setArticles).finally(() => setChargement(false));
  };

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

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

  const colonnes: Column<AdminArticle>[] = useMemo(
    () => [
      { key: "titre", label: "Titre de l'article", sortable: true },
      { key: "slug", label: "Slug URL" },
      { key: "publie", label: "Publication", render: (a) => <StatusBadge status={a.publie ? "PUBLIE" : "BROUILLON"} /> },
      { key: "createdAt", label: "Date", sortable: true, render: (a) => new Date(a.createdAt).toLocaleDateString("fr-FR") },
      {
        key: "actions" as any,
        label: "Actions",
        align: "right",
        render: (a) => (
          <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
            <Button size="sm" variant="secondaire" onClick={() => router.push(`/admin/contenu/articles/${a.id}`)}>
              <Pencil size={14} />
            </Button>
            <Button size="sm" variant="danger" onClick={() => setASupprimer(a)}>
              <Trash2 size={14} />
            </Button>
          </div>
        ),
      },
    ],
    [router],
  );

  return (
    <div>
      <PageHeader
        title="Articles du blog"
        subtitle="Rédigez et publiez les articles du blog Pubago."
        actions={
          <Button onClick={() => router.push("/admin/contenu/articles/nouveau")}>
            <Plus size={16} /> Nouvel article
          </Button>
        }
      />

      <DataTable<AdminArticle>
        columns={colonnes}
        data={articles}
        isLoading={chargement}
        keyExtractor={(a) => a.id}
        emptyTitle="Aucun article créé"
      />

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