import { useState } from "react";
import { Plus, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { AddTravelerDialog } from "@/components/travelers/AddTravelerDialog";
import { TravelerStatusBadge } from "@/components/travelers/TravelerStatusBadge";
import { useTripWorkspace } from "@/hooks/useTripWorkspace";

const initials = (name: string) => name.split(/\s+/).slice(0, 2).map((part) => part[0]).join("").toUpperCase();

export default function TripWorkspaceTravelersPage() {
  const { trip } = useTripWorkspace();
  const [adding, setAdding] = useState(false);
  const memberEmails = new Set((trip.members || []).map((member) => member.email.toLowerCase()));
  const pending = (trip.invitations || []).filter((invitation) => !memberEmails.has(invitation.email.toLowerCase()));
  const publishedStepIds = new Set(trip.steps.filter((step) => step.isPublished).map((step) => step.id));

  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><h2 className="page-title">Voyageurs</h2><p className="mt-2 text-muted-foreground">Gérez les personnes participant à ce voyage et leur accès.</p></div><Button onClick={() => setAdding(true)}><Plus className="mr-2 h-4 w-4" />Ajouter un voyageur</Button></header>
    {(trip.members?.length || pending.length) ? <div className="mt-8 divide-y border-y">
      {(trip.members || []).map((member) => { const validated = trip.steps.filter((step) => publishedStepIds.has(step.id) && (step.validations || []).some((validation) => validation.travelerId === member.userId && validation.status === "approved")).length; return <article key={member.userId} className="flex flex-col gap-4 py-5 sm:flex-row sm:items-center"><Avatar className="h-11 w-11"><AvatarFallback>{initials(member.name)}</AvatarFallback></Avatar><div className="min-w-0 flex-1"><h3 className="truncate font-semibold">{member.name}</h3><a className="truncate text-sm text-muted-foreground hover:text-foreground" href={`mailto:${member.email}`}>{member.email}</a><p className="mt-1 text-xs text-muted-foreground">Voyageur · {validated}/{publishedStepIds.size} étapes validées</p></div><TravelerStatusBadge status="active" /></article>; })}
      {pending.map((invitation) => <article key={invitation.email} className="flex flex-col gap-4 py-5 sm:flex-row sm:items-center"><Avatar className="h-11 w-11"><AvatarFallback>{initials(invitation.email)}</AvatarFallback></Avatar><div className="min-w-0 flex-1"><h3 className="truncate font-semibold">{invitation.email.split("@")[0]}</h3><a className="truncate text-sm text-muted-foreground" href={`mailto:${invitation.email}`}>{invitation.email}</a><p className="mt-1 text-xs text-muted-foreground">Invitée le {new Date(invitation.createdAt).toLocaleDateString("fr-FR")}</p></div><TravelerStatusBadge status={invitation.status === "pending" ? "pending" : invitation.status === "expired" ? "expired" : "revoked"} /></article>)}
    </div> : <div className="mt-10 rounded-xl bg-muted/40 px-6 py-14 text-center"><Users className="mx-auto h-8 w-8 text-muted-foreground" /><h3 className="mt-4 text-lg font-semibold">Aucun voyageur pour le moment</h3><p className="mx-auto mt-2 max-w-md text-sm text-muted-foreground">Ajoutez vos clients pour leur partager le voyage et recueillir leurs validations.</p><Button className="mt-5" onClick={() => setAdding(true)}><Plus className="mr-2 h-4 w-4" />Ajouter un voyageur</Button></div>}
    <AddTravelerDialog open={adding} onOpenChange={setAdding} tripId={trip.id} members={trip.members || []} invitationEmails={(trip.invitations || []).filter((item) => item.status === "pending").map((item) => item.email)} />
  </div></div>;
}