"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Save, ArrowLeft } from "lucide-react";
import PageHeader from "@/components/admin/ui/PageHeader";
import Card from "@/components/admin/ui/Card";
import Select from "@/components/admin/ui/Select";
import Button from "@/components/admin/ui/Button";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import { PageLoader } from "@/components/admin/ui/Loader";
import { toast } from "sonner";
import { getEspacesPub, changerStatutEspacePub } from "@/lib/api/admin/espace-pub";
import type { AdminEspacePub } from "@/types/admin";
import styles from "./page.module.css";

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

export default function DetailEspacePubPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [espace, setEspace] = useState<AdminEspacePub | null>(null);
  const [statutChoisi, setStatutChoisi] = useState("");
  const [chargement, setChargement] = useState(true);
  const [enregistrement, setEnregistrement] = useState(false);

  useEffect(() => {
    getEspacesPub({ limit: 100 })
      .then((res) => {
        const trouve = res.items.find((e) => e.id === Number(id));
        setEspace(trouve ?? null);
        setStatutChoisi(trouve?.statut ?? "");
      })
      .catch(() => toast.error("Impossible de charger la réservation."))
      .finally(() => setChargement(false));
  }, [id]);

  const enregistrerStatut = async () => {
    if (!espace) return;
    setEnregistrement(true);
    try {
      const maj = await changerStatutEspacePub(espace.id, statutChoisi);
      setEspace(maj);
      toast.success("Statut de la campagne publicitaire mis à jour !");
    } catch {
      toast.error("Erreur lors de la mise à jour du statut.");
    } finally {
      setEnregistrement(false);
    }
  };

  if (chargement) return <PageLoader />;
  if (!espace) return <div>Espace publicitaire introuvable.</div>;

  return (
    <div className={styles.page}>
      <PageHeader
        title={`Campagne #${espace.id}`}
        subtitle={`Annonceur : ${espace.userNom || espace.userEmail || "Anonyme"}`}
        actions={
          <Button variant="secondaire" onClick={() => router.push("/admin/espace-pub")}>
            <ArrowLeft size={16} />
            Retour à la liste
          </Button>
        }
      />

      <div className={styles.grille}>
        <Card title="Détails de la réservation">
          <dl className={styles.infos}>
            <div>
              <dt>Volume commandé</dt>
              <dd>{espace.volumeSacs.toLocaleString("fr-FR")} sacs</dd>
            </div>
            <div>
              <dt>Durée de diffusion</dt>
              <dd>{espace.dureeMois} mois</dd>
            </div>
            <div>
              <dt>Montant total</dt>
              <dd>{espace.montant.toLocaleString("fr-FR")} FCFA</dd>
            </div>
            <div>
              <dt>Période de campagne</dt>
              <dd>
                {new Date(espace.dateDebut).toLocaleDateString("fr-FR")} → {new Date(espace.dateFin).toLocaleDateString("fr-FR")}
              </dd>
            </div>
            <div>
              <dt>Statut actuel</dt>
              <dd>
                <StatusBadge status={espace.statut} />
              </dd>
            </div>
          </dl>
        </Card>

        <Card title="Gestion du statut">
          <div className={styles.formulaire}>
            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>
                Changer le statut de la campagne
              </label>
              <Select
                options={STATUTS}
                value={statutChoisi}
                onChange={(e) => setStatutChoisi(e.target.value)}
              />
            </div>
          </div>
        </Card>
      </div>

      <div className={styles.actionFlottante}>
        <Button onClick={enregistrerStatut} loading={enregistrement} size="lg">
          <Save size={16} />
          Enregistrer le statut
        </Button>
      </div>
    </div>
  );
}