import { useState } from 'preact/hooks';
import './app.css';
import { Header } from './components/Header';
import { Sidebar } from './components/Sidebar';
import { VerificadorComponent } from './components/VerificadorComponent';
import { FlashcardComponent } from './components/FlashcardComponent';
import { FlashcardReviewComponent } from './components/FlashcardReviewComponent';
import { SpacedReviewComponent } from './components/SpacedReviewComponent';

export function App() {
  const [activeModule, setActiveModule] = useState<'home' | 'verificador' | 'flashcards' | 'revisao-flashcards' | 'revisao-espacada'>('home');

  return (
    <>
      <Header onGoHome={() => setActiveModule('home')} />
      <div class="main-layout">
        <Sidebar activeModule={activeModule} onModuleChange={setActiveModule} />
        <main class="content-area">
          <div style={{ display: activeModule === 'home' || !activeModule ? 'block' : 'none' }}>
            <div class="home-hero">
              <img src="/assets/mindforge-banner.png" alt="Mindforge Banner" style={{ maxWidth: '100%', height: 'auto', marginBottom: '2rem', borderRadius: '12px', boxShadow: '0 4px 15px rgba(0,0,0,0.5)', zIndex: -10 }} />
              <h1 class="hero-title">Mindforge - Forja Mental</h1>
              <p class="hero-subtitle">Sua ferramenta de estudos para concursos.</p>
            </div>
          </div>
          <div style={{ display: activeModule === 'verificador' ? 'block' : 'none', height: '100%', width: '100%' }}>
            <VerificadorComponent />
          </div>
          <div style={{ display: activeModule === 'flashcards' ? 'block' : 'none', height: '100%', width: '100%' }}>
            <FlashcardComponent />
          </div>
          <div style={{ display: activeModule === 'revisao-flashcards' ? 'block' : 'none', height: '100%', width: '100%' }}>
            <FlashcardReviewComponent />
          </div>
          <div style={{ display: activeModule === 'revisao-espacada' ? 'block' : 'none', height: '100%', width: '100%' }}>
            <SpacedReviewComponent />
          </div>
        </main>
      </div>
    </>
  );
}
