import { LoadingOverlay } from "@repo/rdx-ui/components";
import { Suspense, lazy } from "react";
import { RouteObject, RouterProvider, createBrowserRouter } from "react-router-dom";
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 Routes = () => {
  const routesForErrors = [
    {
      path: "*",
      Element: (
        <Suspense fallback={<LoadingOverlay />}>
          <ErrorPage />
        </Suspense>
      ),
    },
  ];

  const routesForModules: RouteObject[] = [];

  modules.map((module) => {
    if (module.routes) {
      routesForModules.push(...module.routes());
    }
  });

  // Define routes accessible only to authenticated users
  /*const routesForAuthenticatedOnly = [
    {
      path: "/",
      element: (
        <ProtectedRoute>
          <Navigate to='/quotes' replace={true} />
        </ProtectedRoute>
      ),
    },
    {
      path: "/home",
      element: (
        <ProtectedRoute>
          <Suspense fallback={<LoadingOverlay />}>
            <DashboardPage />
          </Suspense>
        </ProtectedRoute>
      ),
    },
    {
      path: "/catalog",
      element: (
        <Suspense fallback={<LoadingOverlay />}>
          <CatalogLayout>
            <Outlet />
          </CatalogLayout>
        </Suspense>
      ),
      children: [
        {
          index: true,
          element: (
            <Suspense fallback={<LoadingOverlay />}>
              <CatalogList />
            </Suspense>
          ),
        },
      ],
    },
    {
      path: "/dealers",
      element: (
        <Suspense fallback={<LoadingOverlay />}>
          <DealerLayout>
            <Outlet />
          </DealerLayout>
        </Suspense>
      ),
      children: [
        {
          index: true,
          element: (
            <Suspense fallback={<LoadingOverlay />}>
              <DealersList />
            </Suspense>
          ),
        },
      ],
    },
    {
      path: "/quotes",
      element: (
        <Suspense fallback={<LoadingOverlay />}>
          <QuotesLayout>
            <Outlet />
          </QuotesLayout>
        </Suspense>
      ),
      children: [
        {
          index: true,
          element: (
            <Suspense fallback={<LoadingOverlay />}>
              <QuotesList />
            </Suspense>
          ),
        },
        {
          path: "add",
          element: (
            <Suspense fallback={<LoadingOverlay />}>
              <QuoteCreate />
            </Suspense>
          ),
        },
        {
          path: "edit/:id",
          element: (
            <Suspense fallback={<LoadingOverlay />}>
              <QuoteEdit />
            </Suspense>
          ),
        },
      ],
    },
    {
      path: "/settings",
      element: (
        <Suspense fallback={<LoadingOverlay />}>
          <SettingsLayout>
            <Outlet />
          </SettingsLayout>
        </Suspense>
      ),
      children: [
        {
          index: true,
          element: (
            <Suspense fallback={<LoadingOverlay />}>
              <SettingsEditor />
            </Suspense>
          ),
        },
      ],
    },
    {
      path: "/logout",
      element: <LogoutPage />,
    },
  ];

  // Define routes accessible only to non-authenticated users
  const routesForNotAuthenticatedOnly = [
    {
      path: "/login",
      element: (
        <Suspense fallback={<LoadingOverlay />}>
          <LoginPageWithLanguageSelector />
        </Suspense>
      ),
    },
  ];*/

  // Combine and conditionally include routes based on authentication status
  const router = createBrowserRouter(
    [
      //...routesForAuthenticatedOnly,
      //...routesForNotAuthenticatedOnly,
      ...routesForErrors,
      ...routesForModules,
    ],
    {
      //basename: "/app",
    }
  );

  // Provide the router configuration using RouterProvider
  return <RouterProvider router={router} />;
};
