/* ═══════════════════════════════════════════════════════
   app · Router, theme bootstrap, Tweaks, mount
═══════════════════════════════════════════════════════ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "velvet",
  "fontDisplay": "Cinzel"
}/*EDITMODE-END*/;

const FONT_OPTIONS = {
  Cinzel:   { display: "'Cinzel', serif",          editorial: "'Instrument Serif', serif" },
  Playfair: { display: "'Playfair Display', serif", editorial: "'Cormorant Garamond', serif" },
  Outfit:   { display: "'Outfit', sans-serif",      editorial: "'DM Serif Display', serif" },
};

/* Apply persisted theme on first paint */
(function () {
  try {
    const t = localStorage.getItem('scp_theme');
    if (t === 'marble') document.body.classList.add('theme-marble');
  } catch (e) {}
})();

const App = () => {
  const s = useStore();
  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  useEffect(() => { boot(); }, []);

  /* Apply tweaks */
  useEffect(() => {
    document.body.classList.toggle('theme-marble', t.theme === 'marble');
    try { localStorage.setItem('scp_theme', t.theme); } catch (e) {}
  }, [t.theme]);
  useEffect(() => {
    const f = FONT_OPTIONS[t.fontDisplay] || FONT_OPTIONS.Cinzel;
    document.documentElement.style.setProperty('--font-display', f.display);
    document.documentElement.style.setProperty('--font-editorial', f.editorial);
  }, [t.fontDisplay]);

  /* Routing */
  let screen;
  if (s.screen === 'loading') {
    screen = <LoadingScreen msg={s.loadingMsg}/>;
  } else if (s.screen === 'login' || s.screen === 'register' || s.screen === 'recover') {
    screen = <LoginScreen/>;
  } else if (s.screen === 'clubs') {
    screen = <ClubsScreen/>;
  } else if (s.currentGame) {
    screen = <GameScreen/>;
  } else {
    switch (s.route) {
      case 'home': screen = <HomeScreen/>; break;
      case 'ranking': screen = <RankingScreen/>; break;
      case 'seasons': screen = <SeasonsScreen/>; break;
      case 'partidas': screen = <PartidasScreen/>; break;
      case 'mensalistas': screen = <MensalistasScreen/>; break;
      case 'usuarios': screen = isAdmin() ? <UsersScreen/> : <HomeScreen/>; break;
      case 'perfil': screen = <ProfileScreen/>; break;
      default: screen = <HomeScreen/>;
    }
  }

  return (
    <div className="app-root">
      <div className="viewport">
        {screen}
        <Drawer/>
        {s.sheet === 'create-club' && <CreateClubSheet/>}
        {s.sheet === 'join-club'   && <JoinClubSheet/>}
        {s.sheet === 'share-qr'    && <ShareQRSheet/>}
        {s.sheet === 'new-game'    && <NewGameSheet/>}
        {s.sheet === 'edit-game'   && <NewGameSheet/>}
        <Toaster/>
      </div>

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Aparência"/>
          <window.TweakRadio
            label="Tema" value={t.theme}
            options={[{ value: 'velvet', label: 'Velvet' }, { value: 'marble', label: 'Marble' }]}
            onChange={v => setTweak('theme', v)}
          />
          <window.TweakSelect
            label="Fonte de título" value={t.fontDisplay}
            options={Object.keys(FONT_OPTIONS).map(k => ({ value: k, label: k }))}
            onChange={v => setTweak('fontDisplay', v)}
          />
        </window.TweaksPanel>
      )}
    </div>
  );
};

const LoadingScreen = ({ msg }) => (
  <div style={{
    minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexDirection: 'column', gap: 22, padding: 24,
  }}>
    <div className="anim-float">
      <Logo variant="mark" size="lg"/>
    </div>
    <div className="anim-glow font-display" style={{
      fontSize: 14, color: 'var(--gold-1)', letterSpacing: '0.4em',
    }}>{msg || '· · ·'}</div>
    <div className="row" style={{ opacity: 0.4, gap: 14 }}>
      <Suit kind="spade" size={12}/>
      <Suit kind="heart" size={12} style={{ color: 'var(--red)' }}/>
      <Suit kind="diamond" size={12} style={{ color: 'var(--red)' }}/>
      <Suit kind="club" size={12}/>
    </div>
  </div>
);

window.LoadingScreen = LoadingScreen;
window.App = App;

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

/* Register service worker (PWA) — only when served from a real origin (https/localhost) */
if ('serviceWorker' in navigator && !location.origin.includes('null') && location.protocol !== 'file:') {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('sw.js').catch(() => {});
    // Auto-reload when SW pushes a new version
    navigator.serviceWorker.addEventListener('message', e => {
      if (e.data && e.data.type === 'SW_UPDATED') {
        // Only reload if not in the middle of a game session
        if (!S.currentGame) window.location.reload();
      }
    });
  });
}