import { useParams, Navigate, Link } from "react-router-dom";
import { useTrips } from "../../contexts/TripContext";
import { useState, useEffect } from "react";
import { TripDocuments } from "../../components/dashboard/trips/TripDocuments";
import { TripLoading } from "../../components/dashboard/trips/TripLoading";
import { TripError } from "../../components/dashboard/trips/TripError";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import type { Trip } from "@/types";

interface TripDocumentsPageProps {
  isPlanner: boolean;
}

export default function TripDocumentsPage({ isPlanner }: TripDocumentsPageProps) {
  const { tripId } = useParams<{ tripId: string }>();
  const { getTrip, isLoading, error } = useTrips();
  const [trip, setTrip] = useState<Trip | null>(null);
  const [localError, setLocalError] = useState<string | null>(null);

  useEffect(() => {
    if (tripId && !isLoading) {
      const foundTrip = getTrip(tripId);

      if (foundTrip) {
        setTrip(foundTrip);
        setLocalError(null);
      } else {
        setLocalError("Impossible de charger les détails du voyage");
      }
    }
  }, [tripId, isPlanner, isLoading, getTrip]);

  const handleRetry = () => {
    setLocalError(null);
  };

  if (!tripId) {
    return <Navigate to={isPlanner ? "/dashboard" : "/voyageur/dashboard"} />;
  }

  // État de chargement
  if (isLoading) {
    return <TripLoading />;
  }

  // État d'erreur
  if ((localError || error) && !trip) {
    return <TripError error={localError || error} onRetry={handleRetry} isPlanner={isPlanner} />;
  }

  // Si aucun voyage n'a été trouvé
  if (!trip) {
    return (
      <div className="container mx-auto p-4">
        <h1 className="text-2xl font-bold mb-4 text-left">Voyage non trouvé</h1>
        <p className="text-left">Le voyage que vous cherchez n'existe pas ou vous n'y avez pas accès.</p>
        <Button asChild className="mt-4">
          <Link to={isPlanner ? "/dashboard" : "/voyageur/dashboard"}>
            Retour au tableau de bord
          </Link>
        </Button>
      </div>
    );
  }

  return (
    <div className="page-shell">
      <div className="mb-6">
        <Button variant="ghost" asChild>
          <Link to={`${isPlanner ? "/dashboard" : "/voyageur"}/trips/${tripId}`}>
            <ArrowLeft className="mr-2 h-4 w-4" /> Retour au voyage
          </Link>
        </Button>
      </div>

      <div className="mb-6 text-left">
        <p className="mb-2 text-sm font-bold uppercase tracking-[.16em] text-primary">Bibliothèque</p>
        <h1 className="page-title">Documents — {trip.title}</h1>
        <p className="mt-2 text-muted-foreground">
          {isPlanner
            ? "Ajoutez et retrouvez les documents utiles pour ce voyage."
            : "Retrouvez ici les documents partagés pour votre voyage."}
        </p>
      </div>

      <div className="surface-card p-4 text-left sm:p-6">
        <TripDocuments
          tripId={trip.id}
          documents={trip.documents || []}
          isPlanner={isPlanner}
        />
      </div>
    </div>
  );
}