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 (
    <div class="app">
      <Sidebar activeModule={activeModule} onModuleChange={setActiveModule} />
      <div class="main">
        <Header onGoHome={() => setActiveModule('home')} />
        <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: '1.5rem', borderRadius: '16px', boxShadow: '0 20px 60px rgba(76,48,12,.15)' }} />
            <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', width: '100%' }}>
          <VerificadorComponent />
        </div>
        <div style={{ display: activeModule === 'flashcards' ? 'block' : 'none', width: '100%' }}>
          <FlashcardComponent />
        </div>
        <div style={{ display: activeModule === 'revisao-flashcards' ? 'block' : 'none', width: '100%' }}>
          <FlashcardReviewComponent />
        </div>
        <div style={{ display: activeModule === 'revisao-espacada' ? 'block' : 'none', width: '100%' }}>
          <SpacedReviewComponent />
        </div>
      </div>
    </div>
  );
}
