import React, { Suspense } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { ThemeProvider } from "@/contexts/ThemeContext";
import { NotificationProvider } from "@/contexts/NotificationContext";
import { Toaster } from "@/components/ui/sonner";
import PWANotifications from "@/components/pwa/PWANotifications";
import BackToTop from "@/components/BackToTop";
import LoadingSpinner from "./components/ui/LoadingSpinner";
import OptimizedRoute from "./components/OptimizedRoute";
import ScrollToTop from "./components/ScrollToTop";

// Lazy loading das páginas públicas
const Home = React.lazy(() => import("./pages/Home"));
const Calculators = React.lazy(() => import("./pages/Calculators"));
const Apresentacao = React.lazy(() => import("./pages/Apresentacao"));
const Infoprodutos = React.lazy(() => import("./pages/Infoprodutos"));
const Blog = React.lazy(() => import("./pages/Blog"));
const FAQ = React.lazy(() => import("./pages/FAQ"));
const Guides = React.lazy(() => import("./pages/Guides"));
const HealthTips = React.lazy(() => import("./pages/HealthTips"));
const ReferenceTables = React.lazy(() => import("./pages/ReferenceTables"));
const ScientificBasis = React.lazy(() => import("./pages/ScientificBasis"));

// Lazy loading das calculadoras
const HRMax = React.lazy(() => import("./pages/calculators/HRMax"));
const BodyFat = React.lazy(() => import("./pages/calculators/BodyFat"));
const Macros = React.lazy(() => import("./pages/calculators/Macros"));
const CarbCycle = React.lazy(() => import("./pages/calculators/CarbCycle"));
const TMB = React.lazy(() => import("./pages/calculators/TMB"));
const Water = React.lazy(() => import("./pages/calculators/Water"));

const queryClient = new QueryClient();

const App = () => {
  return (
    <ThemeProvider defaultTheme="dark" storageKey="juniorcampos-ui-theme">
      <NotificationProvider>
        <QueryClientProvider client={queryClient}>
          <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
            <ScrollToTop />
            <Routes>
              {/* Página Principal */}
              <Route path="/" element={
                <OptimizedRoute loadingVariant="skeleton">
                  <Home />
                </OptimizedRoute>
              } />
              
              {/* Páginas Institucionais */}
              <Route path="/calculators" element={<Calculators />} />
              <Route path="/apresentacao" element={<Apresentacao />} />
              <Route path="/infoprodutos" element={<Infoprodutos />} />
              <Route path="/blog" element={<Blog />} />
              <Route path="/faq" element={<FAQ />} />
              <Route path="/guides" element={<Guides />} />
              <Route path="/health-tips" element={<HealthTips />} />
              <Route path="/reference-tables" element={<ReferenceTables />} />
              <Route path="/scientific-basis" element={<ScientificBasis />} />

              {/* Calculadoras */}
              <Route path="/tmb" element={<TMB />} />
              <Route path="/hrmax" element={<HRMax />} />
              <Route path="/body-fat" element={<BodyFat />} />
              <Route path="/macros" element={<Macros />} />
              <Route path="/carb-cycle" element={<CarbCycle />} />
              <Route path="/water" element={<Water />} />
              
              {/* Página 404 */}
              <Route path="*" element={
                <div style={{
                  minHeight: '100vh',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  textAlign: 'center',
                  fontFamily: 'Arial, sans-serif',
                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
                }}>
                  <div style={{
                    padding: '3rem',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderRadius: '16px',
                    boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
                    maxWidth: '500px'
                  }}>
                    <h1 style={{ 
                      fontSize: '3rem', 
                      marginBottom: '1rem', 
                      color: '#667eea',
                      fontWeight: 'bold'
                    }}>404</h1>
                    <h2 style={{ 
                      fontSize: '1.5rem', 
                      marginBottom: '1rem', 
                      color: '#333'
                    }}>Página não encontrada</h2>
                    <p style={{ 
                      color: '#666',
                      marginBottom: '2rem',
                      lineHeight: '1.6'
                    }}>A página que você está procurando não existe ou foi movida.</p>
                    <a 
                      href="/" 
                      style={{ 
                        display: 'inline-block',
                        padding: '12px 32px',
                        backgroundColor: '#667eea',
                        color: 'white',
                        textDecoration: 'none',
                        borderRadius: '8px',
                        fontWeight: '600',
                        transition: 'all 0.3s ease'
                      }}
                      onMouseOver={(e) => e.currentTarget.style.backgroundColor = '#764ba2'}
                      onMouseOut={(e) => e.currentTarget.style.backgroundColor = '#667eea'}
                    >
                      Voltar ao Início
                    </a>
                  </div>
                </div>
              } />
            </Routes>
            <PWANotifications />
            <BackToTop />
            <Toaster 
              position="top-right" 
              expand={true} 
              richColors 
              closeButton
            />
          </BrowserRouter>
        </QueryClientProvider>
      </NotificationProvider>
    </ThemeProvider>
  );
};

export default App;