// Simplified India states map. Each state = a polygon in ~viewBox 0 0 500 560.
// Coordinates are hand-tuned approximations — not geo-accurate but recognisable.
// Value-driven fill uses OKLCH intensity ramp based on 'values' prop.

const INDIA_STATES_GEOM = {
  JK: "M 200 30 L 260 25 L 285 45 L 300 70 L 285 95 L 240 100 L 210 85 L 190 60 Z",
  HP: "M 240 100 L 285 95 L 305 115 L 290 140 L 260 140 L 240 125 Z",
  PB: "M 210 130 L 260 140 L 265 170 L 235 180 L 205 165 Z",
  UT: "M 285 140 L 320 145 L 335 165 L 315 185 L 285 175 Z",
  HR: "M 235 180 L 265 170 L 285 175 L 285 210 L 250 220 L 230 200 Z",
  DL: "M 260 205 L 275 205 L 275 220 L 260 220 Z",
  RJ: "M 155 200 L 230 200 L 250 220 L 245 275 L 210 300 L 165 285 L 135 245 Z",
  UP: "M 265 205 L 340 210 L 375 235 L 380 275 L 340 295 L 285 285 L 265 260 Z",
  BR: "M 340 260 L 395 265 L 405 295 L 380 315 L 345 305 Z",
  SK: "M 395 250 L 415 255 L 415 275 L 400 275 Z",
  AR: "M 445 245 L 490 240 L 495 275 L 465 285 L 445 275 Z",
  NL: "M 460 285 L 490 285 L 485 310 L 465 310 Z",
  ML: "M 435 300 L 465 305 L 465 325 L 440 325 Z",
  MZ: "M 460 325 L 480 325 L 480 355 L 460 355 Z",
  MN: "M 460 305 L 485 310 L 485 335 L 462 335 Z",
  TR: "M 435 325 L 460 325 L 460 355 L 440 355 Z",
  WB: "M 385 290 L 425 295 L 435 355 L 400 380 L 380 350 L 375 315 Z",
  JH: "M 340 305 L 390 315 L 385 345 L 345 350 L 330 325 Z",
  OD: "M 300 340 L 370 340 L 385 385 L 350 415 L 305 400 L 285 370 Z",
  CG: "M 260 300 L 320 310 L 330 350 L 305 385 L 265 380 L 250 340 Z",
  MP: "M 175 260 L 285 270 L 285 315 L 260 335 L 200 335 L 165 305 Z",
  GJ: "M 100 250 L 165 265 L 175 305 L 155 335 L 110 335 L 80 300 Z",
  MH: "M 130 335 L 245 340 L 275 375 L 260 405 L 200 415 L 145 395 L 115 365 Z",
  TG: "M 235 400 L 285 400 L 295 430 L 275 450 L 240 445 L 225 425 Z",
  AP: "M 235 440 L 295 430 L 320 465 L 300 500 L 265 495 L 240 470 Z",
  KA: "M 155 405 L 235 415 L 240 470 L 220 500 L 190 505 L 160 475 L 145 435 Z",
  GA: "M 148 420 L 165 420 L 168 435 L 150 438 Z",
  KL: "M 165 490 L 200 495 L 205 535 L 180 545 L 165 525 Z",
  TN: "M 205 490 L 250 490 L 258 535 L 235 550 L 200 545 L 190 515 Z",
  AS: "M 400 260 L 445 260 L 460 290 L 445 305 L 410 300 L 390 280 Z",
};

const INDIA_STATE_NAMES = {
  JK: "Jammu & Kashmir", HP: "Himachal Pradesh", PB: "Punjab", UT: "Uttarakhand", HR: "Haryana",
  DL: "Delhi", RJ: "Rajasthan", UP: "Uttar Pradesh", BR: "Bihar", SK: "Sikkim",
  AR: "Arunachal Pradesh", NL: "Nagaland", ML: "Meghalaya", MZ: "Mizoram", MN: "Manipur",
  TR: "Tripura", WB: "West Bengal", JH: "Jharkhand", OD: "Odisha", CG: "Chhattisgarh",
  MP: "Madhya Pradesh", GJ: "Gujarat", MH: "Maharashtra", TG: "Telangana", AP: "Andhra Pradesh",
  KA: "Karnataka", GA: "Goa", KL: "Kerala", TN: "Tamil Nadu", AS: "Assam",
};

const IndiaMap = ({ values = {}, w = 500, h = 560, onHover, onClick, selected, showLabels = true, intensityColor = "primary" }) => {
  const vals = Object.values(values);
  const max = vals.length ? Math.max(...vals) : 1;
  const min = vals.length ? Math.min(...vals) : 0;
  const [hover, setHover] = React.useState(null);
  const stateFill = (code) => {
    if (!(code in values)) return "var(--panel-3)";
    const v = values[code];
    const t = (v - min) / (max - min || 1);
    const h = intensityColor === "accent" ? 65 : 258;
    return `oklch(${0.94 - t * 0.55} ${0.03 + t * 0.13} ${h})`;
  };
  const centroid = (path) => {
    const nums = path.match(/[\d.]+/g).map(Number);
    let sx = 0, sy = 0, n = 0;
    for (let i = 0; i < nums.length; i += 2) { sx += nums[i]; sy += nums[i + 1]; n++; }
    return [sx / n, sy / n];
  };
  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" style={{ display: 'block', maxHeight: h }}>
        <defs>
          <filter id="mapshadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="0" dy="1" stdDeviation="1.5" floodOpacity=".15" />
          </filter>
        </defs>
        <g filter="url(#mapshadow)">
        {Object.entries(INDIA_STATES_GEOM).map(([code, d]) => (
          <path key={code} d={d}
            fill={stateFill(code)}
            stroke={selected === code || hover === code ? "var(--primary)" : "var(--panel)"}
            strokeWidth={selected === code || hover === code ? 2 : 1}
            style={{ cursor: 'pointer', transition: 'stroke .15s' }}
            onMouseEnter={() => { setHover(code); onHover?.(code); }}
            onMouseLeave={() => { setHover(null); onHover?.(null); }}
            onClick={() => onClick?.(code)}
          />
        ))}
        </g>
        {showLabels && Object.entries(INDIA_STATES_GEOM).filter(([code]) => code in values).slice(0, 10).map(([code, d]) => {
          const [cx, cy] = centroid(d);
          return (
            <text key={code} x={cx} y={cy} fontSize="9" fontFamily="Inter" fill="var(--ink-2)" textAnchor="middle" fontWeight="600" style={{ pointerEvents: 'none' }}>
              {code}
            </text>
          );
        })}
      </svg>
      {hover && (
        <div style={{ position: 'absolute', top: 8, right: 8, background: 'var(--panel)', border: '1px solid var(--border-strong)', borderRadius: 8, padding: '8px 12px', boxShadow: 'var(--shadow-md)', minWidth: 160, pointerEvents: 'none' }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>{INDIA_STATE_NAMES[hover]}</div>
          {hover in values ? (
            <div className="mono" style={{ fontSize: 16, color: 'var(--primary)', marginTop: 4, fontWeight: 600 }}>₹{values[hover].toFixed(1)} Cr</div>
          ) : (
            <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>No data</div>
          )}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { IndiaMap, INDIA_STATE_NAMES });