import React, { useState } from 'react';
import './styles/globals.css';
import { Sidebar, Header } from './components/Layout';
import { DashboardCards } from './components/Dashboard';
import RequestTable from './components/Requests/RequestTable';
import RequestForm from './components/Requests/RequestForm';
import ScheduledPage from './components/Scheduled/ScheduledPage';
import NewRequestPage from './components/Requests/NewRequestPage';
import HistoryPage from './components/History/HistoryPage';

function App() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [activeView, setActiveView] = useState('dashboard'); // 'dashboard' | 'scheduled' | 'create'

  const handleToggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
  const handleNavigate = (key) => {
    setActiveView(key);
    setIsMobileMenuOpen(false);
  };

  const headerTitle = activeView === 'scheduled'
    ? 'Solicitudes Programadas'
    : activeView === 'create'
    ? 'Nueva Solicitud'
    : activeView === 'history'
    ? 'Historial'
    : 'Dashboard';

  return (
    <div className="container">
      <Sidebar 
        isMobileMenuOpen={isMobileMenuOpen} 
        onToggleMobileMenu={handleToggleMobileMenu}
        activeView={activeView}
        onNavigate={handleNavigate}
      />
      <main className="main-content">
        <Header title={headerTitle} />
        {activeView === 'scheduled' ? (
          <ScheduledPage />
        ) : activeView === 'create' ? (
          <NewRequestPage />
        ) : activeView === 'history' ? (
          <HistoryPage />
        ) : (
          <section className="content-wrapper">
            <DashboardCards />
            <div className="content-grid">
              <RequestForm />
              <RequestTable />
            </div>
          </section>
        )}
      </main>
    </div>
  );
}

export default App;