mockupAWS/frontend/src/App.tsx

import { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryProvider } from './providers/QueryProvider';
import { ThemeProvider } from './providers/ThemeProvider';
import { AuthProvider } from './contexts/AuthContext';
import { I18nProvider } from './providers/I18nProvider';
import { Toaster } from '@/components/ui/toaster';
import { Layout } from './components/layout/Layout';
import { ProtectedRoute } from './components/auth/ProtectedRoute';
import { PageLoader } from './components/ui/page-loader';
import { OnboardingProvider } from './components/onboarding/OnboardingProvider';
import { KeyboardShortcutsProvider } from './components/keyboard/KeyboardShortcutsProvider';
import { CommandPalette } from './components/command-palette/CommandPalette';

// Lazy load pages for code splitting
const Dashboard = lazy(() => import('./pages/Dashboard').then(m => ({ default: m.Dashboard })));
const ScenariosPage = lazy(() => import('./pages/ScenariosPage').then(m => ({ default: m.ScenariosPage })));
const ScenarioDetail = lazy(() => import('./pages/ScenarioDetail').then(m => ({ default: m.ScenarioDetail })));
const Compare = lazy(() => import('./pages/Compare').then(m => ({ default: m.Compare })));
const Reports = lazy(() => import('./pages/Reports').then(m => ({ default: m.Reports })));
const Login = lazy(() => import('./pages/Login').then(m => ({ default: m.Login })));
const Register = lazy(() => import('./pages/Register').then(m => ({ default: m.Register })));
const ForgotPassword = lazy(() => import('./pages/ForgotPassword').then(m => ({ default: m.ForgotPassword })));
const ResetPassword = lazy(() => import('./pages/ResetPassword').then(m => ({ default: m.ResetPassword })));
const SettingsLayout = lazy(() => import('./pages/settings/SettingsLayout').then(m => ({ default: m.SettingsLayout })));
const SettingsProfile = lazy(() => import('./pages/settings/SettingsProfile').then(m => ({ default: m.SettingsProfile })));
const SettingsPassword = lazy(() => import('./pages/settings/SettingsPassword').then(m => ({ default: m.SettingsPassword })));
const SettingsNotifications = lazy(() => import('./pages/settings/SettingsNotifications').then(m => ({ default: m.SettingsNotifications })));
const SettingsAccount = lazy(() => import('./pages/settings/SettingsAccount').then(m => ({ default: m.SettingsAccount })));
const ApiKeys = lazy(() => import('./pages/ApiKeys').then(m => ({ default: m.ApiKeys })));
const AnalyticsDashboard = lazy(() => import('./pages/AnalyticsDashboard').then(m => ({ default: m.AnalyticsDashboard })));
const NotFound = lazy(() => import('./pages/NotFound').then(m => ({ default: m.NotFound })));

// Wrapper for protected routes that need the main layout
function ProtectedLayout() {
  return (
    <ProtectedRoute>
      <Layout />
    </ProtectedRoute>
  );
}

// Wrapper for routes with providers (outside Router)
function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <I18nProvider>
      <ThemeProvider defaultTheme="system">
        <QueryProvider>
          <AuthProvider>
            {children}
          </AuthProvider>
        </QueryProvider>
      </ThemeProvider>
    </I18nProvider>
  );
}

// Wrapper for providers that need Router context
function RouterProviders({ children }: { children: React.ReactNode }) {
  return (
    <OnboardingProvider>
      <KeyboardShortcutsProvider>
        {children}
        <CommandPalette />
      </KeyboardShortcutsProvider>
    </OnboardingProvider>
  );
}

function App() {
  return (
    <AppProviders>
      <BrowserRouter>
        <RouterProviders>
          <Suspense fallback={<PageLoader />}>
            <Routes>
              {/* Public routes */}
              <Route path="/login" element={<Login />} />
              <Route path="/register" element={<Register />} />
              <Route path="/forgot-password" element={<ForgotPassword />} />
              <Route path="/reset-password" element={<ResetPassword />} />
              
            {/* Protected routes with layout */}
            <Route path="/" element={<ProtectedLayout />}>
              <Route index element={<Dashboard />} />
              <Route path="scenarios" element={<ScenariosPage />} />
              <Route path="scenarios/:id" element={<ScenarioDetail />} />
              <Route path="scenarios/:id/reports" element={<Reports />} />
              <Route path="compare" element={<Compare />} />
              <Route
                path="settings"
                element={
                  <SettingsLayout>
                    <Routes>
                      <Route index element={<Navigate to="/settings/profile" replace />} />
                      <Route path="profile" element={<SettingsProfile />} />
                      <Route path="password" element={<SettingsPassword />} />
                      <Route path="notifications" element={<SettingsNotifications />} />
                      <Route path="account" element={<SettingsAccount />} />
                      <Route path="api-keys" element={<ApiKeys />} />
                    </Routes>
                  </SettingsLayout>
                }
              />
              <Route path="analytics" element={<AnalyticsDashboard />} />
            </Route>
              
              {/* 404 */}
              <Route path="*" element={<NotFound />} />
            </Routes>
          </Suspense>
        </RouterProviders>
        <Toaster />
      </BrowserRouter>
    </AppProviders>
  );
}

export default App;