"use client";

import { useEffect, useState } from "react";
import L from "leaflet";
import { MapContainer, TileLayer, Marker, Popup, ZoomControl } from "react-leaflet";

// Import leaflet CSS
import "leaflet/dist/leaflet.css";

// Add declaration for Leaflet's Icon.Default
declare module 'leaflet' {
  namespace Icon {
    interface Default {
      _getIconUrl?: string;
    }
  }
}

interface CountryData {
  name: string;
  count: number;
  position: [number, number]; // latitude, longitude
}

interface MapComponentProps {
  countries: CountryData[];
  onCountrySelect: (country: string) => void;
  selectedCountry: string | null;
}

// Fix Leaflet default icon path issues
function fixLeafletIcons() {
  // Delete to prevent duplicate icon definitions
  delete L.Icon.Default.prototype._getIconUrl;
  
  // Set paths to the images
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
  });
}

export function MapComponent({ countries, onCountrySelect, selectedCountry }: MapComponentProps) {
  const [isClient, setIsClient] = useState(false);
  
  useEffect(() => {
    // Fix Leaflet icons on client side
    fixLeafletIcons();
    setIsClient(true);
  }, []);
  
  // Get custom icon based on count
  const getMarkerIcon = (count: number, isSelected: boolean) => {
    const size = Math.min(Math.max(20, count * 5), 40);
    
    return L.divIcon({
      html: `<div style="
        background-color: ${isSelected ? '#3b82f6' : '#ef4444'};
        color: white;
        border-radius: 50%;
        width: ${size}px;
        height: ${size}px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: ${size > 30 ? 14 : 12}px;
        box-shadow: 0 0 0 2px white;
      ">${count}</div>`,
      className: '',
      iconSize: [size, size],
      iconAnchor: [size/2, size/2]
    });
  };
  
  if (!isClient) {
    return (
      <div className="w-full h-full bg-gray-100 flex items-center justify-center">
        <p className="text-gray-500">Loading map...</p>
      </div>
    );
  }
  
  return (
    <MapContainer
      center={[20, 0]} // Center of the world
      zoom={2}
      style={{ height: '100%', width: '100%' }}
      zoomControl={false}
      key="world-map" // Static key to help with React identity
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <ZoomControl position="bottomright" />
      
      {countries.map((country) => (
        <Marker
          key={country.name}
          position={country.position}
          icon={getMarkerIcon(country.count, country.name === selectedCountry)}
          eventHandlers={{
            click: () => onCountrySelect(country.name)
          }}
        >
          <Popup>
            <div className="text-center">
              <strong>{country.name}</strong>
              <div>{country.count} news articles</div>
            </div>
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}