bakery-ia/frontend/src/router/AppRouter.tsx

import React, { Suspense } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { ProtectedRoute } from './ProtectedRoute';
import { LoadingSpinner } from '../components/shared/LoadingSpinner';
import { AppShell } from '../components/layout';

// Lazy load the pages we actually have
const LandingPage = React.lazy(() => import('../pages/public/LandingPage'));
const LoginPage = React.lazy(() => import('../pages/public/LoginPage'));
const RegisterPage = React.lazy(() => import('../pages/public/RegisterPage'));
const DashboardPage = React.lazy(() => import('../pages/app/DashboardPage'));

// Operations pages
const InventoryPage = React.lazy(() => import('../pages/app/operations/inventory/InventoryPage'));
const ProductionPage = React.lazy(() => import('../pages/app/operations/production/ProductionPage'));
const RecipesPage = React.lazy(() => import('../pages/app/operations/recipes/RecipesPage'));
const ProcurementPage = React.lazy(() => import('../pages/app/operations/procurement/ProcurementPage'));
const SuppliersPage = React.lazy(() => import('../pages/app/operations/suppliers/SuppliersPage'));
const OrdersPage = React.lazy(() => import('../pages/app/operations/orders/OrdersPage'));
const POSPage = React.lazy(() => import('../pages/app/operations/pos/POSPage'));

// Analytics pages
const ForecastingPage = React.lazy(() => import('../pages/app/analytics/forecasting/ForecastingPage'));
const SalesAnalyticsPage = React.lazy(() => import('../pages/app/analytics/sales-analytics/SalesAnalyticsPage'));
const AIInsightsPage = React.lazy(() => import('../pages/app/analytics/ai-insights/AIInsightsPage'));
const PerformanceAnalyticsPage = React.lazy(() => import('../pages/app/analytics/performance/PerformanceAnalyticsPage'));


// Settings pages
const ProfilePage = React.lazy(() => import('../pages/app/settings/profile/ProfilePage'));
const BakeryConfigPage = React.lazy(() => import('../pages/app/settings/bakery-config/BakeryConfigPage'));
const TeamPage = React.lazy(() => import('../pages/app/settings/team/TeamPage'));

// Database pages
const DatabasePage = React.lazy(() => import('../pages/app/database/DatabasePage'));
const ModelsConfigPage = React.lazy(() => import('../pages/app/database/models/ModelsConfigPage'));

// Data pages
const WeatherPage = React.lazy(() => import('../pages/app/data/weather/WeatherPage'));
const TrafficPage = React.lazy(() => import('../pages/app/data/traffic/TrafficPage'));
const EventsPage = React.lazy(() => import('../pages/app/data/events/EventsPage'));

// Onboarding pages
const OnboardingPage = React.lazy(() => import('../pages/onboarding/OnboardingPage'));

export const AppRouter: React.FC = () => {
  return (
    <Suspense fallback={<LoadingSpinner overlay text="Cargando aplicación..." />}>
      <Routes>
        {/* Public Routes */}
        <Route path="/" element={<LandingPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
        
        {/* Protected Routes with AppShell Layout */}
        <Route 
          path="/app" 
          element={
            <ProtectedRoute>
              <AppShell>
                <DashboardPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/dashboard" 
          element={
            <ProtectedRoute>
              <AppShell>
                <DashboardPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />

        {/* Operations Routes - Business Operations Only */}
        <Route
          path="/app/operations/procurement"
          element={
            <ProtectedRoute>
              <AppShell>
                <ProcurementPage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/operations/production"
          element={
            <ProtectedRoute>
              <AppShell>
                <ProductionPage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/operations/pos"
          element={
            <ProtectedRoute>
              <AppShell>
                <POSPage />
              </AppShell>
            </ProtectedRoute>
          }
        />

        {/* Database Routes - Current Bakery Status */}
        <Route
          path="/app/database"
          element={
            <ProtectedRoute>
              <AppShell>
                <DatabasePage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/database/recipes"
          element={
            <ProtectedRoute>
              <AppShell>
                <RecipesPage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/database/orders"
          element={
            <ProtectedRoute>
              <AppShell>
                <OrdersPage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/database/suppliers"
          element={
            <ProtectedRoute>
              <AppShell>
                <SuppliersPage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/database/inventory"
          element={
            <ProtectedRoute>
              <AppShell>
                <InventoryPage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/database/bakery-config"
          element={
            <ProtectedRoute>
              <AppShell>
                <BakeryConfigPage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/database/team"
          element={
            <ProtectedRoute>
              <AppShell>
                <TeamPage />
              </AppShell>
            </ProtectedRoute>
          }
        />
        <Route
          path="/app/database/models"
          element={
            <ProtectedRoute>
              <AppShell>
                <ModelsConfigPage />
              </AppShell>
            </ProtectedRoute>
          }
        />

        {/* Analytics Routes */}
        <Route 
          path="/app/analytics/forecasting" 
          element={
            <ProtectedRoute>
              <AppShell>
                <ForecastingPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/analytics/sales" 
          element={
            <ProtectedRoute>
              <AppShell>
                <SalesAnalyticsPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/analytics/ai-insights" 
          element={
            <ProtectedRoute>
              <AppShell>
                <AIInsightsPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/analytics/performance" 
          element={
            <ProtectedRoute>
              <AppShell>
                <PerformanceAnalyticsPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />

        
        {/* Settings Routes */}
        <Route 
          path="/app/settings/profile" 
          element={
            <ProtectedRoute>
              <AppShell>
                <ProfilePage />
              </AppShell>
            </ProtectedRoute>
          } 
        />

        {/* Data Routes */}
        <Route 
          path="/app/data/weather" 
          element={
            <ProtectedRoute>
              <AppShell>
                <WeatherPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/data/traffic" 
          element={
            <ProtectedRoute>
              <AppShell>
                <TrafficPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/data/events" 
          element={
            <ProtectedRoute>
              <AppShell>
                <EventsPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />

        {/* Onboarding Route - Protected but without AppShell */}
        <Route 
          path="/app/onboarding" 
          element={
            <ProtectedRoute>
              <OnboardingPage />
            </ProtectedRoute>
          } 
        />

        {/* Default redirects */}
        <Route path="/app/*" element={<Navigate to="/app/dashboard" replace />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </Suspense>
  );
};

export default AppRouter;