// Root app

const LoadingScreen = () => (
  <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', background: 'var(--bg)' }}>
    <div style={{ textAlign: 'center' }}>
      <div style={{ margin: '0 auto 16px', width: 56, height: 56, fontSize: 22, borderRadius: 14, display: 'grid', placeItems: 'center', background: 'linear-gradient(160deg, var(--gold), var(--gold-deep))', color: '#1a1306', fontFamily: 'Cinzel, serif', fontWeight: 800 }}>XP</div>
      <div className="eyebrow mana">carregando campanha…</div>
    </div>
  </div>
);

const App = () => {
  const s = useGameState();

  React.useEffect(() => {
    if (s.user) {
      document.documentElement.setAttribute('data-theme', s.user.theme || 'dark');
    }
  }, [s.user?.theme]);

  if (s.authLoading) return <LoadingScreen />;
  if (!s.user)       return <AuthScreen login={s.login} register={s.register} />;

  const theme    = s.user.theme || 'dark';
  const setTheme = (t) => s.updateUser({ theme: t });
  const open     = s.quests.filter((q) => q.status === 'open' && (q.recurrence ? isRecurringDueToday(q) : q.deadline === 'Hoje')).length;

  let screen = null;
  switch (s.route) {
    case 'home':     screen = <Home s={s} />;                                         break;
    case 'quests':   screen = <QuestsScreen s={s} />;                                 break;
    case 'badges':   screen = <BadgesScreen s={s} />;                                 break;
    case 'rank':     screen = <RankScreen s={s} />;                                   break;
    case 'profile':  screen = <ProfileScreen s={s} />;                                break;
    case 'settings': screen = <SettingsScreen s={s} theme={theme} setTheme={setTheme} />; break;
    default:         screen = <Home s={s} />;
  }

  return (
    <div className="app">
      <Sidebar
        route={s.route}
        setRoute={s.setRoute}
        unread={open || null}
        user={s.user}
        onLogout={s.logout}
      />
      <main className="main">{screen}</main>

      {s.showForge && <Forge onClose={() => s.setShowForge(false)} onCreate={s.addQuest} />}
      {s.celeb && <LevelUp newLevel={s.celeb.newLevel} onDone={s.dismissCeleb} />}
      <Toasts toasts={s.toasts} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aparência">
          <TweakRadio
            label="Tema"
            value={theme}
            onChange={setTheme}
            options={[
              { label: 'Caverna',    value: 'dark'  },
              { label: 'Pergaminho', value: 'light' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Atalhos">
          <TweakButton onClick={() => s.setShowForge(true)}>Forjar nova missão</TweakButton>
          <TweakButton onClick={() => {
            const q = s.quests.find((x) => x.status === 'open');
            if (q) s.completeQuest(q.id);
          }}>Concluir próxima missão</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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