// views/maps.jsx — Geography of the World Cup. A world map of every host nation,
// and a per-edition stadium/host-city map. Reuses the HostMap component.

// 2026 host-city coordinates (not in the historical WCL_HOSTS archive).
const WC2026_CITIES = [
  { name: 'Vancouver', lat: 49.28, lon: -123.12, venues: ['BC Place'] },
  { name: 'Seattle', lat: 47.60, lon: -122.33, venues: ['Lumen Field'] },
  { name: 'San Francisco Bay', lat: 37.40, lon: -121.97, venues: ['Levi\u2019s Stadium'] },
  { name: 'Los Angeles', lat: 33.95, lon: -118.34, venues: ['SoFi Stadium'] },
  { name: 'Guadalajara', lat: 20.66, lon: -103.35, venues: ['Estadio Akron'] },
  { name: 'Mexico City', lat: 19.30, lon: -99.15, venues: ['Estadio Banorte'], host: true, note: 'Opening match · Estadio Banorte (Azteca).' },
  { name: 'Monterrey', lat: 25.67, lon: -100.24, venues: ['Estadio BBVA'] },
  { name: 'Houston', lat: 29.68, lon: -95.41, venues: ['NRG Stadium'] },
  { name: 'Dallas', lat: 32.75, lon: -97.09, venues: ['AT&T Stadium'] },
  { name: 'Kansas City', lat: 39.05, lon: -94.48, venues: ['Arrowhead Stadium'] },
  { name: 'Atlanta', lat: 33.75, lon: -84.40, venues: ['Mercedes-Benz Stadium'] },
  { name: 'Miami', lat: 25.96, lon: -80.24, venues: ['Hard Rock Stadium'] },
  { name: 'Toronto', lat: 43.63, lon: -79.42, venues: ['BMO Field'] },
  { name: 'Boston', lat: 42.09, lon: -71.26, venues: ['Gillette Stadium'] },
  { name: 'Philadelphia', lat: 39.90, lon: -75.17, venues: ['Lincoln Financial Field'] },
  { name: 'New York / New Jersey', lat: 40.81, lon: -74.07, venues: ['MetLife Stadium'], host: true, note: 'Final · MetLife Stadium, Jul 19.' },
];

function MapsView({ onRoute }) {
  const HOSTS = window.WCL_HOSTS;
  const years = Object.keys(HOSTS).map(Number).sort((a, b) => a - b).concat([2026]);
  const [year, setYear] = React.useState(2026);

  // World map: one pulsing pin per edition at its flagship city.
  const worldCities = React.useMemo(() => {
    const list = Object.entries(HOSTS).map(([y, h]) => {
      const fc = h.cities.find(c => c.host) || h.cities[0];
      return { name: y, lat: fc.lat, lon: fc.lon, host: true, note: `${h.countryNames.join(' & ')} ${y}` };
    });
    // 2026's three host flagships
    list.push({ name: '2026', lat: 40.81, lon: -74.07, host: true, note: 'USA · Canada · Mexico 2026' });
    return list;
  }, [HOSTS]);

  const sel = year === 2026
    ? { countryNames: ['United States', 'Canada', 'Mexico'], cities: WC2026_CITIES, flagshipCity: 'New York / New Jersey', host: 'CAN/MEX/USA' }
    : HOSTS[year];
  const host2026 = year === 2026;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb" style={{ display: 'flex', gap: 6, color: 'var(--foreground-muted)', fontSize: 12, marginBottom: 8 }}>
            <a className="link" onClick={() => onRoute('alltime')}>All-time</a><I.ChevR size={12} /><span>Maps</span>
          </div>
          <h1 className="type-h1" style={{ margin: 0 }}>World Cup maps</h1>
          <div className="sub">Every host since 1930 on one map — and the host cities &amp; stadiums of any single edition.</div>
        </div>
      </div>

      {/* World map of all hosts */}
      <section className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-head"><h3>Every host · 1930 → 2026</h3><span className="subtle" style={{ fontSize: 11 }}>{worldCities.length} editions</span></div>
        <HostMap cities={worldCities} />
        <div className="subtle" style={{ fontSize: 12, marginTop: 10, textWrap: 'pretty' }}>
          UEFA has hosted 11 times and CONMEBOL 5; 2026 is the first three-nation, three-region tournament. OFC has still never hosted.
        </div>
      </section>

      {/* Per-edition stadium map */}
      <section className="panel">
        <div className="panel-head">
          <h3>Host cities · {host2026 ? '2026' : year}</h3>
          <span className="subtle" style={{ fontSize: 11 }}>{sel.countryNames.join(' & ')} · {sel.cities.length} cities</span>
        </div>

        <div className="sb-years" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(56px, 1fr))', padding: 0, marginBottom: 14 }}>
          {years.map(y => (
            <button key={y} className={'sb-year' + (y === year ? ' active' : '') + (y === 2026 ? ' future' : '')} onClick={() => setYear(y)}>{y}</button>
          ))}
        </div>

        <HostMap cities={sel.cities} />

        <table className="table" style={{ marginTop: 14 }}>
          <thead><tr><th>City</th><th>Venues</th><th style={{ width: 130 }}>Coordinates</th></tr></thead>
          <tbody>
            {sel.cities.map((c, i) => (
              <tr key={i}>
                <td className="strong">{c.host && <I.Trophy size={11} style={{ color: 'var(--trophy)', marginRight: 6, verticalAlign: '-1px' }} />}{c.name}</td>
                <td className="subtle" style={{ fontSize: 12 }}>{c.venues?.join(' · ') || '—'}</td>
                <td className="mono subtle" style={{ fontSize: 11 }}>{c.lat.toFixed(2)}, {c.lon.toFixed(2)}</td>
              </tr>
            ))}
          </tbody>
        </table>

        {!host2026 && (
          <div style={{ marginTop: 14, display: 'flex', justifyContent: 'flex-end' }}>
            <button className="btn btn-secondary btn-sm" onClick={() => onRoute('tournament', { year, competition: 'wc_men' })}>Open {year} edition <I.ChevR size={12} /></button>
          </div>
        )}
      </section>
    </div>
  );
}
Object.assign(window, { MapsView });