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 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'));

// Communications pages
const AlertsPage = React.lazy(() => import('../pages/app/communications/alerts/AlertsPage'));
const NotificationsPage = React.lazy(() => import('../pages/app/communications/notifications/NotificationsPage'));
const PreferencesPage = React.lazy(() => import('../pages/app/communications/preferences/PreferencesPage'));

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

// 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 OnboardingSetupPage = React.lazy(() => import('../pages/app/onboarding/setup/OnboardingSetupPage'));
const OnboardingUploadPage = React.lazy(() => import('../pages/app/onboarding/upload/OnboardingUploadPage'));
const OnboardingAnalysisPage = React.lazy(() => import('../pages/app/onboarding/analysis/OnboardingAnalysisPage'));
const OnboardingReviewPage = React.lazy(() => import('../pages/app/onboarding/review/OnboardingReviewPage'));

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 */}
        <Route 
          path="/app/operations/inventory" 
          element={
            <ProtectedRoute>
              <AppShell>
                <InventoryPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/operations/production" 
          element={
            <ProtectedRoute>
              <AppShell>
                <ProductionPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/operations/recipes" 
          element={
            <ProtectedRoute>
              <AppShell>
                <RecipesPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/operations/procurement" 
          element={
            <ProtectedRoute>
              <AppShell>
                <ProcurementPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/operations/orders" 
          element={
            <ProtectedRoute>
              <AppShell>
                <OrdersPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/operations/pos" 
          element={
            <ProtectedRoute>
              <AppShell>
                <POSPage />
              </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>
          } 
        />

        {/* Communications Routes */}
        <Route 
          path="/app/communications/alerts" 
          element={
            <ProtectedRoute>
              <AppShell>
                <AlertsPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/communications/notifications" 
          element={
            <ProtectedRoute>
              <AppShell>
                <NotificationsPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/communications/preferences" 
          element={
            <ProtectedRoute>
              <AppShell>
                <PreferencesPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />

        {/* Settings Routes */}
        <Route 
          path="/app/settings/profile" 
          element={
            <ProtectedRoute>
              <AppShell>
                <ProfilePage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/settings/bakery-config" 
          element={
            <ProtectedRoute>
              <AppShell>
                <BakeryConfigPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/settings/system" 
          element={
            <ProtectedRoute>
              <AppShell>
                <SystemSettingsPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/settings/team" 
          element={
            <ProtectedRoute>
              <AppShell>
                <TeamPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/settings/training" 
          element={
            <ProtectedRoute>
              <AppShell>
                <TrainingPage />
              </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 Routes */}
        <Route 
          path="/app/onboarding/setup" 
          element={
            <ProtectedRoute>
              <AppShell>
                <OnboardingSetupPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/onboarding/upload" 
          element={
            <ProtectedRoute>
              <AppShell>
                <OnboardingUploadPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/onboarding/analysis" 
          element={
            <ProtectedRoute>
              <AppShell>
                <OnboardingAnalysisPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/app/onboarding/review" 
          element={
            <ProtectedRoute>
              <AppShell>
                <OnboardingReviewPage />
              </AppShell>
            </ProtectedRoute>
          } 
        />

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

export default AppRouter;