import { Suspense, lazy } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

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={
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }}>
          <div className="spinner" style={{ width: '32px', height: '32px', border: '3px solid #f1f5f9', borderTop: '3px solid #C01227', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
          <style>{`@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`}</style>
        </div>
      }
    >
      <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="/clients" 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>
  );
}