import { useEffect } from "react";
import { Navigate, Outlet, useParams, useSearchParams } from "react-router-dom";
import { useTrips } from "@/contexts/TripContext";
import { TripLoading } from "@/components/dashboard/trips/TripLoading";
import { TripNotFound } from "@/components/dashboard/trips/TripNotFound";
import { TripWorkspaceHeader } from "./TripWorkspaceHeader";
import { TripWorkspaceNav } from "./TripWorkspaceNav";
import { mergeWorkspaceSearch, readTripWorkspaceState, rememberTripWorkspaceState } from "@/services/tripWorkspaceState";

export function TripWorkspaceLayout() {
  const { tripId } = useParams<{ tripId: string }>();
  const { getTrip, isLoading } = useTrips();
  const [search, setSearch] = useSearchParams();
  const trip = tripId ? getTrip(tripId) : null;

  useEffect(() => {
    if (!tripId) return;
    const merged = mergeWorkspaceSearch(search, readTripWorkspaceState(sessionStorage, tripId));
    if (merged.toString() !== search.toString()) setSearch(merged, { replace: true });
    else rememberTripWorkspaceState(sessionStorage, tripId, search);
  }, [tripId, search, setSearch]);

  if (!tripId) return <Navigate to="/dashboard/trips" replace />;
  if (isLoading) return <TripLoading />;
  if (!trip) return <TripNotFound isPlanner />;

  return <div className="min-h-screen bg-background"><div className="sticky top-0 z-30"><TripWorkspaceHeader trip={trip} /><TripWorkspaceNav tripId={trip.id} /></div><Outlet context={{ trip }} /></div>;
}