import { useMemo, useState } from "react";
import { Search, UserPlus, Users } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useTrips } from "@/contexts/TripContext";
import { PlannerPageState } from "@/components/dashboard/PlannerPageState";
import { TravelerStatusBadge } from "@/components/travelers/TravelerStatusBadge";
import { NewClientDialog } from "@/components/travelers/NewClientDialog";

export default function PlannerClientsPage() {
  const { getUserTrips, isLoading, error, refetchTrips } = useTrips();
  const [query, setQuery] = useState(""); const [showNewClient, setShowNewClient] = useState(false);
  const trips = getUserTrips();
  const clients = useMemo(() => { const rows = new Map<string, { name: string; email: string; trips: Set<string>; active: boolean }>(); for (const trip of trips) { for (const member of trip.members || []) { const key = member.email.toLowerCase(); const row = rows.get(key) || { name: member.name, email: member.email, trips: new Set(), active: true }; row.name = member.name; row.active = true; row.trips.add(trip.id); rows.set(key, row); } for (const invitation of trip.invitations || []) { const key = invitation.email.toLowerCase(); const row = rows.get(key) || { name: invitation.email.split("@")[0], email: invitation.email, trips: new Set(), active: false }; row.trips.add(trip.id); rows.set(key, row); } } const needle = query.trim().toLowerCase(); return [...rows.values()].filter((client) => !needle || client.name.toLowerCase().includes(needle) || client.email.toLowerCase().includes(needle)); }, [query, trips]);
  if (isLoading || error) return <PlannerPageState loading={isLoading} error={error} onRetry={refetchTrips} />;
  return <div className="page-shell"><div className="mx-auto max-w-5xl"><header className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end"><div><h1 className="page-title">Clients</h1><p className="mt-2 text-muted-foreground">Les personnes associées à vos voyages et invitations.</p></div><Button onClick={() => setShowNewClient(true)} disabled={!trips.length}><UserPlus className="mr-2 h-4 w-4" />Nouveau client</Button></header><label className="relative mt-8 block max-w-md"><span className="sr-only">Rechercher un client</span><Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" /><Input className="pl-9" placeholder="Rechercher par nom ou email" value={query} onChange={(event) => setQuery(event.target.value)} /></label>
    {clients.length ? <div className="mt-6 divide-y border-y">{clients.map((client) => <article key={client.email} className="flex flex-col gap-4 py-5 sm:flex-row sm:items-center"><Avatar><AvatarFallback>{client.name.slice(0, 2).toUpperCase()}</AvatarFallback></Avatar><div className="min-w-0 flex-1"><h2 className="truncate font-semibold capitalize">{client.name}</h2><a href={`mailto:${client.email}`} className="text-sm text-muted-foreground">{client.email}</a><p className="mt-1 text-xs text-muted-foreground">{client.trips.size} voyage(s)</p></div><TravelerStatusBadge status={client.active ? "active" : "pending"} /></article>)}</div> : <div className="mt-10 rounded-xl bg-muted/40 py-14 text-center"><Users className="mx-auto h-8 w-8 text-muted-foreground" /><h2 className="mt-4 font-semibold">{query ? "Aucun client trouvé" : "Votre carnet client est vide"}</h2><p className="mt-2 text-sm text-muted-foreground">Créez un client et associez-le à un voyage.</p></div>}
    <NewClientDialog open={showNewClient} onOpenChange={setShowNewClient} trips={trips} />
  </div></div>;
}