import { useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { InvitationStatus } from "@/components/dashboard/InvitationStatus";
import { PlannerPageState } from "@/components/dashboard/PlannerPageState";
import { useTrips } from "@/contexts/TripContext";
import { buildRememberedTripUrl } from "@/services/stepSelectionUrl";

export default function PlannerTravelersPage() {
  const { getUserTrips, isLoading, error, refetchTrips } = useTrips();
  const trips = getUserTrips();
  const [selectedTripId, setSelectedTripId] = useState("");
  const selectedTrip = trips.find((trip) => trip.id === selectedTripId);
  const travelers = useMemo(() => {
    const rows = new Map<string, { name: string; email: string; trips: Array<{ id: string; title: string; status: "Membre actif" | "Invitation en attente"; date?: string }> }>();
    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: [] };
        row.trips.push({ id: trip.id, title: trip.title, status: "Membre actif" });
        rows.set(key, row);
      }
      for (const invitation of (trip.invitations || []).filter((item) => item.status === "pending")) {
        const key = invitation.email.toLowerCase();
        const row = rows.get(key) || { name: invitation.email, email: invitation.email, trips: [] };
        if (!row.trips.some((item) => item.id === trip.id)) row.trips.push({ id: trip.id, title: trip.title, status: "Invitation en attente", date: invitation.createdAt });
        rows.set(key, row);
      }
    }
    return [...rows.values()];
  }, [trips]);
  const state = <PlannerPageState loading={isLoading} error={error} onRetry={refetchTrips} />;
  if (isLoading || error) return state;

  return <div className="page-shell"><div className="mx-auto max-w-6xl space-y-8">
    <header><h1 className="page-title">Voyageurs</h1><p className="mt-2 text-muted-foreground">Suivez les membres actifs et les invitations en attente pour l’ensemble de vos voyages.</p></header>
    <section className="surface-card p-5"><h2 className="font-semibold">Inviter un Voyageur</h2><p className="mt-1 text-sm text-muted-foreground">Choisissez d’abord le voyage concerné.</p>
      {trips.length ? <><label className="mt-4 block text-sm font-medium" htmlFor="invite-trip">Voyage</label><select id="invite-trip" className="mt-2 min-h-11 w-full rounded-md border bg-background px-3 sm:max-w-md" value={selectedTripId} onChange={(event) => setSelectedTripId(event.target.value)}><option value="">Sélectionner un voyage</option>{trips.map((trip) => <option key={trip.id} value={trip.id}>{trip.title}</option>)}</select>{selectedTrip && <InvitationStatus tripId={selectedTrip.id} invitations={selectedTrip.invitations || []} members={selectedTrip.members || []} />}</>
        : <p className="mt-4 text-sm text-muted-foreground">Créez un voyage avant d’inviter ses participants.</p>}
    </section>
    {travelers.length ? <div className="grid gap-4 md:grid-cols-2">{travelers.map((traveler) => <article key={traveler.email} className="surface-card p-5"><h2 className="font-semibold">{traveler.name}</h2><p className="text-sm text-muted-foreground">{traveler.email}</p><ul className="mt-4 space-y-3">{traveler.trips.map((trip) => <li key={trip.id} className="rounded-md bg-muted/50 p-3"><div className="flex flex-wrap items-center justify-between gap-2"><Link className="font-medium text-primary hover:underline" to={buildRememberedTripUrl(sessionStorage, "planner", trip.id)}>{trip.title}</Link><Badge variant="outline">{trip.status}</Badge></div>{trip.date && <p className="mt-1 text-xs text-muted-foreground">Invité le {new Date(trip.date).toLocaleDateString("fr-FR")}</p>}</li>)}</ul></article>)}</div>
      : <div className="surface-card p-10 text-center"><h2 className="font-semibold">Aucun Voyageur</h2><p className="mt-2 text-muted-foreground">Invitez les participants d’un voyage pour les retrouver ici.</p></div>}
  </div></div>;
}