/* screens/SupportModal.jsx — first-visit "who do you support?" popup.
   Shows once, saves to localStorage. window.SupportModal */
const SUPPORT_KEY = 'bwcp:supported_teams';

/* Returns null if not yet answered, [] if skipped, [codes…] if picked. */
function getSupportedTeams() {
  try {
    const raw = localStorage.getItem(SUPPORT_KEY);
    return raw ? JSON.parse(raw) : null;
  } catch (_) { return null; }
}

function SupportModal({ onDone }) {
  const { useState, useMemo } = React;

  const teams = useMemo(() =>
    Object.values(window.WC.teams).sort((a, b) => a.name.localeCompare(b.name)),
    []
  );

  const [selected, setSelected] = useState([]);
  const [query, setQuery] = useState('');

  const filtered = query.trim()
    ? teams.filter(t =>
        t.name.toLowerCase().includes(query.toLowerCase()) ||
        t.full.toLowerCase().includes(query.toLowerCase())
      )
    : teams;

  const toggle = (code) => {
    setSelected(prev => {
      if (prev.includes(code)) return prev.filter(c => c !== code);
      // Replace oldest selection when already at 2
      if (prev.length >= 2) return [prev[1], code];
      return [...prev, code];
    });
  };

  const confirm = () => {
    try { localStorage.setItem(SUPPORT_KEY, JSON.stringify(selected)); } catch (_) {}
    window.bwcpTrack?.('bwcp_team_supported', {
      teams: selected,
      count: selected.length,
    });
    onDone(selected);
  };

  const skip = () => {
    try { localStorage.setItem(SUPPORT_KEY, JSON.stringify([])); } catch (_) {}
    onDone([]);
  };

  return (
    <div className="scrim support-scrim" style={{ alignItems: 'center' }}>
      <div className="support-modal">

        {/* Header */}
        <div className="support-head">
          <div className="eyebrow" style={{ marginBottom: 'var(--sp-3)' }}>
            FIFA World Cup 2026
          </div>
          <h2 className="support-title display">Who do you support?</h2>
          <p className="support-sub">
            Pick up to 2 teams — we'll mark their matches across your bracket.
          </p>

          {/* Selected pills */}
          {selected.length > 0 && (
            <div className="support-selected">
              {selected.map(code => {
                const t = window.WC.team(code);
                return (
                  <span key={code} className="support-pill">
                    <span style={{ fontSize: 18 }}>{t.flag}</span>
                    <span>{t.name}</span>
                    <button className="support-pill__x" onClick={() => toggle(code)}
                      aria-label={`Remove ${t.name}`}>×</button>
                  </span>
                );
              })}
            </div>
          )}

          {/* Search */}
          <input
            className="support-search"
            type="text"
            placeholder="Search teams…"
            value={query}
            onChange={e => setQuery(e.target.value)}
            autoComplete="off"
          />
        </div>

        {/* Team grid */}
        <div className="support-grid">
          {filtered.length === 0 && (
            <div className="support-empty">No teams match "{query}"</div>
          )}
          {filtered.map(team => (
            <button
              key={team.code}
              className="support-team"
              data-on={selected.includes(team.code) ? 1 : 0}
              onClick={() => toggle(team.code)}
            >
              <span className="support-team__flag">{team.flag}</span>
              <span className="support-team__name">{team.name}</span>
            </button>
          ))}
        </div>

        {/* Footer */}
        <div className="support-foot">
          <button className="linklike" onClick={skip}>Skip</button>
          <Btn onClick={confirm} disabled={selected.length === 0}>
            {selected.length === 0 ? "Pick a team" : `Let's go (${selected.length})`}
            <IconArrow size={16} />
          </Btn>
        </div>
      </div>
    </div>
  );
}

window.SupportModal = SupportModal;
window.getSupportedTeams = getSupportedTeams;
window.SUPPORT_KEY = SUPPORT_KEY;