import React, { useState } from "react";
import {
  ComposableMap,
  Geographies,
  Geography,
  Marker
} from "react-simple-maps";
import { geoCentroid } from "d3-geo";
import indiaMap from "../assets/india.topo.json"; // Make sure this file path is correct

const IndiaMap = () => {
  const [hoveredState, setHoveredState] = useState(null);

  

  const projectStates = [
    "Jammu and Kashmir",
    "Punjab",
    "Uttarakhand",
    "Uttar Pradesh",
    "Bihar",
    "Jharkhand",
    "West Bengal",
    "Odisha",
    "Chhattisgarh",
    "Madhya Pradesh",
    "Gujarat",
    "Maharashtra",
    "Goa",
    "Karnataka",
    "Telangana",
    "Andhra Pradesh",
    "Tamil Nadu",
    "Kerala"
  ];

  const markerCoordinates = {
    "Jammu and Kashmir": [75.34, 33.75],
    "Punjab": [75.5, 31.3],
    "Uttarakhand": [79.0, 30.1],
    "Uttar Pradesh": [80.5, 26.5],
    "Bihar": [85.3, 25.6],
    "Jharkhand": [85.3, 23.6],
    "West Bengal": [87.9, 23.2],
    "Odisha": [85.1, 20.3],
    "Chhattisgarh": [81.5, 21.3],
    "Madhya Pradesh": [78.6, 23.4],
    "Gujarat": [71.2, 22.3],
    "Maharashtra": [75.7, 19.5],
    "Goa": [74.0, 15.3],
    "Karnataka": [76.5, 14.5],
    "Telangana": [78.4, 17.5],
    "Andhra Pradesh": [80.6, 15.9],
    "Tamil Nadu": [78.6, 10.5],
    "Kerala": [76.2, 10.1],
  };

  return (
    <div className="text-center mt-10">
      

      <div className="map-wrapper">
        <ComposableMap
  projection="geoMercator"
  width={1850}       // increased width
  height={1100}      // increased height
  projectionConfig={{ scale: 1850, center: [82.8, 22.5] }} // increased scale
>

          <Geographies geography={indiaMap}>
            {({ geographies }) =>
              geographies.map((geo) => {
                const stateName = geo.properties.st_nm;
                const isHighlighted = projectStates.includes(stateName);
                const centroid = geoCentroid(geo);

                return (
                  <React.Fragment key={geo.rsmKey}>
                    <Geography
                      geography={geo}
                      onMouseEnter={() => setHoveredState({ name: stateName, coords: centroid })}
                      onMouseLeave={() => setHoveredState(null)}
                      style={{
                        default: {
                          fill: isHighlighted ? "#E0E0E0" : "#E0E0E0",
                          stroke: "#607D8B",
                          strokeWidth: 1,
                          outline: "none",
                        },
                        hover: {
                          fill: "#1e40af",
                          cursor: "pointer",
                          outline: "none",
                        },
                        pressed: {
                          fill: "#1e3a8a",
                          outline: "none",
                        },
                      }}
                    />
                  </React.Fragment>
                );
              })
            }
          </Geographies>

          {/* Project markers */}
          {projectStates.map((state) => {
            const coords = markerCoordinates[state];
            if (!coords) return null;

            return (
              <Marker key={state} coordinates={coords}>
                <circle r={12} fill="#0ba512ff" stroke="#fff" strokeWidth={2} />
                <text
                  textAnchor="middle"
                  y={-12}
                  style={{
                    fontFamily: "sans-serif",
                    fontSize: 22,
                    fill: "#000",
                    fontWeight: "bold",
                    pointerEvents: "none",
                  }}
                >
                  {state}
                </text>
              </Marker>
            );
          })}

          {/* Tooltip/label for hovered state */}
          {hoveredState?.name && hoveredState?.coords && (
            <Marker coordinates={hoveredState.coords}>
              <text
                textAnchor="middle"
                y={-15}
                style={{
                  fontFamily: "sans-serif",
                  fontSize: 22,
                  fontWeight: "bold",
                  fill: "#111827",
                  pointerEvents: "none",
                  paintOrder: "stroke",
                  stroke: "#fff",
                  strokeWidth: 3,
                  strokeLinejoin: "round",
                }}
              >
                {hoveredState.name}
              </text>
            </Marker>
          )}
        </ComposableMap>
      </div>
    </div>
  );
};

export default IndiaMap;
