import { useState } from "react";
import { Link } from "react-router-dom";
import { AlertCircle, CalendarDays, CheckCircle2, ChevronRight, FileText, Plus, RefreshCw, Users } from "lucide-react";
import { differenceInCalendarDays, format, parseISO } from "date-fns";
import { fr } from "date-fns/locale";
import { useTrips } from "@/contexts/TripContext";
import { useAuth } from "@/contexts/AuthContext";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { TripCreationFlow } from "@/components/trips/TripCreationFlow";
import { TripCard } from "@/components/dashboard/TripCard";
import { OnboardingGuide } from "@/components/dashboard/OnboardingGuide";
import { ActivityList } from "@/components/communication/ActivityList";
import { deriveTripActivity } from "@/services/communication";
import { getTripDays } from "@/services/itineraryGuards";
import { getUserFacingErrorMessage } from "@/utils/errorHandlers";
import type { Trip } from "@/types";

const dateKey = (date = new Date()) => format(date, "yyyy-MM-dd");
function prioritizeTrips(trips: Trip[]) { const today = dateKey(); return [...trips].sort((a, b) => { const rank = (trip: Trip) => trip.startDate <= today && trip.endDate >= today ? 0 : trip.startDate > today ? 1 : 2; return rank(a) - rank(b) || (rank(a) === 2 ? b.endDate.localeCompare(a.endDate) : a.startDate.localeCompare(b.startDate)); }); }
const itineraryUrl = (trip: Trip) => `/dashboard/trips/${trip.id}/itinerary`;

function Metric({ icon: Icon, value, label }: { icon: typeof Users; value: string | number; label: string }) { return <div className="flex min-h-24 items-center gap-3 bg-background/90 p-4"><Icon className="h-5 w-5 text-primary" aria-hidden="true" /><div><p className="text-2xl font-semibold">{value}</p><p className="text-xs text-muted-foreground sm:text-sm">{label}</p></div></div>; }
function ActionRow({ title, detail, href, label }: { title: string; detail: string; href: string; label: string }) { return <li className="flex flex-col justify-between gap-3 py-4 sm:flex-row sm:items-center"><div><p className="font-semibold">{title}</p><p className="mt-1 text-sm text-muted-foreground">{detail}</p></div><Button variant="ghost" size="sm" className="w-fit text-primary" asChild><Link to={href}>{label}<ChevronRight className="ml-1 h-4 w-4" /></Link></Button></li>; }

export default function PlannerDashboard() {
  const { getUserTrips, isLoading, error, refetchTrips } = useTrips(); const { currentUser } = useAuth(); const [creating, setCreating] = useState(false);
  const userTrips = getUserTrips(); const trips = prioritizeTrips(userTrips); const priority = trips[0]; const otherUpcoming = priority ? trips.filter((trip) => trip.id !== priority.id && trip.endDate >= dateKey()) : [];
  if (isLoading) return <div className="grid min-h-[50vh] place-items-center"><span className="animate-pulse">Chargement…</span></div>;
  if (error) return <div className="page-shell"><div className="surface-card mx-auto max-w-xl p-8 text-center"><AlertCircle className="mx-auto text-destructive" /><h1 className="mt-3 text-xl font-semibold">Impossible de charger vos voyages</h1><p className="my-3 text-muted-foreground">{getUserFacingErrorMessage(error, "Vérifiez votre connexion puis réessayez.")}</p><Button onClick={refetchTrips}><RefreshCw className="mr-2 h-4 w-4" />Réessayer</Button></div></div>;
  const days = priority ? getTripDays(priority.startDate, priority.endDate) : []; const filled = priority ? new Set(priority.steps.map((step) => step.day)).size : 0; const published = priority?.steps.filter((step) => step.isPublished) || []; const approved = published.flatMap((step) => step.validations || []).filter((validation) => validation.status === "approved").length; const expected = published.length * (priority?.members?.length || 0); const emptyDays = Math.max(0, days.length - filled); const rejected = priority?.steps.filter((step) => (step.validations || []).some((validation) => validation.status === "rejected")) || []; const pendingInvites = priority?.invitations?.filter((invitation) => invitation.status === "pending") || []; const comments = priority?.steps.flatMap((step) => step.comments.map((comment) => ({ step, comment }))).sort((a, b) => b.comment.createdAt.localeCompare(a.comment.createdAt)) || []; const activity = deriveTripActivity(trips).filter((event) => event.kind !== "action" && event.kind !== "comment"); const cover = priority?.bannerUrl || priority?.coverUrl;
  return <div className="page-shell"><div className="mx-auto max-w-7xl space-y-10"><header className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end"><div><h1 className="page-title">Bonjour {currentUser?.name?.split(" ")[0]}</h1><p className="mt-2 text-muted-foreground">Voici ce qui demande votre attention aujourd’hui.</p></div><Button size="lg" onClick={() => setCreating(true)}><Plus className="mr-2 h-4 w-4" />Créer un voyage</Button></header>
    <OnboardingGuide role="planner" hasTrips={userTrips.length > 0} trips={userTrips} onPrimaryAction={() => setCreating(true)} />
    {!priority && <section className="py-8 text-center"><h2 className="text-xl font-semibold">Créez votre premier voyage</h2><p className="mt-2 text-muted-foreground">Commencez par la destination et les dates.</p></section>}
    {priority && <><section className="overflow-hidden rounded-[2rem] bg-secondary text-secondary-foreground"><div className="grid md:grid-cols-[.8fr_1.2fr]">{cover && <img src={cover} alt={`Vue de ${priority.destination}`} className="aspect-[16/9] h-full max-h-72 w-full object-cover" />}<div className="p-6 sm:p-8"><p className="text-xs font-bold uppercase tracking-[.2em] text-primary">Voyage prioritaire</p><h2 className="mt-2 font-serif text-3xl">{priority.title}</h2><p className="mt-1 text-white/70">{priority.destination}</p><p className="mt-4 text-sm text-white/70">{format(parseISO(priority.startDate), "d", { locale: fr })} — {format(parseISO(priority.endDate), "d MMMM yyyy", { locale: fr })}{priority.startDate > dateKey() ? ` · départ dans ${differenceInCalendarDays(parseISO(priority.startDate), new Date())} jours` : ""}</p><Button className="mt-5" asChild><Link to={itineraryUrl(priority)}>Continuer l’itinéraire<ChevronRight className="ml-2 h-4 w-4" /></Link></Button></div></div></section>
      <section><h2 className="section-title">Progression</h2><div className="mt-4 grid gap-px overflow-hidden rounded-2xl bg-border sm:grid-cols-2 lg:grid-cols-5"><Metric icon={CalendarDays} value={`${filled}/${days.length}`} label="jours renseignés" /><Metric icon={CalendarDays} value={published.length} label="étapes publiées" /><Metric icon={CheckCircle2} value={`${approved}/${expected}`} label="validations" /><Metric icon={Users} value={priority.members?.length || 0} label="voyageurs actifs" /><Metric icon={FileText} value={priority.documents.length} label="documents" /></div></section>
      <section><h2 className="section-title">À traiter</h2><ul className="mt-4 divide-y border-y">{rejected.map((step) => <ActionRow key={`rejected-${step.id}`} title="Modification demandée" detail={step.activity} href={`/dashboard/trips/${priority.id}/messages?conversation=${step.id}`} label="Examiner" />)}{comments.slice(0, 3).map(({ step, comment }) => <ActionRow key={`comment-${comment.id}`} title="Nouveau message" detail={`${comment.userName} a commenté ${step.activity}.`} href={`/dashboard/trips/${priority.id}/messages?conversation=${step.id}`} label="Lire" />)}{emptyDays > 0 && <ActionRow title="Journées à organiser" detail={`${emptyDays} journée${emptyDays > 1 ? "s n’ont" : " n’a"} aucune étape.`} href={itineraryUrl(priority)} label="Continuer l’itinéraire" />}{pendingInvites.length > 0 && <ActionRow title="Invitation en attente" detail={`${pendingInvites.length} invitation${pendingInvites.length > 1 ? "s" : ""} en attente.`} href={`/dashboard/trips/${priority.id}/travelers`} label="Voir les voyageurs" />}{!rejected.length && !comments.length && !emptyDays && !pendingInvites.length && <li className="py-5 text-sm text-muted-foreground">Rien ne demande votre attention pour le moment.</li>}</ul></section></>}
    <section><div className="flex items-end justify-between gap-3"><h2 className="section-title">Activité récente</h2><Link to="/dashboard/activity" className="text-sm font-semibold text-primary">Toute l’activité</Link></div><div className="mt-3 border-y"><ActivityList events={activity} limit={5} /></div></section>
    <section><div className="flex items-end justify-between"><h2 className="section-title">Voyages à venir</h2><Link to="/dashboard/trips" className="text-sm font-semibold text-primary">Tout afficher</Link></div>{otherUpcoming.length ? <div className="mt-5 grid gap-5 md:grid-cols-2 xl:grid-cols-3">{otherUpcoming.slice(0, 3).map((trip) => <TripCard key={trip.id} trip={trip} isPlanner />)}</div> : <p className="mt-4 text-sm text-muted-foreground">Aucun autre voyage à venir.</p>}</section>
    <Dialog open={creating} onOpenChange={setCreating}><DialogContent className="max-h-[92vh] overflow-y-auto sm:max-w-3xl"><DialogHeader><DialogTitle>Créer un nouveau voyage</DialogTitle></DialogHeader><TripCreationFlow onCancel={() => setCreating(false)} /></DialogContent></Dialog>
  </div></div>;
}