import { AppLayout, LoadingOverlay, ScrollToTop } from "@repo/rdx-ui/components";
import { JSX, Suspense } from "react";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import { ErrorPage } from "./pages";
import { modules } from "./register-modules"; // Aquí ca

// Lazy load components
//const ErrorPage = lazy(() => import("./pages").then((m) => ({ default: m.ErrorPage })));

//const LogoutPage = lazy(() => import("./app").then((m) => ({ default: m.LogoutPage })));

/*const DealerLayout = lazy(() => import("./app").then((m) => ({ default: m.DealerLayout })));
const DealersList = lazy(() => import("./app").then((m) => ({ default: m.DealersList })));

const LoginPageWithLanguageSelector = lazy(() =>
  import("./app").then((m) => ({ default: m.LoginPageWithLanguageSelector }))
);

const QuoteCreate = lazy(() => import("./app").then((m) => ({ default: m.QuoteCreate })));
const QuoteEdit = lazy(() => import("./app").then((m) => ({ default: m.QuoteEdit })));
const SettingsEditor = lazy(() => import("./app").then((m) => ({ default: m.SettingsEditor })));
const SettingsLayout = lazy(() => import("./app").then((m) => ({ default: m.SettingsLayout })));
const CatalogLayout = lazy(() => import("./app").then((m) => ({ default: m.CatalogLayout })));
const CatalogList = lazy(() => import("./app").then((m) => ({ default: m.CatalogList })));
const DashboardPage = lazy(() => import("./app").then((m) => ({ default: m.DashboardPage })));
const QuotesLayout = lazy(() => import("./app").then((m) => ({ default: m.QuotesLayout })));
const QuotesList = lazy(() => import("./app").then((m) => ({ default: m.QuotesList })));*/

export const AppRoutes = (): JSX.Element => {
  return (
    <Router>
      <ScrollToTop />

      <Suspense fallback={<LoadingOverlay />}>
        <Routes>
          <Route element={<AppLayout />}>
            {/* Main Layout */}
            <Route index element={<ErrorPage />} />
            <Route path='/dashboard' element={<ErrorPage />} />
            <Route path='/settings' element={<ErrorPage />} />
            <Route path='/catalog' element={<ErrorPage />} />
            <Route path='/quotes' element={<ErrorPage />} />

            {/* Dynamic Module Routes */}

            {modules.map((module) => {
              if (module.routes) {
                return module.routes();
              }
              return null;
            })}
          </Route>

          {/* Auth Layout */}
          {/*<Route path="/signin" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />*/}

          {/* Fallback Route */}
          <Route path='*' element={<ErrorPage />} />
        </Routes>
      </Suspense>
    </Router>
  );
};