// app.jsx — root component for World Cup Live
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "matchState": "live",
  "theme": "light",
  "density": "cozy",
  "pickEm": true,
  "primaryRoute": "home",
  "competition": "wc_men",
  "clock": "live"
}/*EDITMODE-END*/;

// ---------- URL hash routing ----------
// #/route                e.g. #/players
// #/team/ARG             team profile
// #/tournament/2022      edition (competition optional: #/tournament/2019/euros)
function parseHash() {
  const raw = (window.location.hash || '').replace(/^#\/?/, '').trim();
  if (!raw) return { route: null, params: {} };
  const parts = raw.split('/').filter(Boolean);
  const route = parts[0];
  const params = {};
  if (route === 'team' && parts[1]) params.code = parts[1].toUpperCase();
  if (route === 'tournament' && parts[1]) { params.year = parseInt(parts[1], 10); if (parts[2]) params.competition = parts[2]; }
  return { route, params };
}
function buildHash(route, params) {
  let h = '#/' + route;
  if (route === 'team' && params.code) h += '/' + params.code;
  if (route === 'tournament' && params.year) { h += '/' + params.year; if (params.competition && params.competition !== 'wc_men') h += '/' + params.competition; }
  return h;
}
window.WCL_parseHash = parseHash;

function App() {
  const initial = parseHash();
  const [route, setRoute] = React.useState(initial.route || 'home');
  const [routeParams, setRouteParams] = React.useState(initial.params || {});
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const suppressHash = React.useRef(false);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.theme]);

  // Keep the URL hash in sync with the current route.
  React.useEffect(() => {
    const want = buildHash(route, routeParams);
    if (window.location.hash !== want) {
      suppressHash.current = true;
      window.location.hash = want;
    }
  }, [route, routeParams]);

  // React to back/forward + manual hash edits.
  React.useEffect(() => {
    function onHash() {
      if (suppressHash.current) { suppressHash.current = false; return; }
      const p = parseHash();
      if (p.route) { setRoute(p.route); setRouteParams(p.params); }
    }
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const onRoute = (r, params = {}) => {
    setRoute(r);
    setRouteParams(params);
    setTweak('primaryRoute', r);
    window.scrollTo({ top: 0 });
  };

  const onChangeCompetition = (id) => {
    setTweak('competition', id);
    if (route !== 'history' && route !== 'tournament') {
      onRoute('history');
    }
  };

  const comp = t.competition || 'wc_men';
  const clock = React.useMemo(() => window.WCL_CLOCK.compute(t.clock || 'live'), [t.clock]);

  // expose a helper for the competition dropdown's per-year tiles
  React.useEffect(() => {
    window.__wclGoTournament = (year) => onRoute('tournament', { year, competition: 'wc_men' });
    return () => { delete window.__wclGoTournament; };
  });

  let view;
  switch (route) {
    case 'home':        view = <HubView onRoute={onRoute} clock={clock} />; break;
    case 'live':        view = <LiveView onRoute={onRoute} matchState={t.matchState} clock={clock} />; break;
    case 'match':       view = <MatchView state={t.matchState} onRoute={onRoute} />; break;
    case 'team':        view = <TeamView code={routeParams.code || 'ARG'} onRoute={onRoute} />; break;
    case 'teams':       view = <TeamsView onRoute={onRoute} />; break;
    case 'players':     view = <PlayersView onRoute={onRoute} />; break;
    case 'matches':     view = <MatchesView onRoute={onRoute} />; break;
    case 'pickem':      view = <PickemView onRoute={onRoute} clock={clock} />; break;
    case 'table':       view = <TableView onRoute={onRoute} clock={clock} />; break;
    case 'bracket':     view = <BracketView onRoute={onRoute} />; break;
    case 'odds':        view = <OddsView onRoute={onRoute} />; break;
    case 'stats':       view = <StatsView onRoute={onRoute} clock={clock} />; break;
    case 'guide':       view = <GuideView onRoute={onRoute} />; break;
    case 'faq':         view = <FaqView onRoute={onRoute} />; break;
    case 'agent':       view = <AgentView onRoute={onRoute} />; break;
    case 'sitemap':     view = <SitemapView onRoute={onRoute} />; break;
    case 'medals':      view = <MedalsView onRoute={onRoute} />; break;
    case 'maps':        view = <MapsView onRoute={onRoute} />; break;
    case 'tournaments': view = <TournamentsView onRoute={onRoute} />; break;
    case 'records':     view = <AlltimeView onRoute={onRoute} />; break;
    case 'history':     view = <HistoryView onRoute={onRoute} competition={comp} />; break;
    case 'alltime':     view = <AlltimeView onRoute={onRoute} />; break;
    case 'wc2026':      view = <WC2026View onRoute={onRoute} />; break;
    case 'tournament':  view = <TournamentView year={routeParams.year || window.WCL_COMPETITIONS[routeParams.competition || comp].editions.slice(-1)[0].y} competition={routeParams.competition || comp} onRoute={onRoute} />; break;
    case 'leaderboard': view = <LeaderboardView onRoute={onRoute} />; break;
    case 'explainer':   view = <ExplainerView onRoute={onRoute} />; break;
    case 'admin':       view = <AdminView onRoute={onRoute} />; break;
    default:            view = <HubView onRoute={onRoute} clock={clock} />;
  }

  return (
    <>
      <Shell
        route={route}
        onRoute={onRoute}
        theme={t.theme}
        density={t.density}
        competition={comp}
        clock={clock}
        onChangeCompetition={onChangeCompetition}
        onToggleTheme={() => setTweak('theme', t.theme === 'dark' ? 'light' : 'dark')}>
        {view}
      </Shell>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tournament clock">
          <TweakSelect
            label="Where are we?"
            value={t.clock}
            options={[
              { label: 'Countdown (pre)',   value: 'countdown' },
              { label: 'Opening day',       value: 'opening' },
              { label: 'Live · Matchday 2', value: 'live' },
              { label: 'Final day',         value: 'final' },
              { label: 'After the final',   value: 'post' },
            ]}
            onChange={(v) => setTweak('clock', v)}
          />
        </TweakSection>

        <TweakSection label="Competition">
          <TweakSelect
            label="Sport / event"
            value={comp}
            options={Object.values(window.WCL_COMPETITIONS).map(c => ({ label: c.short, value: c.id }))}
            onChange={(v) => onChangeCompetition(v)}
          />
        </TweakSection>

        <TweakSection label="Match state">
          <TweakRadio
            label="Featured match"
            value={t.matchState}
            options={[
              { label: 'Pre',   value: 'pre' },
              { label: 'Live',  value: 'live' },
              { label: 'Final', value: 'final' },
            ]}
            onChange={(v) => setTweak('matchState', v)}
          />
        </TweakSection>

        <TweakSection label="View">
          <TweakSelect
            label="Screen"
            value={route}
            options={[
              { label: 'Home · Overview',     value: 'home' },
              { label: 'Live Today',          value: 'live' },
              { label: 'Fixtures',            value: 'matches' },
              { label: 'Pick\u2019em',        value: 'pickem' },
              { label: 'Group Table',         value: 'table' },
              { label: 'Knockout · Bracket',  value: 'bracket' },
              { label: 'Odds & model',        value: 'odds' },
              { label: 'Players',             value: 'players' },
              { label: 'All 48 teams',        value: 'teams' },
              { label: 'Leaderboard',         value: 'leaderboard' },
              { label: 'Agent · WorldCupAI',  value: 'agent' },
              { label: 'Statistics',          value: 'stats' },
              { label: 'Guide',               value: 'guide' },
              { label: 'FAQ',                 value: 'faq' },
              { label: 'History',             value: 'history' },
              { label: 'Tournaments',         value: 'tournaments' },
              { label: 'All-time records',    value: 'alltime' },
              { label: 'Medals',              value: 'medals' },
              { label: 'Maps',                value: 'maps' },
              { label: '2026 details',        value: 'wc2026' },
              { label: 'Sitemap',             value: 'sitemap' },
              { label: 'How it works',        value: 'explainer' },
              { label: 'Admin',               value: 'admin' },
            ]}
            onChange={(v) => onRoute(v)}
          />
        </TweakSection>

        <TweakSection label="Appearance">
          <TweakRadio
            label="Theme"
            value={t.theme}
            options={[
              { label: 'Dark',  value: 'dark' },
              { label: 'Light', value: 'light' },
            ]}
            onChange={(v) => setTweak('theme', v)}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            options={[
              { label: 'Cozy',    value: 'cozy' },
              { label: 'Compact', value: 'compact' },
            ]}
            onChange={(v) => setTweak('density', v)}
          />
        </TweakSection>

        <TweakSection label="Features">
          <TweakToggle
            label="Pick\u2019em layer"
            value={t.pickEm}
            onChange={(v) => setTweak('pickEm', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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