"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import PageHeader from "@/components/admin/ui/PageHeader";
import Tabs from "@/components/admin/ui/Tabs";
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 { toast } from "sonner";
import {
  getAdminSlides, deleteAdminSlide,
  getAdminArticles, deleteAdminArticle,
  getAdminTemoignages, deleteAdminTemoignage,
  getAdminPartenaires, deleteAdminPartenaire,
} from "@/lib/api/admin/contenu";
import type { AdminSlide, AdminArticle, AdminTemoignage, AdminPartenaire } from "@/types/admin";
import { Plus, Image as ImageIcon, BookOpen, MessageSquareQuote, Handshake, Pencil, Trash2 } from "lucide-react";

export default function AdminContenuPage() {
  const router = useRouter();
  const [ongletActif, setOngletActif] = useState("slides");

  // Données
  const [slides, setSlides] = useState<AdminSlide[]>([]);
  const [articles, setArticles] = useState<AdminArticle[]>([]);
  const [temoignages, setTemoignages] = useState<AdminTemoignage[]>([]);
  const [partenaires, setPartenaires] = useState<AdminPartenaire[]>([]);
  const [chargement, setChargement] = useState(true);

  // Suppression
  const [itemASupprimer, setItemASupprimer] = useState<{ id: number; type: string } | null>(null);

  const chargerContenu = () => {
    setChargement(true);
    if (ongletActif === "slides") {
      getAdminSlides().then(setSlides).catch(() => toast.error("Erreur de chargement des slides.")).finally(() => setChargement(false));
    } else if (ongletActif === "articles") {
      getAdminArticles().then(setArticles).catch(() => toast.error("Erreur de chargement des articles.")).finally(() => setChargement(false));
    } else if (ongletActif === "temoignages") {
      getAdminTemoignages().then(setTemoignages).catch(() => toast.error("Erreur de chargement des témoignages.")).finally(() => setChargement(false));
    } else if (ongletActif === "partenaires") {
      getAdminPartenaires().then(setPartenaires).catch(() => toast.error("Erreur de chargement des partenaires.")).finally(() => setChargement(false));
    }
  };

  useEffect(() => {
    chargerContenu();
  }, [ongletActif]);

  const confirmerSuppression = async () => {
    if (!itemASupprimer) return;
    try {
      if (itemASupprimer.type === "slide") await deleteAdminSlide(itemASupprimer.id);
      if (itemASupprimer.type === "article") await deleteAdminArticle(itemASupprimer.id);
      if (itemASupprimer.type === "temoignage") await deleteAdminTemoignage(itemASupprimer.id);
      if (itemASupprimer.type === "partenaire") await deleteAdminPartenaire(itemASupprimer.id);
      setItemASupprimer(null);
      toast.success("Élément supprimé avec succès !");
      chargerContenu();
    } catch {
      toast.error("Erreur lors de la suppression.");
    }
  };

  // Colonnes Slides
  const colonnesSlides: 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}`)} title="Modifier le slide">
            <Pencil size={14} />
          </Button>
          <Button size="sm" variant="danger" onClick={() => setItemASupprimer({ id: s.id, type: "slide" })} title="Supprimer le slide">
            <Trash2 size={14} />
          </Button>
        </div>
      ),
    },
  ], [router]);

  // Colonnes Articles
  const colonnesArticles: 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}`)} title="Modifier l'article">
            <Pencil size={14} />
          </Button>
          <Button size="sm" variant="danger" onClick={() => setItemASupprimer({ id: a.id, type: "article" })} title="Supprimer l'article">
            <Trash2 size={14} />
          </Button>
        </div>
      ),
    },
  ], [router]);

  // Colonnes Témoignages
  const colonnesTemoignages: 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}`)} title="Modifier le témoignage">
            <Pencil size={14} />
          </Button>
          <Button size="sm" variant="danger" onClick={() => setItemASupprimer({ id: t.id, type: "temoignage" })} title="Supprimer le témoignage">
            <Trash2 size={14} />
          </Button>
        </div>
      ),
    },
  ], [router]);

  // Colonnes Partenaires
  const colonnesPartenaires: Column<AdminPartenaire>[] = useMemo(() => [
    { key: "nom", label: "Nom du partenaire", sortable: true },
    { key: "type", label: "Type", render: (p) => p.type === "DISTRIBUTEUR" ? "🏪 Distributeur" : "📢 Annonceur" },
    { key: "siteWeb", label: "Site Web", render: (p) => p.siteWeb ? <a href={p.siteWeb} target="_blank" rel="noreferrer" style={{ textDecoration: "underline" }}>{p.siteWeb}</a> : "—" },
    { key: "actif", label: "Statut", render: (p) => <StatusBadge status={p.actif ? "ACTIF" : "INACTIF"} /> },
    {
      key: "actions" as any,
      label: "Actions",
      align: "right",
      render: (p) => (
        <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
          <Button size="sm" variant="secondaire" onClick={() => router.push(`/admin/contenu/partenaires/${p.id}`)} title="Modifier le partenaire">
            <Pencil size={14} />
          </Button>
          <Button size="sm" variant="danger" onClick={() => setItemASupprimer({ id: p.id, type: "partenaire" })} title="Supprimer le partenaire">
            <Trash2 size={14} />
          </Button>
        </div>
      ),
    },
  ], [router]);

  const onglets = [
    { value: "slides", label: "Carrousel Hero", icon: <ImageIcon size={16} /> },
    { value: "articles", label: "Articles Blog", icon: <BookOpen size={16} /> },
    { value: "temoignages", label: "Témoignages", icon: <MessageSquareQuote size={16} /> },
    { value: "partenaires", label: "Partenaires", icon: <Handshake size={16} /> },
  ];

  const getBoutonAjout = () => {
    switch (ongletActif) {
      case "slides":
        return <Button onClick={() => router.push("/admin/contenu/slides/nouveau")}><Plus size={16} /> Nouveau slide</Button>;
      case "articles":
        return <Button onClick={() => router.push("/admin/contenu/articles/nouveau")}><Plus size={16} /> Nouvel article</Button>;
      case "temoignages":
        return <Button onClick={() => router.push("/admin/contenu/temoignages/nouveau")}><Plus size={16} /> Nouveau témoignage</Button>;
      case "partenaires":
        return <Button onClick={() => router.push("/admin/contenu/partenaires/nouveau")}><Plus size={16} /> Nouveau partenaire</Button>;
    }
  };

  return (
    <div>
      <PageHeader
        title="Gestion des contenus (CMS)"
        subtitle="Pilotez les visuels du hero, les articles du blog, les témoignages et partenaires."
        actions={getBoutonAjout()}
      />

      <div style={{ marginBottom: "24px" }}>
        <Tabs tabs={onglets} value={ongletActif} onChange={setOngletActif} />
      </div>

      {ongletActif === "slides" && (
        <DataTable<AdminSlide> columns={colonnesSlides} data={slides} isLoading={chargement} keyExtractor={(s) => s.id} emptyTitle="Aucun slide configuré" />
      )}
      {ongletActif === "articles" && (
        <DataTable<AdminArticle> columns={colonnesArticles} data={articles} isLoading={chargement} keyExtractor={(a) => a.id} emptyTitle="Aucun article créé" />
      )}
      {ongletActif === "temoignages" && (
        <DataTable<AdminTemoignage> columns={colonnesTemoignages} data={temoignages} isLoading={chargement} keyExtractor={(t) => t.id} emptyTitle="Aucun témoignage enregistré" />
      )}
      {ongletActif === "partenaires" && (
        <DataTable<AdminPartenaire> columns={colonnesPartenaires} data={partenaires} isLoading={chargement} keyExtractor={(p) => p.id} emptyTitle="Aucun partenaire enregistré" />
      )}

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