// host_map.jsx — Equirectangular SVG map for tournament host cities
// Renders city dots positioned by lat/lon on a stylized world map.
// Includes a basic vector of continent outlines (simplified) and city pins.

// Convert lat/lon to viewBox 0..1000 x 0..500 (equirectangular)
function ll2xy(lat, lon) {
  const x = ((lon + 180) / 360) * 1000;
  const y = ((90 - lat) / 180) * 500;
  return [x, y];
}

function HostMap({ cities }) {
  // Auto-zoom to bounding box of cities (with padding)
  const pts = cities.map(c => ll2xy(c.lat, c.lon));
  const xs = pts.map(p => p[0]);
  const ys = pts.map(p => p[1]);
  const pad = 40;
  let minX = Math.min(...xs) - pad;
  let maxX = Math.max(...xs) + pad;
  let minY = Math.min(...ys) - pad;
  let maxY = Math.max(...ys) + pad;
  // Enforce aspect 16:9
  const targetRatio = 16 / 9;
  const w = maxX - minX, h = maxY - minY;
  if (w / h > targetRatio) {
    const newH = w / targetRatio;
    minY -= (newH - h) / 2;
    maxY += (newH - h) / 2;
  } else {
    const newW = h * targetRatio;
    minX -= (newW - w) / 2;
    maxX += (newW - w) / 2;
  }
  const vbW = maxX - minX, vbH = maxY - minY;

  return (
    <div style={{
      background: 'var(--surface)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      <svg viewBox={`${minX} ${minY} ${vbW} ${vbH}`} style={{ display: 'block', width: '100%', height: 'auto', background: `
        radial-gradient(ellipse at center, color-mix(in oklch, var(--pitch) 6%, transparent), transparent 70%),
        repeating-linear-gradient(0deg, var(--muted) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 40px),
        var(--surface)
      ` }}>
        {/* Equator + prime meridian for orientation */}
        <line x1={minX} x2={maxX} y1={250} y2={250} stroke="var(--border)" strokeDasharray="4 6" strokeWidth="0.5" />
        <line x1={500} x2={500} y1={minY} y2={maxY} stroke="var(--border)" strokeDasharray="4 6" strokeWidth="0.5" />

        {/* Simplified continent silhouettes */}
        <g fill="color-mix(in oklch, var(--pitch) 18%, var(--card))" stroke="var(--border-strong)" strokeWidth="0.7" opacity="0.85">
          {/* North America */}
          <path d="M 130,135 L 200,120 L 260,110 L 300,130 L 295,170 L 285,210 L 260,250 L 230,260 L 200,255 L 175,235 L 165,210 L 145,180 L 135,155 Z" />
          {/* Central America */}
          <path d="M 230,260 L 270,275 L 295,285 L 285,300 L 260,295 L 240,280 Z" />
          {/* South America */}
          <path d="M 290,290 L 320,290 L 345,310 L 355,345 L 350,395 L 335,425 L 315,440 L 300,425 L 290,395 L 285,355 L 285,320 Z" />
          {/* Europe */}
          <path d="M 470,135 L 530,125 L 565,140 L 580,165 L 565,185 L 530,195 L 495,190 L 475,170 Z" />
          {/* Africa */}
          <path d="M 490,210 L 555,210 L 580,230 L 590,275 L 585,320 L 570,355 L 550,385 L 525,395 L 510,380 L 495,345 L 488,300 L 488,255 Z" />
          {/* Middle East / Arabia */}
          <path d="M 580,210 L 615,210 L 625,240 L 620,265 L 600,275 L 588,250 Z" />
          {/* Russia + Asia */}
          <path d="M 580,120 L 700,115 L 800,130 L 850,150 L 870,180 L 850,200 L 820,210 L 770,215 L 720,205 L 680,195 L 640,185 L 605,170 Z" />
          {/* India */}
          <path d="M 680,210 L 725,210 L 730,240 L 715,265 L 695,260 L 680,235 Z" />
          {/* SE Asia */}
          <path d="M 740,220 L 790,225 L 820,240 L 825,265 L 800,275 L 770,265 L 745,245 Z" />
          {/* Australia */}
          <path d="M 800,350 L 880,345 L 905,365 L 905,395 L 870,410 L 825,405 L 800,380 Z" />
          {/* Japan */}
          <path d="M 850,180 L 870,175 L 875,195 L 870,215 L 860,220 L 855,200 Z" />
          {/* UK / Ireland */}
          <path d="M 470,140 L 482,135 L 485,160 L 478,170 L 470,165 Z" />
          {/* Greenland */}
          <path d="M 380,90 L 430,85 L 445,100 L 440,125 L 420,135 L 395,130 L 385,110 Z" />
        </g>

        {/* City pins */}
        {cities.map((c, i) => {
          const [x, y] = ll2xy(c.lat, c.lon);
          const r = c.host ? 5.5 : 3.5;
          return (
            <g key={i}>
              {c.host && (
                <circle cx={x} cy={y} r="14" fill="color-mix(in oklch, var(--trophy) 30%, transparent)">
                  <animate attributeName="r" values="10;18;10" dur="2.4s" repeatCount="indefinite" />
                  <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite" />
                </circle>
              )}
              <circle cx={x} cy={y} r={r + 2} fill="var(--surface)" stroke="none" />
              <circle cx={x} cy={y} r={r}
                      fill={c.host ? 'var(--trophy)' : 'var(--brand)'}
                      stroke="white"
                      strokeWidth="1" />
              <text x={x + r + 4} y={y + 3.5}
                    fontSize={c.host ? '10' : '8'}
                    fontWeight={c.host ? '700' : '500'}
                    fill="var(--foreground)"
                    fontFamily="var(--font-sans)"
                    style={{ paintOrder: 'stroke', stroke: 'var(--surface)', strokeWidth: '3' }}>
                {c.name}{c.host ? ' \u2605' : ''}
              </text>
            </g>
          );
        })}
      </svg>
      <div style={{
        position: 'absolute', bottom: 10, left: 12,
        display: 'flex', gap: 14, fontSize: 11, color: 'var(--foreground-muted)',
        background: 'color-mix(in oklch, var(--surface) 80%, transparent)',
        backdropFilter: 'blur(8px)',
        padding: '5px 10px',
        borderRadius: 999,
        border: '1px solid var(--border)',
      }}>
        <span><span style={{ display: 'inline-block', width: 7, height: 7, borderRadius: 999, background: 'var(--trophy)', marginRight: 6, verticalAlign: '0px' }} /> Flagship city</span>
        <span><span style={{ display: 'inline-block', width: 5, height: 5, borderRadius: 999, background: 'var(--brand)', marginRight: 6, verticalAlign: '1px' }} /> Host city</span>
      </div>
    </div>
  );
}
Object.assign(window, { HostMap });