// Main app: hash-routed SPA with Supabase auth gate. Routes only render when
// the user is signed in; otherwise LoginScreen takes over.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2540d9",
  "vibe": "paper",
  "density": "regular"
}/*EDITMODE-END*/;

const ROUTES = [
  { pattern: '/', component: HomeScreen },
  { pattern: '/library', component: LibraryScreen },
  { pattern: '/calendar', component: CalendarScreen },
  { pattern: '/subject/:subjectId', component: SubjectDetailScreen },
  { pattern: '/subject/:subjectId/upload', component: UploadScreen },
  { pattern: '/subject/:subjectId/guide/:guideId', component: GuideScreen },
  { pattern: '/subject/:subjectId/guide/:guideId/generate', component: GenerationScreen },
  { pattern: '/subject/:subjectId/guide/:guideId/flashcards', component: FlashcardScreen },
  { pattern: '/subject/:subjectId/guide/:guideId/quiz', component: QuizScreen },
];

function Splash() {
  return (
    <div style={{
      minHeight: '100vh', width: '100vw',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'var(--bg)', color: 'var(--ink-mute)', fontSize: 12,
    }}>
      <span className="pulse">studybuddy · loading…</span>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const auth = useAuth();

  React.useEffect(() => {
    document.documentElement.style.setProperty('--blue', t.accent);
  }, [t.accent]);

  if (!auth.ready) return <Splash />;
  if (!auth.user) return <LoginScreen />;

  return (
    <>
      <div style={{ width: '100vw', height: '100vh', overflow: 'hidden' }}>
        <Router routes={ROUTES} fallback={HomeScreen} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={t.accent} onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="Vibe" value={t.vibe}
          options={[{value:'paper',label:'Paper'},{value:'clean',label:'Clean'},{value:'dark',label:'Dark'}]}
          onChange={(v) => setTweak('vibe', v)} />
        <TweakSection label="Presets" />
        <TweakButton label="Default blue" onClick={() => setTweak('accent', '#2540d9')} />
        <TweakButton label="Forest green" secondary onClick={() => setTweak('accent', '#1f7a4f')} />
        <TweakButton label="Warm coral" secondary onClick={() => setTweak('accent', '#c23b22')} />
      </TweaksPanel>
    </>
  );
}

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