import React, { useState, Suspense, lazy, useCallback } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { ThemeProvider } from "next-themes";
import Header from "./components/layout/Header";
import BottomNav from "./components/layout/BottomNav";
import Footer from "./components/layout/Footer";
import SearchModal from "./components/layout/SearchModal";
import MenuSheet from "./components/layout/MenuSheet";
import PageLoader from "./components/ui/PageLoader";

// Página principal
import Home from "./pages/Index";

// Lazy loading de páginas
const SoporteVital = lazy(() => import("./pages/SoporteVital"));
const Patologias = lazy(() => import("./pages/Patologias"));
const Escena = lazy(() => import("./pages/Escena"));
const Farmacos = lazy(() => import("./pages/Farmacos"));
const Herramientas = lazy(() => import("./pages/Herramientas"));
const Material = lazy(() => import("./pages/Material"));
const Telefono = lazy(() => import("./pages/Telefono"));
const Comunicacion = lazy(() => import("./pages/Comunicacion"));
const ManualIndex = lazy(() => import("./pages/ManualIndex"));
const RCP = lazy(() => import("./pages/RCP"));
const Ictus = lazy(() => import("./pages/Ictus"));
const Shock = lazy(() => import("./pages/Shock"));
const ViaAerea = lazy(() => import("./pages/ViaAerea"));
const Acerca = lazy(() => import("./pages/Acerca"));
const Privacidad = lazy(() => import("./pages/Privacidad"));
const Protocolo = lazy(() => import("./pages/Protocolo"));
const NotFound = lazy(() => import("./pages/NotFound"));
const Ajustes = lazy(() => import("./pages/Ajustes"));
const Galeria = lazy(() => import("./pages/Galeria"));
const Historial = lazy(() => import("./pages/Historial"));
const Urgencias = lazy(() => import("./pages/Urgencias"));
const Parto = lazy(() => import("./pages/Parto"));
const AvisoLegal = lazy(() => import("./pages/AvisoLegal"));
const DescargoResponsabilidad = lazy(() => import("./pages/DescargoResponsabilidad"));
const Favoritos = lazy(() => import("./pages/Favoritos"));
const GlasgowCalculator = lazy(() => import("./pages/GlasgowCalculator"));
const TriageStart = lazy(() => import("./pages/TriageStart"));
const BurnCalculator = lazy(() => import("./pages/BurnCalculator"));
const DoseCalculator = lazy(() => import("./pages/DoseCalculator"));
const MediaAdmin = lazy(() => import("./pages/admin/MediaAdmin"));
const ProtocolListAdmin = lazy(() => import("./pages/admin/ProtocolListAdmin"));

// Wrapper para pasar props a Home
const HomeWrapper = ({ onSearchClick }: { onSearchClick: () => void }) => {
  return <Home onSearchClick={onSearchClick} />;
};

const App = () => {
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const handleSearchClick = useCallback(() => {
    setIsSearchOpen(true);
  }, []);

  const handleMenuClick = useCallback(() => {
    setIsMenuOpen(true);
  }, []);

  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <div className="min-h-screen bg-background flex flex-col">
          <Header
            onSearchClick={handleSearchClick}
            onMenuClick={handleMenuClick}
          />
          <main className="flex-1 container mx-auto px-4 py-6 max-w-4xl">
            <Suspense fallback={<PageLoader />}>
              <Routes>
                <Route path="/" element={<HomeWrapper onSearchClick={handleSearchClick} />} />
                <Route path="/soporte-vital" element={<SoporteVital />} />
                <Route path="/patologias" element={<Patologias />} />
                <Route path="/escena" element={<Escena />} />
                <Route path="/farmacos" element={<Farmacos />} />
                <Route path="/herramientas" element={<Herramientas />} />
                <Route path="/material" element={<Material />} />
                <Route path="/telefono" element={<Telefono />} />
                <Route path="/comunicacion" element={<Comunicacion />} />
                <Route path="/manual" element={<ManualIndex />} />
                <Route path="/rcp" element={<RCP />} />
                <Route path="/ictus" element={<Ictus />} />
                <Route path="/shock" element={<Shock />} />
                <Route path="/via-aerea" element={<ViaAerea />} />
                <Route path="/acerca" element={<Acerca />} />
                <Route path="/ajustes" element={<Ajustes />} />
                <Route path="/favoritos" element={<Favoritos />} />
                <Route path="/historial" element={<Historial />} />
                <Route path="/urgencias" element={<Urgencias />} />
                <Route path="/parto" element={<Parto />} />
                <Route path="/aviso-legal" element={<AvisoLegal />} />
                <Route path="/descargo-responsabilidad" element={<DescargoResponsabilidad />} />
                <Route path="/galeria" element={<Galeria />} />
                <Route path="/privacidad" element={<Privacidad />} />
                <Route path="/herramientas/glasgow" element={<GlasgowCalculator />} />
                <Route path="/herramientas/triage" element={<TriageStart />} />
                <Route path="/herramientas/quemados" element={<BurnCalculator />} />
                <Route path="/herramientas/dosis" element={<DoseCalculator />} />
                <Route path="/protocolo/:id" element={<Protocolo />} />
                <Route path="/admin/media" element={<MediaAdmin />} />
                <Route path="/admin/protocols" element={<ProtocolListAdmin />} />
                <Route path="*" element={<NotFound />} />
              </Routes>
            </Suspense>
          </main>
          <Footer />
          <BottomNav />
        </div>
        
        {/* Modals */}
        <SearchModal isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
        <MenuSheet isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
      </BrowserRouter>
    </ThemeProvider>
  );
};

export default App;