/* us-map.jsx — clickable inline SVG US map
 * Approximated state shapes via a simplified rect/polygon grid (Hex-style "tile map"
 * is more reliable than full geographic SVG and reads well on both mobile + desktop).
 * Each state is a tile in a 12-col grid based on US Census tile-map convention.
 */

const US_TILES = [
  // [code, col, row]
  ['AK', 0, 0], ['ME',10,0],
  ['VT',9,1], ['NH',10,1],
  ['WA',1,1], ['ID',2,1], ['MT',3,1], ['ND',4,1], ['MN',5,1], ['IL',6,1], ['WI',6,1],
  ['HI',0,5],
];
// We'll define the tile-map fully here:
const TILE_MAP = [
  // y=0
  { c:'AK', x:0, y:0 }, { c:'ME', x:10, y:0 },
  // y=1
  { c:'VT', x:9, y:1 }, { c:'NH', x:10, y:1 },
  { c:'WA', x:1, y:1 }, { c:'ID', x:2, y:1 }, { c:'MT', x:3, y:1 }, { c:'ND', x:4, y:1 },
  { c:'MN', x:5, y:1 }, { c:'WI', x:6, y:1 }, { c:'MI', x:7, y:1 }, { c:'NY', x:9, y:2 },
  // y=2
  { c:'OR', x:1, y:2 }, { c:'NV', x:2, y:2 }, { c:'WY', x:3, y:2 }, { c:'SD', x:4, y:2 },
  { c:'IA', x:5, y:2 }, { c:'IL', x:6, y:2 }, { c:'IN', x:7, y:2 }, { c:'OH', x:8, y:2 },
  { c:'PA', x:9, y:2 - 0 + 0 }, // overlapping fix below
];
// Cleaner: replace the lists above with a single canonical tile-map.

const US_TILE_MAP = [
  // row 0
  { c:'AK', x:0, y:0 }, { c:'ME', x:10, y:0 },
  // row 1
  { c:'VT', x:9, y:1 }, { c:'NH', x:10, y:1 },
  // row 2
  { c:'WA', x:1, y:2 }, { c:'ID', x:2, y:2 }, { c:'MT', x:3, y:2 },
  { c:'ND', x:4, y:2 }, { c:'MN', x:5, y:2 }, { c:'WI', x:6, y:2 },
  { c:'MI', x:7, y:2 }, { c:'NY', x:9, y:2 }, { c:'MA', x:10, y:2 },
  // row 3
  { c:'OR', x:1, y:3 }, { c:'NV', x:2, y:3 }, { c:'WY', x:3, y:3 },
  { c:'SD', x:4, y:3 }, { c:'IA', x:5, y:3 }, { c:'IL', x:6, y:3 },
  { c:'IN', x:7, y:3 }, { c:'OH', x:8, y:3 }, { c:'PA', x:9, y:3 },
  { c:'NJ', x:10, y:3 }, { c:'CT', x:10, y:2 - 0 + 1 }, // CT placement below
  // row 4
  { c:'CA', x:1, y:4 }, { c:'UT', x:2, y:4 }, { c:'CO', x:3, y:4 },
  { c:'NE', x:4, y:4 }, { c:'MO', x:5, y:4 }, { c:'KY', x:6, y:4 },
  { c:'WV', x:7, y:4 }, { c:'VA', x:8, y:4 }, { c:'MD', x:9, y:4 },
  { c:'DE', x:10, y:4 },
  // row 5
  { c:'AZ', x:2, y:5 }, { c:'NM', x:3, y:5 }, { c:'KS', x:4, y:5 },
  { c:'AR', x:5, y:5 }, { c:'TN', x:6, y:5 }, { c:'NC', x:7, y:5 },
  { c:'SC', x:8, y:5 }, { c:'DC', x:9, y:5 },
  // row 6
  { c:'HI', x:0, y:7 }, { c:'TX', x:3, y:6 }, { c:'OK', x:4, y:6 },
  { c:'LA', x:5, y:6 }, { c:'MS', x:6, y:6 }, { c:'AL', x:7, y:6 },
  { c:'GA', x:8, y:6 }, { c:'RI', x:10, y:2 + 0 + 1 },
  // row 7
  { c:'FL', x:8, y:7 },
];

// Scrub duplicates — final canonical map:
const FINAL_TILE_MAP = [
  // row 0
  ['AK',0,0], ['ME',10,0],
  // row 1
  ['VT',9,1], ['NH',10,1],
  // row 2
  ['WA',1,2], ['ID',2,2], ['MT',3,2], ['ND',4,2], ['MN',5,2], ['WI',6,2], ['MI',7,2], ['NY',9,2], ['MA',10,2],
  // row 3
  ['OR',1,3], ['NV',2,3], ['WY',3,3], ['SD',4,3], ['IA',5,3], ['IL',6,3], ['IN',7,3], ['OH',8,3], ['PA',9,3], ['NJ',10,3], ['CT',11,3],
  // row 4
  ['CA',1,4], ['UT',2,4], ['CO',3,4], ['NE',4,4], ['MO',5,4], ['KY',6,4], ['WV',7,4], ['VA',8,4], ['MD',9,4], ['DE',10,4], ['RI',11,4],
  // row 5
  ['AZ',2,5], ['NM',3,5], ['KS',4,5], ['AR',5,5], ['TN',6,5], ['NC',7,5], ['SC',8,5], ['DC',9,5],
  // row 6
  ['TX',3,6], ['OK',4,6], ['LA',5,6], ['MS',6,6], ['AL',7,6], ['GA',8,6],
  // row 7 — Florida + Hawaii
  ['HI',0,7], ['FL',8,7],
];

function USMap({ value, onChange }) {
  const tile = 44;
  const gap = 4;
  const cols = 12;
  const rows = 8;
  const W = cols * (tile + gap);
  const H = rows * (tile + gap);
  return (
    <div style={{ width: '100%', overflow: 'auto' }}>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ maxWidth: 560, display: 'block', margin: '0 auto' }}>
        {FINAL_TILE_MAP.map(([code, x, y]) => {
          const selected = value === code;
          return (
            <g key={code}
               role="button"
               tabIndex={0}
               aria-label={code}
               onClick={() => onChange(code)}
               onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onChange(code); }}
               style={{ cursor: 'pointer' }}>
              <rect
                x={x * (tile + gap)}
                y={y * (tile + gap)}
                width={tile}
                height={tile}
                rx="6"
                fill={selected ? 'var(--accent)' : 'var(--paper-2)'}
                stroke="var(--ink)"
                strokeWidth={selected ? 2.5 : 1.2}
              />
              <text
                x={x * (tile + gap) + tile / 2}
                y={y * (tile + gap) + tile / 2 + 4}
                textAnchor="middle"
                fontFamily="Inter"
                fontSize="13"
                fontWeight={selected ? 700 : 600}
                fill="var(--ink)"
                style={{ pointerEvents: 'none' }}
              >
                {code}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

window.USMap = USMap;