import { useParams, Navigate, useLocation, Link } from "react-router-dom";
import { useTrips } from "../../contexts/TripContext";
import { useAuth } from "../../contexts/AuthContext";
import { useState, useEffect, useRef } from "react";
import { TripLoading } from "./trips/TripLoading";
import { TripError } from "./trips/TripError";
import { TripNotFound } from "./trips/TripNotFound";
import { TripContent } from "./trips/TripContent";
import type { Trip } from "@/types";
import { Button } from "@/components/ui/button";
import { ShieldAlert } from "lucide-react";

interface TripDetailsProps {
  isPlanner?: boolean;
}

export function TripDetails({ isPlanner = false }: TripDetailsProps) {
  const { tripId } = useParams<{ tripId: string }>();
  const { getTrip, isLoading, error, refetchTrips } = useTrips();
  const { currentUser } = useAuth();
  const location = useLocation();
  const [trip, setTrip] = useState<Trip | null>(null);
  const [retryCount, setRetryCount] = useState(0);
  const [localError, setLocalError] = useState<string | null>(null);
  const initialRenderRef = useRef(true);
  const lastTripIdRef = useRef<string | null>(tripId);

  useEffect(() => {
    setTrip(null);
    setRetryCount(0);
    setLocalError(null);
  }, [tripId]);

  // Persist tripId to localStorage on mount and update
  useEffect(() => {
    if (tripId) {
      localStorage.setItem("lastVisitedTrip", tripId);
      sessionStorage.setItem("lastViewedTripId", tripId);
      lastTripIdRef.current = tripId;

      // Gérer le flag justEditedTrip uniquement si nécessaire
      const handlePageRefreshFlag = () => {
        if (document.visibilityState === 'visible' && !document.hidden) {
          const isBrowserRefresh = performance.navigation?.type === 1 ||
                                 !sessionStorage.getItem('returning_to_tab');

          if (isBrowserRefresh) {
            console.log("Page rafraîchie, préserver l'ID du voyage");
            // Marquer que nous sommes en train de rafraîchir pour éviter les redirections indésirables
            sessionStorage.setItem('page_refreshing', 'true');
            // Ne pas supprimer justEditedTrip dans ce cas
          } else {
            console.log("Navigation normale, gérer le flag normalement");
            // Pas de changement de comportement pour la navigation normale
          }
        }
      };

      // Exécuter une seule fois au chargement
      if (initialRenderRef.current) {
        handlePageRefreshFlag();
        initialRenderRef.current = false;
      }
    }
  }, [tripId]);

  // Capture l'événement visibilitychange pour détecter le retour à l'onglet
  useEffect(() => {
    if (document.visibilityState !== undefined) {
      const handleVisibilityChange = () => {
        if (document.visibilityState === 'visible') {
          console.log("Retour à l'onglet, éviter une redirection");
          sessionStorage.setItem('returning_to_tab', 'true');

          // Nettoyer après un court délai
          setTimeout(() => {
            sessionStorage.removeItem('returning_to_tab');
          }, 1000);
        }
      };

      document.addEventListener("visibilitychange", handleVisibilityChange);

      return () => {
        document.removeEventListener("visibilitychange", handleVisibilityChange);
      };
    }
  }, []);

  // Handler spécifique pour le cas de rafraîchissement
  useEffect(() => {
    const handleBeforeUnload = () => {
      if (tripId) {
        // Stocker l'ID actuel pour le récupérer après le rafraîchissement
        sessionStorage.setItem('refreshing_trip_id', tripId);
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [tripId]);

  // Au chargement après un refresh, récupérer l'ID stocké
  useEffect(() => {
    const refreshingTripId = sessionStorage.getItem('refreshing_trip_id');
    const pageRefreshing = sessionStorage.getItem('page_refreshing');

    if (pageRefreshing === 'true' && refreshingTripId) {
      console.log("Récupération après rafraîchissement pour le voyage:", refreshingTripId);
      // Le nettoyage se fera après le chargement complet
    }

    return () => {
      // Nettoyage lors du démontage
      if (pageRefreshing === 'true') {
        sessionStorage.removeItem('page_refreshing');
        sessionStorage.removeItem('refreshing_trip_id');
      }
    };
  }, []);

  useEffect(() => {
    console.group('📝 TripDetails - Montage ou changement d\'URL');
    console.info('Trip ID recherché:', tripId);
    console.info('Mode:', isPlanner ? 'Travel Planner' : 'Voyageur');
    console.info('Utilisateur actuel:', currentUser?.id, currentUser?.role);
    console.info('URL actuelle:', location.pathname);
    console.info('État de chargement:', isLoading ? 'En cours' : 'Terminé');

    const justEditedTrip = sessionStorage.getItem('justEditedTrip');
    if (justEditedTrip === 'true') {
      console.info('Le voyage vient d\'être modifié, on force un rechargement');
      sessionStorage.removeItem('justEditedTrip'); // Reset le flag
      setRetryCount(0); // Reset pour forcer un rechargement
    }

    // Si on est sur un voyage spécifique et qu'on n'est pas en train de charger
    if (tripId && !isLoading) {
      const foundTrip = getTrip(tripId);
      console.info('Trip trouvé:', foundTrip ? 'oui' : 'non');

      if (foundTrip) {
        setTrip(foundTrip);
        setRetryCount(0); // Réinitialiser le compteur quand on trouve avec succès
        setLocalError(null);

        // S'assurer que justEditedTrip existe pendant la navigation
        if (justEditedTrip === 'true') {
          console.log("Conserver le flag justEditedTrip pour la prochaine navigation");
        } else {
          // Supprimer seulement si ce n'est pas un refresh
          const isNotRefresh = !sessionStorage.getItem('page_refreshing');
          if (isNotRefresh) {
            sessionStorage.removeItem('justEditedTrip');
          }
        }
      } else if (retryCount < 3) {
        // Si on ne trouve pas le voyage et qu'on n'a pas dépassé le nombre max de tentatives
        console.warn(`⚠️ Voyage non trouvé, nouvelle tentative dans 1 seconde (${retryCount + 1}/3)`);
        setLocalError("Impossible de charger les détails du voyage, nouvelle tentative...");
        const timer = setTimeout(() => {
          setRetryCount(prev => prev + 1);
        }, 1000);
        return () => clearTimeout(timer);
      } else {
        // Si on atteint le nombre maximal de tentatives sans succès
        setLocalError("Impossible de charger les détails du voyage après plusieurs tentatives");
      }
    }

    console.groupEnd();
  }, [tripId, isPlanner, currentUser, isLoading, location.pathname, retryCount, getTrip]);

  const handleRetry = () => {
    setRetryCount(0);  // Réinitialiser le compteur pour forcer un nouveau chargement
    setLocalError(null);
    refetchTrips();
  };

  // Si pas de tripId dans l'URL mais qu'on en a un en mémoire après un refresh, l'utiliser
  if (!tripId) {
    const refreshingTripId = sessionStorage.getItem('refreshing_trip_id');
    const pageRefreshing = sessionStorage.getItem('page_refreshing');

    if (pageRefreshing === 'true' && refreshingTripId) {
      console.log("Redirection après refresh vers le voyage:", refreshingTripId);
      sessionStorage.removeItem('page_refreshing');
      sessionStorage.removeItem('refreshing_trip_id');

      return <Navigate to={isPlanner
        ? `/dashboard/trips/${refreshingTripId}`
        : `/voyageur/trips/${refreshingTripId}`}
      />;
    }

    console.warn('⚠️ Pas de tripId dans les paramètres URL, redirection vers le dashboard');
    return <Navigate to={isPlanner ? "/dashboard" : "/voyageur/dashboard"} />;
  }

  // État de chargement
  if (isLoading || (!trip && retryCount < 3)) {
    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é après plusieurs tentatives
  if (!trip) {
    // Vérifier s'il y a un ID dans le localStorage en cas de rafraîchissement
    const lastTripId = localStorage.getItem("lastVisitedTrip");
    if (lastTripId && lastTripId !== tripId) {
      console.log("Voyage non trouvé, mais ID précédent trouvé:", lastTripId);
      return <Navigate to={isPlanner
        ? `/dashboard/trips/${lastTripId}`
        : `/voyageur/trips/${lastTripId}`}
      />;
    }

    return <TripNotFound isPlanner={isPlanner} />;
  }

  // Verify user access to this trip
  const hasAccess = isPlanner
    ? trip.plannerId === currentUser?.id
    : trip.members?.some((member) => member.userId === currentUser?.id) === true;

  if (!hasAccess) {
    console.warn('⛔ Accès refusé', {
      isPlanner,
      tripPlannerId: trip.plannerId,
      tripTravelerId: trip.travelerId,
      currentUserId: currentUser?.id
    });
    return (
      <div className="page-shell">
        <div className="surface-card mx-auto max-w-xl p-8 text-center" role="alert">
          <ShieldAlert className="mx-auto mb-3 h-9 w-9 text-destructive" aria-hidden="true" />
          <h1 className="text-2xl font-bold">Accès refusé</h1>
          <p className="my-3 text-muted-foreground">Ce voyage n’est pas associé à votre compte.</p>
          <Button asChild><Link to={isPlanner ? "/dashboard" : "/voyageur/dashboard"}>Retour à mon espace</Link></Button>
        </div>
      </div>
    );
  }

  return <TripContent
    trip={trip}
    isPlanner={isPlanner}
    error={error}
    localError={localError}
  />;
}