import { useRef, useState } from "react";
import { Loader2 } from "lucide-react";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useTrips } from "@/contexts/TripContext";
import { inviteTraveler } from "@/services/invitationService";
import { isTravelerAlreadyLinked, normalizeTravelerEmail } from "@/services/travelerActions";
import type { Trip } from "@/types";
import { toast } from "sonner";

export function NewClientDialog({ open, onOpenChange, trips }: { open: boolean; onOpenChange: (open: boolean) => void; trips: Trip[] }) {
  const { refetchTrips } = useTrips(); const lock = useRef(false);
  const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [tripId, setTripId] = useState(""); const [error, setError] = useState<string | null>(null); const [busy, setBusy] = useState(false);
  const submit = async () => { const normalized = normalizeTravelerEmail(email); const trip = trips.find((item) => item.id === tripId); if (lock.current) return;
    if (name.trim().length < 2 || !/^\S+@\S+\.\S+$/.test(normalized) || !trip) { setError("Indiquez un nom, un email valide et le voyage concerné."); return; }
    const linked = [...(trip.members || []).map((m) => m.email), ...(trip.invitations || []).filter((i) => i.status === "pending").map((i) => i.email)];
    if (isTravelerAlreadyLinked(normalized, linked)) { setError("Cette personne participe déjà à ce voyage ou possède une invitation active."); return; }
    lock.current = true; setBusy(true); setError(null);
    try { const result = await inviteTraveler({ tripId, email: normalized, travelerName: name.trim() }); await refetchTrips(); toast.success(result?.associated ? "Cette personne utilise déjà TripTales. Elle a été ajoutée au voyage." : `Invitation envoyée à ${normalized}.`); setName(""); setEmail(""); setTripId(""); onOpenChange(false); }
    catch (cause) { console.error(cause); setError(cause instanceof Error ? cause.message : "Impossible d’ajouter ce client. Réessayez."); }
    finally { lock.current = false; setBusy(false); }
  };
  return <Dialog open={open} onOpenChange={(value) => !lock.current && onOpenChange(value)}><DialogContent className="sm:max-w-lg"><DialogHeader><DialogTitle>Nouveau client</DialogTitle><DialogDescription>Associez cette personne immédiatement à un voyage.</DialogDescription></DialogHeader><form className="mt-2 space-y-5" onSubmit={(event) => { event.preventDefault(); void submit(); }}><div className="grid gap-2"><Label htmlFor="client-name">Nom complet</Label><Input id="client-name" autoFocus value={name} onChange={(event) => setName(event.target.value)} /></div><div className="grid gap-2"><Label htmlFor="client-email">Email</Label><Input id="client-email" type="email" value={email} onChange={(event) => setEmail(event.target.value)} /></div><div className="grid gap-2"><Label htmlFor="client-trip">Associer à un voyage</Label><Select value={tripId} onValueChange={setTripId}><SelectTrigger id="client-trip"><SelectValue placeholder="Choisir un voyage" /></SelectTrigger><SelectContent>{trips.map((trip) => <SelectItem key={trip.id} value={trip.id}>{trip.title} · {trip.destination}</SelectItem>)}</SelectContent></Select><p className="text-xs text-muted-foreground">Un compte existant sera associé ; sinon une invitation sera envoyée.</p></div>{error && <p role="alert" className="rounded-lg bg-destructive/10 p-3 text-sm text-destructive">{error}</p>}<Button type="submit" disabled={busy || !trips.length} className="w-full sm:w-auto">{busy ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" />Création…</> : "Créer et ajouter au voyage"}</Button></form></DialogContent></Dialog>;
}