import React, {
  useEffect,
  useRef,
  useState,
  useCallback,
  useMemo,
} from "react";
import { Loader } from "@googlemaps/js-api-loader";
import { createRoot } from "react-dom/client";
import { Item } from "../types";
import ItemMarkerInfo from "./ItemMarkerInfo";

// Debounce utility function
function debounce<T extends (...args: any[]) => any>(
  func: T,
  wait: number
): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout;
  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

interface SearchResultsMapProps {
  items: Item[];
  searchLocation?: string;
  className?: string;
  style?: React.CSSProperties;
  onItemSelect?: (item: Item) => void;
}

const SearchResultsMap: React.FC<SearchResultsMapProps> = ({
  items,
  searchLocation,
  className,
  style,
  onItemSelect,
}) => {
  const mapRef = useRef<HTMLDivElement>(null);
  const mapInstanceRef = useRef<google.maps.Map | null>(null);
  const markersRef = useRef<google.maps.marker.AdvancedMarkerElement[]>([]);
  const infoWindowRef = useRef<google.maps.InfoWindow | null>(null);
  const mapInitializedRef = useRef<boolean>(false);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const apiKey = process.env.REACT_APP_GOOGLE_MAPS_PUBLIC_API_KEY;
  const mapId = process.env.REACT_APP_GOOGLE_MAPS_MAP_ID;

  // Clean up markers
  const clearMarkers = useCallback(() => {
    markersRef.current.forEach((marker) => {
      marker.map = null;
    });
    markersRef.current = [];
    if (infoWindowRef.current) {
      infoWindowRef.current.close();
    }
  }, []);

  // Create marker for an item
  const createItemMarker = useCallback(
    async (item: Item, map: google.maps.Map) => {
      if (!item.latitude || !item.longitude) return null;

      const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        "marker"
      )) as google.maps.MarkerLibrary;

      // Create marker element
      const isMobile = window.innerWidth < 768;
      const markerSize = isMobile ? 48 : 40;

      const markerElement = document.createElement("div");
      markerElement.className =
        "d-flex align-items-center justify-content-center";
      markerElement.style.cssText = `
      width: ${markerSize}px;
      height: ${markerSize}px;
      background-color: #0d6efd;
      border: 3px solid white;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      transition: transform 0.2s ease;
      touch-action: manipulation;
    `;

      // Add icon
      const icon = document.createElement("i");
      icon.className = "bi bi-geo-fill text-white";
      icon.style.fontSize = "16px";
      markerElement.appendChild(icon);

      // Hover effects
      markerElement.addEventListener("mouseenter", () => {
        markerElement.style.transform = "scale(1.1)";
      });
      markerElement.addEventListener("mouseleave", () => {
        markerElement.style.transform = "scale(1)";
      });

      const marker = new AdvancedMarkerElement({
        position: { lat: item.latitude, lng: item.longitude },
        map: map,
        content: markerElement,
        title: item.name,
      });

      // Add click listener
      marker.addListener("click", () => {
        if (infoWindowRef.current) {
          infoWindowRef.current.close();
        }

        const infoWindow = new google.maps.InfoWindow({
          headerDisabled: true,
          maxWidth:
            window.innerWidth < 768
              ? Math.min(300, window.innerWidth - 40)
              : 300,
        });

        // Create React container for info window content
        const infoContainer = document.createElement("div");
        const root = createRoot(infoContainer);

        root.render(
          <ItemMarkerInfo
            item={item}
            onViewDetails={() => {
              infoWindow.close();
              if (onItemSelect) {
                onItemSelect(item);
              } else {
                window.location.href = `/items/${item.id}`;
              }
            }}
          />
        );

        infoWindow.setContent(infoContainer);
        infoWindow.open(map, marker);
        infoWindowRef.current = infoWindow;
      });

      return marker;
    },
    [onItemSelect]
  );

  // Add markers for all items
  const addMarkersToMap = useCallback(
    async (map: google.maps.Map, items: Item[]) => {
      clearMarkers();

      const validItems = items.filter(
        (item) => item.latitude && item.longitude
      );

      for (const item of validItems) {
        const marker = await createItemMarker(item, map);
        if (marker) {
          markersRef.current.push(marker);
        }
      }
    },
    [createItemMarker, clearMarkers]
  );

  // Calculate map bounds to fit all markers with appropriate zoom levels
  const fitMapToMarkers = useCallback((map: google.maps.Map, items: Item[]) => {
    const validItems = items.filter((item) => item.latitude && item.longitude);

    if (validItems.length === 0) return;

    const bounds = new google.maps.LatLngBounds();

    validItems.forEach((item) => {
      if (item.latitude && item.longitude) {
        bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
      }
    });

    if (validItems.length === 1) {
      // Single marker - center and set neighborhood-level zoom (not street-level)
      map.setCenter(bounds.getCenter());
      map.setZoom(10); // Changed from 12 to 10 for better context
    } else {
      // Multiple markers - calculate distance to determine zoom strategy
      const northeast = bounds.getNorthEast();
      const southwest = bounds.getSouthWest();

      // Calculate approximate distance between bounds corners in miles
      const distance =
        google.maps.geometry.spherical.computeDistanceBetween(
          southwest,
          northeast
        ) / 1609.34; // Convert meters to miles

      if (distance < 0.5) {
        // Very close items - show broader neighborhood context
        const center = bounds.getCenter();
        map.setCenter(center);
        map.setZoom(11); // Neighborhood level for very close items
      } else if (distance < 5) {
        // Moderate spread - use fitBounds with generous padding and min zoom
        map.fitBounds(bounds, 120); // Increased padding from 50 to 120

        // Ensure we don't zoom too close
        const currentZoom = map.getZoom();
        if (currentZoom && currentZoom > 12) {
          map.setZoom(12);
        }
      } else {
        // Wide spread - use fitBounds with standard padding
        map.fitBounds(bounds, 80);

        // Ensure minimum zoom for very spread out items
        const currentZoom = map.getZoom();
        if (currentZoom && currentZoom < 6) {
          map.setZoom(6);
        }
      }
    }
  }, []);

  // Check if any items have coordinates before initializing map
  const hasMappableItems = items.some(
    (item) => item.latitude && item.longitude
  );

  // Debounced function to update map markers (prevents excessive API calls during rapid updates)
  const debouncedUpdateMap = useMemo(
    () =>
      debounce(async (map: google.maps.Map, items: Item[]) => {
        try {
          setIsLoading(true);
          await addMarkersToMap(map, items);
          fitMapToMarkers(map, items);
        } catch (err) {
          console.error("Error updating map:", err);
        } finally {
          setIsLoading(false);
        }
      }, 300), // 300ms debounce delay
    [addMarkersToMap, fitMapToMarkers]
  );

  // Initialize map
  useEffect(() => {
    if (!apiKey || !mapRef.current || !hasMappableItems) return;

    // If map is already initialized, just update markers using debounced function
    if (mapInitializedRef.current && mapInstanceRef.current) {
      debouncedUpdateMap(mapInstanceRef.current, items);
      return;
    }

    let mounted = true;
    const initializeMap = async () => {
      try {
        setIsLoading(true);
        setError(null);

        const loader = new Loader({
          apiKey,
          version: "weekly",
        });

        await loader.importLibrary("maps");
        await loader.importLibrary("marker");
        await loader.importLibrary("geometry");

        if (!mounted || !mapRef.current) return;

        // Default map center (will be updated based on search results)
        const defaultCenter = { lat: 39.8283, lng: -98.5795 }; // Geographic center of US

        const mapConfig: google.maps.MapOptions = {
          mapId: mapId,
          center: defaultCenter,
          zoom: 4,
          maxZoom: 15, // Prevent users from zooming too close
          zoomControl: true,
          mapTypeControl: false,
          scaleControl: false,
          streetViewControl: false,
          rotateControl: false,
          fullscreenControl: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

        const map = new google.maps.Map(mapRef.current, mapConfig);

        mapInstanceRef.current = map;
        mapInitializedRef.current = true;

        // Add markers if items exist
        if (items.length > 0) {
          await addMarkersToMap(map, items);
          fitMapToMarkers(map, items);
        }
      } catch (err) {
        console.error("Failed to load Google Maps:", err);
        if (mounted) {
          setError("Failed to load map. Please try again later.");
        }
      } finally {
        if (mounted) {
          setIsLoading(false);
        }
      }
    };

    initializeMap();

    return () => {
      mounted = false;
      // Don't clear markers on cleanup - preserve for next use
    };
  }, [
    apiKey,
    mapId,
    hasMappableItems,
    items,
    addMarkersToMap,
    fitMapToMarkers,
    clearMarkers,
    debouncedUpdateMap,
  ]);

  // This useEffect is now handled by the main initialization effect above

  const defaultStyle = {
    height: "600px",
    width: "100%",
    borderRadius: "8px",
    backgroundColor: "#f8f9fa",
  };

  // Show message when no items have location data
  if (!hasMappableItems) {
    return (
      <div className={className} style={{ ...defaultStyle, ...style }}>
        <div className="d-flex align-items-center justify-content-center h-100">
          <div className="text-center">
            <i
              className="bi bi-geo-alt text-muted mb-3"
              style={{ fontSize: "3rem" }}
            ></i>
            <h5 className="text-muted">No Location Data</h5>
            <p className="text-muted small mb-0">
              None of the search results have location information available for
              mapping.
            </p>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className={className} style={{ ...defaultStyle, ...style }}>
        <div className="d-flex align-items-center justify-content-center h-100">
          <div className="text-center">
            <i
              className="bi bi-exclamation-triangle text-warning mb-2"
              style={{ fontSize: "3rem" }}
            ></i>
            <p className="text-muted">{error}</p>
            <button
              className="btn btn-outline-primary btn-sm"
              onClick={() => window.location.reload()}
            >
              Retry
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      className={className}
      style={{ ...defaultStyle, ...style, position: "relative" }}
    >
      {isLoading && (
        <div
          className="position-absolute d-flex align-items-center justify-content-center w-100 h-100"
          style={{
            backgroundColor: "rgba(248, 249, 250, 0.8)",
            borderRadius: "8px",
            zIndex: 1000,
          }}
        >
          <div className="text-center">
            <div className="spinner-border text-primary mb-2" role="status">
              <span className="visually-hidden">Loading map...</span>
            </div>
            <p className="text-muted small">Loading map...</p>
          </div>
        </div>
      )}

      <div
        ref={mapRef}
        style={{ width: "100%", height: "100%", borderRadius: "8px" }}
      />

      {!isLoading && items.length > 0 && (
        <div
          className="position-absolute bottom-0 start-0 bg-white px-3 py-2 rounded-top-2 shadow-sm"
          style={{ margin: "0 0 10px 10px", zIndex: 500 }}
        >
          <small className="text-muted">
            <i className="bi bi-geo-alt-fill text-primary me-1"></i>
            {
              items.filter((item) => item.latitude && item.longitude).length
            }{" "}
            items shown
          </small>
        </div>
      )}
    </div>
  );
};

export default SearchResultsMap;