'use client'

import { useMemo } from 'react'
import { MapContainer, TileLayer, CircleMarker, Tooltip } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import { COUNTRIES } from '@/lib/countries'


type CountryData = { countryCode: string; count: number }

type LeafletMapProps = {
  data: CountryData[]
  compact?: boolean
}

export default function LeafletMap({ data, compact }: LeafletMapProps) {
  const markers = useMemo(() => {
    const maxCount = Math.max(...data.map((d) => d.count), 1)
    return data
      .filter((d) => d.countryCode !== 'UNKNOWN' && COUNTRIES[d.countryCode])
      .map((d) => {
        const country = COUNTRIES[d.countryCode]
        const ratio = d.count / maxCount
        const radius = 5 + ratio * 15
        return {
          code: d.countryCode,
          name: country.name,
          position: [country.lat, country.lng] as [number, number],
          count: d.count,
          radius,
          ratio,
        }
      })
  }, [data])

  return (
    <MapContainer
      center={[20, 0]}
      zoom={compact ? 1 : 2}
      scrollWheelZoom
      zoomControl
      dragging
      doubleClickZoom
      style={{
        height: compact ? 400 : 500,
        width: '100%',
        borderRadius: '0.5rem',
        background: '#f0f0f0',
      }}
      attributionControl={false}
    >
      <TileLayer
        url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
      />
      {markers.map((marker) => (
        <CircleMarker
          key={marker.code}
          center={marker.position}
          radius={marker.radius}
          pathOptions={{
            color: '#de0f1e',
            fillColor: '#de0f1e',
            fillOpacity: 0.35 + marker.ratio * 0.45,
            weight: 1.5,
          }}
        >
          <Tooltip direction="top" offset={[0, -marker.radius]}>
            <div className="text-xs font-medium">
              <span className="font-semibold">{marker.name}</span>
              <br />
              {marker.count} project{marker.count !== 1 ? 's' : ''}
            </div>
          </Tooltip>
        </CircleMarker>
      ))}
    </MapContainer>
  )
}