import { Routes, Route } from 'react-router-dom';
import { Suspense, lazy } from 'react';
import { CircularProgress, Box } from '@mui/material';
import Notifications from './components/Notifications';
import ProtectedRoute from './components/ProtectedRoute';
import { StripeProvider } from './context/StripeContext';

// Layouts
import MainLayout from './layouts/MainLayout';
import AuthLayout from './layouts/AuthLayout';
import AdminLayout from './layouts/AdminLayout';

// Pages - lazy loaded to reduce initial bundle size
const HomePage = lazy(() => import('@pages/HomePage'));
const ProductsPage = lazy(() => import('@pages/ProductsPage'));
const ProductDetailPage = lazy(() => import('@pages/ProductDetailPage'));
const CartPage = lazy(() => import('@pages/CartPage'));
const CheckoutPage = lazy(() => import('@pages/CheckoutPage'));
const PaymentSuccessPage = lazy(() => import('@pages/PaymentSuccessPage'));
const PaymentCancelPage = lazy(() => import('@pages/PaymentCancelPage'));
const LoginPage = lazy(() => import('@pages/LoginPage'));
const RegisterPage = lazy(() => import('@pages/RegisterPage'));
const VerifyPage = lazy(() => import('@pages/VerifyPage'));
const AdminDashboardPage = lazy(() => import('@pages/Admin/DashboardPage'));
const AdminProductsPage = lazy(() => import('@pages/Admin/ProductsPage'));
const AdminProductEditPage = lazy(() => import('@pages/Admin/ProductEditPage'));
const AdminCategoriesPage = lazy(() => import('@pages/Admin/CategoriesPage'));
const AdminCustomersPage = lazy(() => import('@pages/Admin/CustomersPage'));
const AdminOrdersPage = lazy(() => import('@pages/Admin/OrdersPage'));
const AdminSettingsPage = lazy(() => import('@pages/Admin/SettingsPage'));
const AdminReportsPage = lazy(() => import('@pages/Admin/ReportsPage'));
const UserOrdersPage = lazy(() => import('@pages/UserOrdersPage'));
const NotFoundPage = lazy(() => import('@pages/NotFoundPage'));

// Loading component for suspense fallback
const LoadingComponent = () => (
  <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
    <CircularProgress />
  </Box>
);

function App() {
  return (
    <StripeProvider>
      <Suspense fallback={<LoadingComponent />}>
        <Notifications />
        <Routes>
          {/* Main routes with MainLayout */}
          <Route path="/" element={<MainLayout />}>
            <Route path="account/orders" element={
              <ProtectedRoute>
                <UserOrdersPage />
              </ProtectedRoute>
            } />
            <Route index element={<HomePage />} />
            <Route path="products" element={<ProductsPage />} />
            <Route path="products/:id" element={<ProductDetailPage />} />
            <Route path="cart" element={
              <ProtectedRoute>
                <CartPage />
              </ProtectedRoute>
            } />
            <Route path="checkout" element={
              <ProtectedRoute>
                <CheckoutPage />
              </ProtectedRoute>
            } />
            {/* Payment success and cancel routes */}
            <Route path="checkout/success" element={
              <ProtectedRoute>
                <PaymentSuccessPage />
              </ProtectedRoute>
            } />
            <Route path="checkout/cancel" element={
              <ProtectedRoute>
                <PaymentCancelPage />
              </ProtectedRoute>
            } />
          </Route>

          {/* Auth routes with AuthLayout */}
          <Route path="/auth" element={<AuthLayout />}>
            <Route path="login" element={<LoginPage />} />
            <Route path="register" element={<RegisterPage />} />
          </Route>

          {/* Verification route - standalone page */}
          <Route path="/verify" element={<VerifyPage />} />

          {/* Admin routes with AdminLayout - protected for admins only */}
          <Route path="/admin" element={
            <ProtectedRoute requireAdmin={true} redirectTo="/">
              <AdminLayout />
            </ProtectedRoute>
          }>
            <Route index element={<AdminDashboardPage />} />
            <Route path="products" element={<AdminProductsPage />} />
            <Route path="products/:id" element={<AdminProductEditPage />} />
            <Route path="products/new" element={<AdminProductEditPage />} />
            <Route path="categories" element={<AdminCategoriesPage />} />
            <Route path="customers" element={<AdminCustomersPage />} />
            <Route path="settings" element={<AdminSettingsPage />} />
            <Route path="orders" element={<AdminOrdersPage />} />
            <Route path="reports" element={<AdminReportsPage />} />
          </Route>

          {/* Catch-all route for 404s */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </Suspense>
    </StripeProvider>
  );
}

export default App;