"use client";

import { useEffect, useMemo, useState } from "react";
import PageHeader from "@/components/admin/ui/PageHeader";
import DataTable, { type Column } from "@/components/admin/ui/DataTable";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import Button from "@/components/admin/ui/Button";
import Drawer from "@/components/admin/ui/Drawer";
import Select from "@/components/admin/ui/Select";
import { toast } from "sonner";
import { getLivraisons, assignerLivraison } from "@/lib/api/admin/livraisons";
import { getClients } from "@/lib/api/admin/clients";
import type { AdminLivraison, AdminUser } from "@/types/admin";
import { UserCheck } from "lucide-react";

export default function AdminLivraisonsPage() {
  const [livraisons, setLivraisons] = useState<AdminLivraison[]>([]);
  const [commerciaux, setCommerciaux] = useState<AdminUser[]>([]);
  const [chargement, setChargement] = useState(true);
  const [livraisonSelectionnee, setLivraisonSelectionnee] = useState<AdminLivraison | null>(null);
  const [commercialChoisi, setCommercialChoisi] = useState("");
  const [assignationEnCours, setAssignationEnCours] = useState(false);

  const chargerDonnees = () => {
    setChargement(true);
    Promise.all([
      getLivraisons({ limit: 100 }),
      getClients({ limit: 100 }),
    ])
      .then(([livRes, clientsRes]) => {
        setLivraisons(livRes.items);
        setCommerciaux(clientsRes.items);
      })
      .catch(() => toast.error("Impossible de charger les livraisons."))
      .finally(() => setChargement(false));
  };

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

  const ouvrirDrawerAssignation = (livraison: AdminLivraison) => {
    setLivraisonSelectionnee(livraison);
    setCommercialChoisi(livraison.commercialId ? String(livraison.commercialId) : "");
  };

  const validerAssignation = async () => {
    if (!livraisonSelectionnee || !commercialChoisi) return;
    setAssignationEnCours(true);
    try {
      await assignerLivraison(livraisonSelectionnee.id, Number(commercialChoisi));
      setLivraisonSelectionnee(null);
      toast.success("Agent commercial assigné à la livraison avec succès !");
      chargerDonnees();
    } catch {
      toast.error("Erreur lors de l'assignation du commercial.");
    } finally {
      setAssignationEnCours(false);
    }
  };

  const optionsCommerciaux = useMemo(() => {
    return [
      { value: "", label: "Sélectionner un agent..." },
      ...commerciaux.map((c, index) => ({
        value: String(index + 1),
        label: `${c.nom} (${c.type})`,
      })),
    ];
  }, [commerciaux]);

  const colonnes: Column<AdminLivraison>[] = useMemo(
    () => [
      { key: "id", label: "ID", sortable: true, render: (l) => `#${l.id}` },
      { key: "adresse", label: "Adresse de livraison" },
      {
        key: "dateEstimee",
        label: "Date prévue",
        render: (l) => l.dateEstimee ? new Date(l.dateEstimee).toLocaleDateString("fr-FR") : "—",
      },
      {
        key: "statut",
        label: "Statut",
        render: (l) => <StatusBadge status={l.statut} />,
      },
      {
        key: "commercialNom",
        label: "Agent assigné",
        render: (l) => l.commercialNom ? <strong>{l.commercialNom}</strong> : <span style={{ color: "var(--gris-moyen)" }}>Non assigné</span>,
      },
      {
        key: "actions" as any,
        label: "Action",
        align: "right",
        render: (l) => (
          <Button size="sm" variant="secondaire" onClick={() => ouvrirDrawerAssignation(l)} title="Assigner un commercial">
            <UserCheck size={14} />
          </Button>
        ),
      },
    ],
    [],
  );

  return (
    <div>
      <PageHeader
        title="Livraisons"
        subtitle="Gérez la logistique de livraison des sacs kraft et l'affectation aux agents commerciaux."
      />

      <DataTable<AdminLivraison>
        columns={colonnes}
        data={livraisons}
        isLoading={chargement}
        keyExtractor={(l) => l.id}
        emptyTitle="Aucune livraison en attente"
      />

      <Drawer
        open={livraisonSelectionnee !== null}
        onClose={() => setLivraisonSelectionnee(null)}
        title="Assigner un commercial"
        subtitle={`Livraison #${livraisonSelectionnee?.id} : ${livraisonSelectionnee?.adresse}`}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: "20px", marginTop: "16px" }}>
          <div>
            <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "8px" }}>
              Agent commercial / livreur
            </label>
            <Select
              options={optionsCommerciaux}
              value={commercialChoisi}
              onChange={(e) => setCommercialChoisi(e.target.value)}
            />
          </div>

          <Button onClick={validerAssignation} loading={assignationEnCours} disabled={!commercialChoisi}>
            Confirmer l'assignation
          </Button>
        </div>
      </Drawer>
    </div>
  );
}