import React, { Suspense } from 'react';
import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { Loader2 } from 'lucide-react';
import Layout from './components/Layout';
import { isAuthenticated, isSuperAdmin } from './dataService';

const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Products = React.lazy(() => import('./pages/Products'));
const ProductDetails = React.lazy(() => import('./pages/ProductDetails'));
const ProductGroupDetails = React.lazy(() => import('./pages/ProductGroupDetails'));
const Replenishment = React.lazy(() => import('./pages/Replenishment'));
const Cutting = React.lazy(() => import('./pages/Cutting'));
const ProductionOrders = React.lazy(() => import('./pages/ProductionOrders'));
const Supplies = React.lazy(() => import('./pages/Supplies'));
const Clients = React.lazy(() => import('./pages/Clients'));
const ClientDetails = React.lazy(() => import('./pages/ClientDetails'));
const Campaigns = React.lazy(() => import('./pages/Campaigns'));
const Rfm = React.lazy(() => import('./pages/Rfm'));
const Registrations = React.lazy(() => import('./pages/Registrations'));
const Login = React.lazy(() => import('./pages/Login'));
const AdminUsers = React.lazy(() => import('./pages/AdminUsers'));

function PrivateRoute({ children }: { children: React.ReactNode }) {
  const location = useLocation();
  if (!isAuthenticated()) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
}

function SuperAdminRoute({ children }: { children: React.ReactNode }) {
  if (!isSuperAdmin()) {
    return <Navigate to="/graph" replace />;
  }
  return children;
}

const RouteFallback = () => (
  <div className="flex min-h-screen items-center justify-center bg-dark-bg text-brand-primary">
    <Loader2 className="h-8 w-8 animate-spin" />
  </div>
);

function App() {
  return (
    <Suspense fallback={<RouteFallback />}>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<Navigate to="/graph" replace />} />
        <Route path="/" element={<PrivateRoute><Layout /></PrivateRoute>}>
          <Route path="graph" element={<Dashboard />} />
          <Route path="products" element={<Products />} />
          <Route path="products/groups/:groupKey" element={<ProductGroupDetails />} />
          <Route path="products/:id" element={<ProductDetails />} />
          <Route path="replenishment" element={<Replenishment />} />
          <Route path="cutting" element={<Cutting />} />
          <Route path="supplies" element={<Supplies />} />
          <Route path="supplies/:section" element={<Supplies />} />
          <Route path="stock" element={<Navigate to="/products" replace />} />
          <Route path="stock-alerts" element={<Navigate to="/products" replace />} />
          <Route path="production-orders" element={<ProductionOrders />} />
          <Route path="clients" element={<Clients />} />
          <Route path="clients/:clientToken" element={<ClientDetails />} />
          <Route path="rfm" element={<Rfm />} />
          <Route path="campaigns" element={<Campaigns />} />
          <Route path="registrations" element={<Registrations />} />
          <Route path="admin/users" element={<SuperAdminRoute><AdminUsers /></SuperAdminRoute>} />
        </Route>
      </Routes>
    </Suspense>
  );
}

export default App;