import { useEffect, useMemo } from "react";
import { Link, Navigate, useParams, useSearchParams } from "react-router-dom";
import { ArrowLeft, ChevronRight, MapPin, MessageCircle } from "lucide-react";
import { useTrips } from "@/contexts/TripContext";
import { Button } from "@/components/ui/button";
import { StepConversation } from "@/components/communication/StepConversation";
import { formatCommunicationTime, getStepConversations } from "@/services/communication";
import { cn } from "@/lib/utils";

type Filter = "all" | "steps";

export default function TripMessagesPage() {
  const { tripId } = useParams<{ tripId: string }>();
  const { getTrip, isLoading } = useTrips();
  const [search, setSearch] = useSearchParams();
  const trip = tripId ? getTrip(tripId) : undefined;
  const filter = (["all", "steps"] as const).includes(search.get("filter") as Filter) ? search.get("filter") as Filter : "all";
  const conversations = useMemo(() => trip ? getStepConversations(trip) : [], [trip]);
  const selected = conversations.find(({ step }) => step.id === search.get("conversation"));

  useEffect(() => {
    if (conversations.length === 0 || search.get("conversation")) return;
    const next = new URLSearchParams(search);
    next.set("conversation", conversations[0].step.id);
    setSearch(next, { replace: true });
  }, [conversations, search, setSearch]);

  if (!tripId) return <Navigate to="/dashboard/trips" replace />;
  if (isLoading) return <div className="grid min-h-[50vh] place-items-center">Chargement des échanges…</div>;
  if (!trip) return <Navigate to="/dashboard/trips" replace />;

  const setFilter = (nextFilter: Filter) => { const next = new URLSearchParams(search); next.set("filter", nextFilter); setSearch(next, { replace: true }); };
  const selectConversation = (stepId: string) => { const next = new URLSearchParams(search); next.set("conversation", stepId); setSearch(next); };
  const closeConversation = () => { const next = new URLSearchParams(search); next.delete("conversation"); setSearch(next, { replace: true }); };

  return <div className="page-shell"><header className="mb-6"><p className="text-sm font-semibold text-primary">Communication contextualisée</p><h1 className="mt-1 text-3xl font-bold">Messages</h1><p className="mt-2 text-muted-foreground">Les échanges restent rattachés aux étapes de {trip.title}.</p></header>
    <div className="mb-5 flex gap-2" role="tablist" aria-label="Filtrer les messages">{(["all", "steps"] as const).map((value) => <button key={value} role="tab" aria-selected={filter === value} onClick={() => setFilter(value)} className={cn("rounded-full border px-4 py-2 text-sm font-semibold", filter === value && "border-primary bg-primary text-primary-foreground")}>{value === "all" ? "Tous" : "Étapes"}</button>)}</div>
    {conversations.length ? <div className="grid min-h-[520px] overflow-hidden rounded-2xl border bg-white lg:grid-cols-[minmax(280px,.8fr)_minmax(360px,1.2fr)]">
      <section className={cn("divide-y lg:border-r", selected && "hidden lg:block")} aria-label="Conversations par étape">{conversations.map(({ step, comments }) => { const last = comments[comments.length - 1]; return <button key={step.id} onClick={() => selectConversation(step.id)} aria-current={selected?.step.id === step.id ? "true" : undefined} className={cn("flex w-full items-center gap-3 p-4 text-left hover:bg-muted/50", selected?.step.id === step.id && "bg-muted/60")}><div className="min-w-0 flex-1"><div className="flex items-baseline justify-between gap-2"><h2 className="truncate font-semibold">{step.activity}</h2><time className="shrink-0 text-xs text-muted-foreground" dateTime={last.createdAt}>{formatCommunicationTime(last.createdAt)}</time></div><p className="mt-1 text-xs text-muted-foreground">{comments.length} message{comments.length > 1 ? "s" : ""} · Dernier : {last.userName}</p><p className="mt-2 truncate text-sm">“{last.content}”</p></div><ChevronRight className="h-5 w-5 text-muted-foreground" /></button>; })}</section>
      <section className={cn("p-4 sm:p-6", !selected && "hidden lg:grid lg:place-items-center")} aria-label="Fil de messages">{selected ? <div className="min-w-0"><div className="mb-4 border-b pb-4"><Button variant="ghost" size="sm" className="mb-3 lg:hidden" onClick={closeConversation}><ArrowLeft className="mr-2 h-4 w-4" />Conversations</Button><div className="flex flex-wrap items-start justify-between gap-3"><div><h2 className="text-xl font-semibold">{selected.step.activity}</h2><p className="mt-1 flex items-center gap-2 text-sm text-muted-foreground">Jour {selected.step.day}{selected.step.location && <><MapPin className="ml-1 h-3.5 w-3.5" />{selected.step.location}</>}</p></div><Button variant="outline" size="sm" asChild><Link to={`/dashboard/trips/${trip.id}/itinerary?day=${selected.step.day}&step=${encodeURIComponent(selected.step.id)}&panel=step`}>Voir l’étape</Link></Button></div></div><StepConversation tripId={trip.id} plannerId={trip.plannerId} step={selected.step} /></div> : <div className="text-center text-muted-foreground"><MessageCircle className="mx-auto h-8 w-8" /><p className="mt-3">Sélectionnez une conversation.</p></div>}</section>
    </div> : <div className="surface-card p-10 text-center"><MessageCircle className="mx-auto h-8 w-8 text-muted-foreground" /><h2 className="mt-3 text-lg font-semibold">Aucun échange pour le moment</h2><p className="mt-2 text-muted-foreground">Les commentaires laissés sur les étapes apparaîtront ici.</p></div>}
  </div>;
}