import { Routes, Route, Navigate } from 'react-router-dom';
import RequireAuth from '@rbac/RequireAuth';
import { RequirePermission } from '@rbac/Can';
import DefaultLayout from '@layouts/DefaultLayout';
import { buildRoutes } from '@/routes';
import { useModules } from '@/modules';
import Login from '@pages/Login';
import Unauthorized from '@pages/Unauthorized';
import NotFound from '@pages/NotFound';

export default function App() {
  const routes = buildRoutes(useModules());
  return (
    <Routes>
      {/* public */}
      <Route path="/login" element={<Login />} />
      <Route path="/unauthorized" element={<Unauthorized />} />

      {/* protected */}
      <Route element={<RequireAuth />}>
        <Route element={<DefaultLayout />}>
          {routes.map((r) => (
            <Route
              key={r.path}
              path={r.path}
              element={<RequirePermission module={r.module} action={r.action}>{r.element}</RequirePermission>}
            />
          ))}
        </Route>
      </Route>

      <Route path="/404" element={<NotFound />} />
      <Route path="*" element={<Navigate to="/404" replace />} />
    </Routes>
  );
}