import React, { createContext, useState } from 'react';

interface TripUIContextType {
  hoveredPlaceId: string | null;
  selectedPlaceId: string | null;
  activeTab: 'timeline' | 'map';
  isAddPlaceOpen: boolean;
  highlightedPlaceId: string | null;
  newlyAddedPlaceId: string | null;
  setHoveredPlaceId: (id: string | null) => void;
  setSelectedPlaceId: (id: string | null) => void;
  setActiveTab: (tab: 'timeline' | 'map') => void;
  setIsAddPlaceOpen: (open: boolean) => void;
  setHighlightedPlaceId: (id: string | null) => void;
  setNewlyAddedPlaceId: (id: string | null) => void;
}

export const TripUIContext = createContext<TripUIContextType | undefined>(undefined);

export const TripUIProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [hoveredPlaceId, setHoveredPlaceId] = useState<string | null>(null);
  const [selectedPlaceId, setSelectedPlaceId] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'timeline' | 'map'>('timeline');
  const [isAddPlaceOpen, setIsAddPlaceOpen] = useState(false);
  const [highlightedPlaceId, setHighlightedPlaceId] = useState<string | null>(null);
  const [newlyAddedPlaceId, setNewlyAddedPlaceId] = useState<string | null>(null);

  return (
    <TripUIContext.Provider value={{
      hoveredPlaceId,
      selectedPlaceId,
      activeTab,
      isAddPlaceOpen,
      highlightedPlaceId,
      newlyAddedPlaceId,
      setHoveredPlaceId,
      setSelectedPlaceId,
      setActiveTab,
      setIsAddPlaceOpen,
      setHighlightedPlaceId,
      setNewlyAddedPlaceId
    }}>
      {children}
    </TripUIContext.Provider>
  );
};
