"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { Megaphone, Store } from "lucide-react";
import PageHeader from "@/components/admin/ui/PageHeader";
import FiltresCard from "@/components/admin/ui/FiltresCard";
import Select from "@/components/admin/ui/Select";
import Input from "@/components/admin/ui/Input";
import DataTable, { type Column } from "@/components/admin/ui/DataTable";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import { getClients } from "@/lib/api/admin/clients";
import type { AdminUser } from "@/types/admin";

const TYPES = [
  { value: "", label: "Tous les types" },
  { value: "ANNONCEUR", label: "Annonceur" },
  { value: "POINT_DE_VENTE", label: "Point de vente" },
  { value: "ADMIN", label: "Administrateur" },
  { value: "COMMERCIAL", label: "Commercial" },
];

export default function AdminClientsPage() {
  const router = useRouter();
  const [clients, setClients] = useState<AdminUser[]>([]);
  const [typeFiltre, setTypeFiltre] = useState("");
  const [recherche, setRecherche] = useState("");
  const [chargement, setChargement] = useState(true);

  const chargerClients = () => {
    setChargement(true);
    getClients({ limit: 100, type: typeFiltre || undefined, q: recherche || undefined })
      .then((res) => setClients(res.items))
      .finally(() => setChargement(false));
  };

  useEffect(() => {
    chargerClients();
  }, [typeFiltre]);

  const handleRechercheKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      chargerClients();
    }
  };

  const colonnes: Column<AdminUser>[] = useMemo(
    () => [
      { key: "nom", label: "Nom complet", sortable: true },
      { key: "email", label: "E-mail", sortable: true },
      { key: "telephone", label: "Téléphone", render: (c) => c.telephone || "—" },
      {
        key: "type",
        label: "Type de compte",
        sortable: true,
        render: (c) => (
          <span style={{ display: "flex", alignItems: "center", gap: "6px", fontWeight: 600, fontSize: "13px" }}>
            {c.type === "ANNONCEUR" ? (
              <>
                <Megaphone size={14} color="var(--vert-fonce)" />
                Annonceur
              </>
            ) : c.type === "POINT_DE_VENTE" ? (
              <>
                <Store size={14} color="var(--vert-fonce)" />
                Point de vente
              </>
            ) : (
              c.type
            )}
          </span>
        ),
      },
      {
        key: "actif",
        label: "Statut",
        render: (c) => <StatusBadge status={c.actif ? "ACTIF" : "INACTIF"} />,
      },
      {
        key: "createdAt",
        label: "Inscrit le",
        sortable: true,
        render: (c) => new Date(c.createdAt).toLocaleDateString("fr-FR"),
      },
    ],
    [],
  );

  return (
    <div>
      <PageHeader
        title="Clients & Utilisateurs"
        subtitle="Gérez les comptes annonceurs, commerces partenaires et équipes."
      />

      <FiltresCard>
        <Select label="Type de compte" options={TYPES} value={typeFiltre} onChange={(e) => setTypeFiltre(e.target.value)} />
        <Input
          label="Recherche"
          placeholder="Nom ou e-mail (Entrée pour rechercher)..."
          value={recherche}
          onChange={(e) => setRecherche(e.target.value)}
          onKeyDown={handleRechercheKeyDown}
        />
      </FiltresCard>

      <DataTable<AdminUser>
        columns={colonnes}
        data={clients}
        isLoading={chargement}
        keyExtractor={(c) => c.uid}
        onRowClick={(client) => router.push(`/admin/clients/${client.uid}`)}
        emptyTitle="Aucun utilisateur trouvé"
      />
    </div>
  );
}