"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import PageHeader from "@/components/admin/ui/PageHeader";
import FiltresCard from "@/components/admin/ui/FiltresCard";
import Select from "@/components/admin/ui/Select";
import DataTable, { type Column } from "@/components/admin/ui/DataTable";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import { getEspacesPub } from "@/lib/api/admin/espace-pub";
import type { AdminEspacePub } from "@/types/admin";

const STATUTS = [
  { value: "", label: "Tous les statuts" },
  { value: "EN_ATTENTE", label: "En attente" },
  { value: "ACTIF", label: "Actif / En cours" },
  { value: "TERMINE", label: "Terminé" },
  { value: "ANNULE", label: "Annulé" },
];

export default function AdminEspacePubPage() {
  const router = useRouter();
  const [campagnes, setCampagnes] = useState<AdminEspacePub[]>([]);
  const [statutFiltre, setStatutFiltre] = useState("");
  const [chargement, setChargement] = useState(true);

  useEffect(() => {
    setChargement(true);
    getEspacesPub({ limit: 100, statut: statutFiltre || undefined })
      .then((res) => setCampagnes(res.items))
      .finally(() => setChargement(false));
  }, [statutFiltre]);

  const colonnes: Column<AdminEspacePub>[] = useMemo(
    () => [
      { key: "id", label: "ID", sortable: true, render: (e) => `#${e.id}` },
      { key: "userNom", label: "Annonceur", render: (e) => e.userNom || e.userEmail || "—" },
      {
        key: "volumeSacs",
        label: "Volume",
        align: "right",
        sortable: true,
        render: (e) => `${e.volumeSacs.toLocaleString("fr-FR")} sacs`,
      },
      {
        key: "dureeMois",
        label: "Durée",
        align: "center",
        render: (e) => `${e.dureeMois} mois`,
      },
      {
        key: "montant",
        label: "Montant",
        align: "right",
        sortable: true,
        render: (e) => `${e.montant.toLocaleString("fr-FR")} FCFA`,
      },
      {
        key: "dateDebut",
        label: "Période",
        render: (e) => `${new Date(e.dateDebut).toLocaleDateString("fr-FR")} → ${new Date(e.dateFin).toLocaleDateString("fr-FR")}`,
      },
      {
        key: "statut",
        label: "Statut",
        render: (e) => <StatusBadge status={e.statut} />,
      },
    ],
    [],
  );

  return (
    <div>
      <PageHeader
        title="Espaces Publicitaires"
        subtitle="Suivez les campagnes des annonceurs et la diffusion sur les sacs kraft."
      />

      <FiltresCard>
        <Select label="Statut" options={STATUTS} value={statutFiltre} onChange={(e) => setStatutFiltre(e.target.value)} />
      </FiltresCard>

      <DataTable<AdminEspacePub>
        columns={colonnes}
        data={campagnes}
        isLoading={chargement}
        keyExtractor={(c) => c.id}
        onRowClick={(c) => router.push(`/admin/espace-pub/${c.id}`)}
        emptyTitle="Aucune réservation d'espace publicitaire trouvée"
      />
    </div>
  );
}