import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import { MotionConfig } from 'framer-motion';
import Layout from './components/Layout.tsx';

// Lazy load pages to decrease initial bundle size
const Dashboard = lazy(() => import('./pages/Dashboard.tsx'));
const BaseMenu = lazy(() => import('./pages/BaseMenu.tsx'));
const Products = lazy(() => import('./pages/Products.tsx'));
const Orders = lazy(() => import('./pages/Orders.tsx'));
const ArchivedOrders = lazy(() => import('./pages/ArchivedOrders.tsx'));
const Customers = lazy(() => import('./pages/Customers.tsx'));
const Login = lazy(() => import('./pages/Login.tsx'));
const Managers = lazy(() => import('./pages/Managers.tsx'));
const Stalls = lazy(() => import('./pages/Stalls.tsx'));
const Staff = lazy(() => import('./pages/Staff.tsx'));
const Terminals = lazy(() => import('./pages/Terminals.tsx'));
const Vendors = lazy(() => import('./pages/Vendors.tsx'));
const Purchases = lazy(() => import('./pages/Purchases.tsx'));
const VendorDashboard = lazy(() => import('./pages/VendorDashboard.tsx'));
const PurchaseAnalytics = lazy(() => import('./pages/PurchaseAnalytics.tsx'));
const Bills = lazy(() => import('./pages/Bills.tsx'));
const PurchaseSummary = lazy(() => import('./pages/PurchaseSummary.tsx'));
const IntentDashboard = lazy(() => import('./pages/IntentDashboard.tsx'));
const IntentList = lazy(() => import('./pages/IntentList.tsx'));
const NewArrivals = lazy(() => import('./pages/NewArrivals.tsx'));
const Reports = lazy(() => import('./pages/Reports.tsx'));
const Feedback = lazy(() => import('./pages/Feedback.tsx'));
const Ritz = lazy(() => import('./pages/Ritz.tsx'));
const RitzCirculation = lazy(() => import('./pages/RitzCirculation.tsx'));
const ManageWallets = lazy(() => import('./pages/ManageWallets.tsx'));
const ManageCoupons = lazy(() => import('./pages/ManageCoupons.tsx'));
const Settings = lazy(() => import('./pages/Settings.tsx'));
const NotFound = lazy(() => import('./pages/NotFound.tsx'));

const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const isLoggedIn = sessionStorage.getItem('isLoggedIn') === 'true';
  return isLoggedIn ? <>{children}</> : <Navigate to="/login" replace />;
};

const LoadingFallback = () => (
  <div className="min-h-screen flex items-center justify-center bg-slate-50/50">
    <div className="text-primary font-black uppercase tracking-widest text-sm animate-pulse">
      Loading...
    </div>
  </div>
);

function App() {
  return (
    <MotionConfig skipAnimations={true}>
      <Router>
        <Suspense fallback={<LoadingFallback />}>
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/" element={
              <ProtectedRoute>
                <Layout />
              </ProtectedRoute>
            }>
              <Route index element={<Navigate to="/dashboard" replace />} />
              <Route path="dashboard" element={<Dashboard />} />
              
              {/* Sale */}
              <Route path="sale/orders" element={<Orders />} />
              <Route path="sale/archived-bills" element={<ArchivedOrders />} />
              
              {/* Customers */}
              <Route path="customers/orders" element={<Customers />} />
              
              {/* Purchases */}
              <Route path="purchases/dashboard" element={<VendorDashboard />} />
              <Route path="purchases/orders" element={<Purchases />} />
              <Route path="purchases/summary" element={<PurchaseSummary />} />
              <Route path="purchases/bills" element={<Bills />} />
              <Route path="purchases/vendor" element={<Vendors />} />
              <Route path="purchases/analytics" element={<PurchaseAnalytics />} />
              
              {/* Intent */}
              <Route path="purchases/intent/orders-dashboard" element={<IntentDashboard title="ORDER DASHBOARD" />} />
              <Route path="purchases/intent/receives-dashboard" element={<IntentDashboard title="RECEIVABLE DASHBOARD" />} />
              <Route path="purchases/intent/orders" element={<IntentList title="ORDERS" />} />
              <Route path="purchases/intent/receives" element={<IntentList title="RECEIVES" />} />

              {/* Inventory */}
              <Route path="inventory/new-arrivals" element={<NewArrivals />} />
              <Route path="inventory/base" element={<BaseMenu />} />
              <Route path="inventory/products" element={<Products />} />
              <Route path="inventory/online" element={<Navigate to="/inventory/products" replace />} />
              
              {/* Others */}
              <Route path="reports" element={<Reports />} />
              <Route path="feedback" element={<Feedback />} />
              <Route path="ritz/overview" element={<Ritz />} />
              <Route path="ritz/circulation" element={<RitzCirculation />} />
              <Route path="ritz/wallets" element={<ManageWallets />} />
              <Route path="ritz/coupons" element={<ManageCoupons />} />

              {/* Stores */}
              <Route path="stores/terminals" element={<Terminals />} />
              <Route path="stores/managers" element={<Managers />} />
              <Route path="stores/staffs" element={<Staff />} />
              <Route path="stores/stalls" element={<Stalls />} />

              {/* Settings */}
              <Route path="settings" element={<Settings />} />
            </Route>
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Suspense>
      </Router>
    </MotionConfig>
  );
}

export default App;