import { Suspense, lazy } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { Box, CircularProgress } from '@mui/material';

import MainLayout from '@/layout/MainLayout';
import MinimalLayout from '@/layout/MinimalLayout';

import AuthGuard from '@/components/AuthGuard';

const load = (factory) => {
  const C = lazy(factory);
  return (
    <Suspense
      fallback={
        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }}>
          <CircularProgress color="primary" />
        </Box>
      }
    >
      <C />
    </Suspense>
  );
};

export default function App() {
  return (
    <Routes>
      {/* Shell pages */}
      <Route element={<AuthGuard><MainLayout /></AuthGuard>}>
        <Route path="/dashboard" element={load(() => import('@/pages/Dashboard'))} />

        <Route path="/tenants" element={load(() => import('@/pages/tenants/Tenants'))} />
        
        <Route path="/survey" element={load(() => import('@/pages/survey/Survey.jsx'))} />
        
        <Route path="/pricing" element={load(() => import('@/pages/pricing/Pricing.jsx'))} />
        
        <Route path="/bookings" element={load(() => import('@/pages/bookings/Bookings'))} />

        <Route path="/team-users" element={load(() => import('@/pages/team/TeamUsers'))} />

        <Route path="/settings" element={load(() => import('@/pages/Settings'))} />
      </Route>

      {/* Full-bleed pages */}
      <Route element={<MinimalLayout />}>
        <Route path="/login" element={load(() => import('@/pages/auth/Login'))} />
        <Route path="/under-construction" element={load(() => import('@/pages/maintenance/UnderConstruction'))} />
        <Route path="/coming-soon" element={load(() => import('@/pages/maintenance/ComingSoon'))} />
        <Route path="/500" element={load(() => import('@/pages/maintenance/Error500'))} />
        <Route path="/404" element={load(() => import('@/pages/maintenance/Error404'))} />
      </Route>

      <Route path="/" element={<Navigate to="/dashboard" replace />} />
      <Route path="*" element={load(() => import('@/pages/maintenance/Error404'))} />
    </Routes>
  );
}
