import { useState, useCallback } from 'react';
import { Organization, HistoricalLandmark } from '@/types';

export const useMapInteraction = (
  setMapCenter: (coords: [number, number]) => void,
  setZoom: (zoom: number) => void
) => {
  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
  const [hoveredOrgId, setHoveredOrgId] = useState<string | null>(null);
  const [selectedLandmark, setSelectedLandmark] = useState<HistoricalLandmark | null>(null);
  const [hoveredLandmarkId, setHoveredLandmarkId] = useState<string | null>(null);

  const handleSelectOrg = useCallback((org: Organization | null) => {
    setSelectedOrg(org);
    setSelectedLandmark(null);
    // Note: Location will be set via site coordinates in the map component
    // We'll need to fetch the site for the org to get coordinates
    // For now, just select the org - the map will handle centering
  }, []);

  const handleSelectLandmark = useCallback(
    (landmark: HistoricalLandmark | null) => {
      setSelectedLandmark(landmark);
      setSelectedOrg(null);
      if (landmark && landmark.location) {
        // Leaflet uses [lat, lng] format
        setMapCenter([landmark.location.lat, landmark.location.lng]);
        setZoom(14);
      }
    },
    [setMapCenter, setZoom]
  );

  return {
    selectedOrg,
    hoveredOrgId,
    selectedLandmark,
    hoveredLandmarkId,
    handleSelectOrg,
    setHoveredOrgId,
    handleSelectLandmark,
    setHoveredLandmarkId,
  };
};