import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';

// Lazy load all page components for code splitting
const Login = lazy(() => import('@/pages/Login'));
const Dashboard = lazy(() => import('@/pages/Dashboard'));
const DealerProfile = lazy(() => import('@/pages/DealerProfile'));
const ScoreCard = lazy(() => import('@/pages/ScoreCard'));
const NotFound = lazy(() => import('@/components/common/NotFound'));

// Suspense fallback component
const PageLoader = () => (
  <div className="min-h-screen bg-[#E8F5E9]/30 backdrop-blur-sm flex items-center justify-center font-poppins">
    <div className="flex flex-col items-center gap-4">
      <LoadingSpinner size="lg" label="Loading Dealer 360..." />
      <div className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60 font-semibold">
        Secure Credit Gateway
      </div>
    </div>
  </div>
);

export const AppRoutes = () => {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<Dashboard />} />
        <Route path="/dealer/:id" element={<DealerProfile />} />
        <Route path="/dealer/:id/scorecard" element={<ScoreCard />} />
        {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Suspense>
  );
};

export default AppRoutes;