"use client"

import { useEffect, useState } from "react"
import { MapContainer, TileLayer, GeoJSON } from "react-leaflet"
import L from "leaflet"
import "leaflet/dist/leaflet.css"

export default function AboutMap() {
  const [geoData, setGeoData] = useState<any>(null)

  useEffect(() => {
    fetch("/rovibe/ro_admin_county.geojson")
      .then(res => res.json())
      .then(data => setGeoData(data))
      .catch(err => console.error("Error loading geojson", err))
  }, [])

  if (!geoData) {
    return <div style={{ height: "500px", width: "100%", borderRadius: "var(--radius-lg)", background: "var(--surface-hover)", display: "flex", alignItems: "center", justifyContent: "center" }}>Se încarcă harta acoperirii regionale...</div>
  }

  const styleFeature = (feature: any) => {
    const isRovibe = feature.properties?.rovibe === 1 || feature.properties?.rovibe === "1"
    return {
      fillColor: isRovibe ? "#ef4444" : "#e5e7eb", // red or pale gray
      weight: 1, // border thickness
      opacity: 1,
      color: "#9ca3af", // border color
      fillOpacity: isRovibe ? 0.6 : 0.4
    }
  }

  const onEachFeature = (feature: any, layer: L.Layer) => {
    const isRovibe = feature.properties?.rovibe === 1 || feature.properties?.rovibe === "1"
    
    if (isRovibe) {
      layer.bindTooltip(feature.properties?.name || "Județ", {
        sticky: true,
        direction: "auto",
        className: "rovibe-tooltip"
      })
    }
  }

  return (
    <div style={{ height: "500px", width: "100%", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--border-color)", zIndex: 0, position: "relative", boxShadow: "var(--shadow-md)" }}>
      <MapContainer 
        center={[45.9432, 24.9668]} // Centrul României
        zoom={6} 
        style={{ height: "100%", width: "100%", zIndex: 0 }}
        scrollWheelZoom={false}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
        />
        <GeoJSON 
          data={geoData} 
          style={styleFeature} 
          onEachFeature={onEachFeature} 
        />
      </MapContainer>
    </div>
  )
}