/* app.jsx — root: nav, routing, tweaks, real scores. Mounts #root */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F4C24B",
  "displayFont": "Anton",
  "density": "regular",
  "glow": 70
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  const a = t.accent || '#F4C24B';
  root.style.setProperty('--gold', a);
  root.style.setProperty('--gold-bright', `color-mix(in oklab, ${a}, white 20%)`);
  root.style.setProperty('--gold-deep', `color-mix(in oklab, ${a}, black 16%)`);
  root.style.setProperty('--gold-dim', `color-mix(in oklab, ${a}, transparent 85%)`);
  root.style.setProperty('--gold-glow', `color-mix(in oklab, ${a}, transparent ${Math.max(0, 100 - Math.round((t.glow ?? 70) * 0.65))}%)`);
  const fonts = { Anton: "'Anton'", Oswald: "'Oswald'", Archivo: "'Archivo Black'" };
  root.style.setProperty('--font-display', `${fonts[t.displayFont] || "'Anton'"}, 'Arial Narrow', sans-serif`);
  root.dataset.density = t.density || 'regular';
  root.style.setProperty('--fx', String((t.glow ?? 70) / 100));
}

const NAV = [
  ['home', 'Home', (p) => <IconHome {...p} />],
  ['group', 'Groups', (p) => <IconGrid {...p} />],
  ['knockout', 'Bracket', (p) => <IconBracket {...p} />],
  ['summary', 'My bracket', (p) => <IconShare {...p} />],
  ['live', 'Live', (p) => <IconTarget {...p} />],
  ['quiz', 'Quiz', (p) => <IconQuiz {...p} />],
  ['leaderboard', 'Rank', (p) => <IconLeaderboard {...p} />],
  ['final', 'Recap', (p) => <IconTrophy {...p} />],
];

/* Fetch real scores from Supabase `real_scores` table.
   Returns { [match_id]: { hs, as, o } } for played matches only. */
async function fetchRealScores() {
  const cfg = window.BWCP_CONFIG;
  if (!cfg || !window.supabase) return {};
  const sb = window._bwcpSB || window.supabase.createClient(cfg.supabaseUrl, cfg.supabaseAnonKey);
  const { data, error } = await sb.from('real_scores').select('*').eq('played', true);
  if (error || !data) return {};
  const map = {};
  data.forEach(row => {
    map[row.match_id] = {
      hs: row.home_goals,
      as: row.away_goals,
      o: row.home_goals > row.away_goals ? 'H' : row.home_goals < row.away_goals ? 'A' : 'D',
    };
  });
  return map;
}

function App() {
  const { useState, useEffect } = React;
  const store = useStore();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useState(() => (location.hash.slice(1) || 'home'));
  const [realScores, setRealScores] = useState({});

  // null = not yet answered (show modal), [] = skipped, [codes] = picked
  const [supportedTeams, setSupportedTeams] = useState(() => window.getSupportedTeams?.() ?? null);

  /* Hash-based routing */
  useEffect(() => {
    const f = () => setScreen(location.hash.slice(1) || 'home');
    window.addEventListener('hashchange', f);
    return () => window.removeEventListener('hashchange', f);
  }, []);

  useEffect(() => applyTweaks(t), [t]);

  /* Load real scores on mount, then refresh every 60s during the tournament */
  useEffect(() => {
    fetchRealScores().then(setRealScores);
    const interval = setInterval(() => fetchRealScores().then(setRealScores), 60000);
    return () => clearInterval(interval);
  }, []);

  const go = (s) => {
    if (location.hash.slice(1) !== s) location.hash = s;
    setScreen(s);
    window.scrollTo({ top: 0, behavior: 'instant' in document.body.style ? 'instant' : 'auto' });
    window.bwcpTrack?.('bwcp_screen_view', { screen: s });
  };

  const groupPreds = window.WC.fixtures.filter((f) => store.state.results[f.id] && store.state.results[f.id].o).length;
  const koPicks = Object.keys(store.state.ko).filter((k) => store.state.ko[k]).length;
  const totalPreds = groupPreds + Math.min(koPicks, 32);

  /* Merge real scores over simulated baseline — used by Live + Final screens */
  const actual = window.WCLogic.computeActual(realScores);

  /* Expose supported teams as a Set for O(1) lookup in components */
  window.bwcpSupported = new Set(supportedTeams || []);

  const Screen = { home: HomeScreen, group: GroupScreen, knockout: KnockoutScreen, summary: SummaryScreen, live: LiveScreen, quiz: QuizScreen, leaderboard: LeaderboardScreen, final: FinalScreen }[screen] || HomeScreen;

  return (
    <div className="app">
      {/* First-visit support modal — shown before any interaction */}
      {supportedTeams === null && (
        <SupportModal onDone={(teams) => setSupportedTeams(teams)} />
      )}
      <nav className="nav">
        <div className="nav__brand" onClick={() => go('home')} style={{ cursor: 'pointer' }}>
          <span className="dot" />BWORLD<span style={{ color: 'var(--gold)' }}>CUP</span>
        </div>
        <div className="nav__links">
          {NAV.map(([k, l, Ic]) => (
            <button key={k} className="nav__link" data-active={screen === k ? 1 : 0} onClick={() => go(k)}>
              <Ic size={15} /> <span className="nav__linklabel">{l}</span>
            </button>
          ))}
        </div>
        <div className="nav__spacer" />
        <div className="savebar">
          <span className="tnum nav__count">{totalPreds}/104</span>
          <div className="meter"><i style={{ width: (totalPreds / 104 * 100) + '%' }} /></div>
        </div>
      </nav>

      <main>
        <Screen store={store} go={go} tweaks={t} actual={actual} uuid={store.uuid} realScores={realScores} />
      </main>

      <footer className="foot">
        <span>BWorldCupPredictor · FIFA World Cup 26™ predictions game</span>
        {!store.isShared && <button className="linklike" onClick={store.reset}>Reset all predictions</button>}
      </footer>

      <TweaksPanel>
        <TweakSection label="Look & feel" />
        <TweakColor label="Accent" value={t.accent}
          options={['#F4C24B', '#F0922E', '#E5604D', '#5BB6E8']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="Display font" value={t.displayFont}
          options={['Anton', 'Oswald', 'Archivo']}
          onChange={(v) => setTweak('displayFont', v)} />
        <TweakRadio label="Density" value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)} />
        <TweakSlider label="Floodlight glow" value={t.glow} min={0} max={100} unit="%"
          onChange={(v) => setTweak('glow', v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);