'use client';

import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
import Minimap from '../components/Minimap';

interface MinimapContextType {
  showMinimap: boolean;
  setShowMinimap: (show: boolean) => void;
  updateMinimapPosition: (lat: number, lng: number, yaw?: number, heading?: number) => void;
  setEndPoint: (lat: number, lng: number) => void;
}

const MinimapContext = createContext<MinimapContextType | null>(null);

export const MinimapProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [showMinimap, setShowMinimap] = useState(false);
  const [position, setPosition] = useState({ lat: 0, lng: 0, yaw: 0, heading: 0 });
  const [endPoint, setEndPointState] = useState<{ lat: number; lng: number } | null>(null);

  const updateMinimapPosition = useCallback((lat: number, lng: number, yaw: number = 0, heading: number = 0) => {
    setPosition({ lat, lng, yaw, heading });
  }, []);

  const setEndPoint = useCallback((lat: number, lng: number) => {
    setEndPointState({ lat, lng });
  }, []);

  const contextValue = useMemo(() => ({
    showMinimap,
    setShowMinimap,
    updateMinimapPosition,
    setEndPoint
  }), [showMinimap, updateMinimapPosition, setEndPoint]);

  return (
    <MinimapContext.Provider value={contextValue}>
      {children}
      {showMinimap && (
        <Minimap
          key="minimap-instance"
          lat={position.lat}
          lng={position.lng}
          yaw={position.yaw}
          heading={position.heading}
          endLat={endPoint?.lat}
          endLng={endPoint?.lng}
        />
      )}
    </MinimapContext.Provider>
  );
};

export const useMinimap = () => {
  const context = useContext(MinimapContext);
  if (!context) {
    throw new Error('useMinimap must be used within a MinimapProvider');
  }
  return context;
};