/* global React, ReactDOM, NA_DATA, NASite, HomePage, TeamsPage, FixturesPage, SessionsPage, CampsPage, AcademyPage, TravelTeamsPage, CoachesPage, AboutPage, SponsorsPage, ShopPage, ContactPage, JoinSuccessPage, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "yellow",
  "density": "comfortable",
  "heroVariant": "scoreboard"
}/*EDITMODE-END*/;

function App() {
  // If the user has been redirected back from GoCardless (or hit /join-success
  // directly), land them on the success screen on first render.
  const initialPage = (() => {
    if (typeof window === 'undefined') return 'home';
    if (window.location.hash === '#join-success') return 'join-success';
    if (window.location.pathname.endsWith('/join-success')) return 'join-success';
    return 'home';
  })();
  const [page, setPage] = useState(initialPage);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute('data-accent', tweaks.accent);
    document.documentElement.setAttribute('data-density', tweaks.density);
  }, [tweaks.accent, tweaks.density]);

  useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [page]);

  const { Topbar, Footer } = NASite;

  const renderPage = () => {
    switch (page) {
      case 'home': return <HomePage setPage={setPage} heroVariant={tweaks.heroVariant} />;
      case 'teams': return <TeamsPage setPage={setPage} />;
      case 'fixtures': return <FixturesPage />;
      case 'sessions': return <SessionsPage setPage={setPage} />;
      case 'camps': return <CampsPage setPage={setPage} />;
      case 'academy': return <AcademyPage setPage={setPage} />;
      case 'travel': return <TravelTeamsPage setPage={setPage} />;
      case 'coaches': return <CoachesPage />;
      case 'about': return <AboutPage setPage={setPage} />;
      case 'sponsors': return <SponsorsPage setPage={setPage} />;
      case 'shop': return <ShopPage />;
      case 'contact': return <ContactPage />;
      case 'join-success': return <JoinSuccessPage setPage={setPage} />;
      default: return <HomePage setPage={setPage} heroVariant={tweaks.heroVariant} />;
    }
  };

  return (
    <div data-screen-label={page}>
      <Topbar page={page} setPage={setPage} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />
      {renderPage()}
      <Footer setPage={setPage} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent colour" subtitle="Brand uses yellow as accent. Try alternates.">
          <TweakRadio
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={[
              { value: 'yellow', label: 'Yellow' },
              { value: 'blue', label: 'Royal blue' },
              { value: 'cherry', label: 'Cherry red' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'comfortable', label: 'Comfortable' },
              { value: 'compact', label: 'Compact' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero variant" subtitle="The right-hand side of the homepage.">
          <TweakSelect
            value={tweaks.heroVariant}
            onChange={v => setTweak('heroVariant', v)}
            options={[
              { value: 'scoreboard', label: 'Scoreboard — next fixture' },
              { value: 'photo', label: 'Photo lead — single action shot' },
              { value: 'stats', label: 'Stats grid — at-a-glance' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

const __rootEl = document.getElementById('root');
// Remove the boot splash so React renders into a clean container.
__rootEl.innerHTML = '';
ReactDOM.createRoot(__rootEl).render(<App />);