"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 DatePicker from "@/components/admin/ui/DatePicker";
import DataTable, { type Column } from "@/components/admin/ui/DataTable";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import { getCommandes } from "@/lib/api/admin/commandes";
import type { AdminCommande } from "@/types/admin";

const STATUTS = [
  { value: "", label: "Tous les statuts" },
  { value: "EN_ATTENTE", label: "En attente" },
  { value: "VALIDEE", label: "Validée" },
  { value: "EN_PRODUCTION", label: "En production" },
  { value: "LIVREE", label: "Livrée" },
  { value: "ANNULEE", label: "Annulée" },
];

export default function AdminCommandesPage() {
  const router = useRouter();
  const [commandes, setCommandes] = useState<AdminCommande[]>([]);
  const [statutFiltre, setStatutFiltre] = useState("");
  const [dateDebut, setDateDebut] = useState("");
  const [dateFin, setDateFin] = useState("");
  const [chargement, setChargement] = useState(true);

  useEffect(() => {
    setChargement(true);
    getCommandes({
      limit: 100,
      statut: statutFiltre || undefined,
      date_debut: dateDebut || undefined,
      date_fin: dateFin || undefined,
    })
      .then((res) => setCommandes(res.items))
      .finally(() => setChargement(false));
  }, [statutFiltre, dateDebut, dateFin]);

  const colonnes: Column<AdminCommande>[] = useMemo(
    () => [
      { key: "reference", label: "Référence", sortable: true },
      { key: "userNom", label: "Client", render: (c) => c.userNom ?? "—" },
      { key: "quantite", label: "Quantité", align: "right", sortable: true },
      {
        key: "prixTotal",
        label: "Montant",
        align: "right",
        sortable: true,
        render: (c) => `${c.prixTotal.toLocaleString("fr-FR")} FCFA`,
      },
      { key: "statut", label: "Statut", render: (c) => <StatusBadge status={c.statut} /> },
      {
        key: "createdAt",
        label: "Date",
        sortable: true,
        render: (c) => new Date(c.createdAt).toLocaleDateString("fr-FR"),
      },
    ],
    [],
  );

  return (
    <div>
      <PageHeader title="Commandes" subtitle="Validation des designs, suivi de production et statuts." />

      <FiltresCard>
        <Select
          label="Statut"
          options={STATUTS}
          value={statutFiltre}
          onChange={(e) => setStatutFiltre(e.target.value)}
        />
        <DatePicker label="Du" value={dateDebut} onChange={setDateDebut} placeholder="Date de début" />
        <DatePicker label="Au" value={dateFin} onChange={setDateFin} placeholder="Date de fin" />
      </FiltresCard>

      <DataTable
        columns={colonnes}
        data={commandes}
        isLoading={chargement}
        searchable
        pageSize={20}
        keyExtractor={(c) => c.id}
        onRowClick={(c) => router.push(`/admin/commandes/${c.uid}`)}
        emptyTitle="Aucune commande"
        emptyDescription="Les commandes passées par les clients apparaîtront ici."
      />
    </div>
  );
}