import { Suspense, lazy } from "react";
import { Navigate, Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
import { LoadingOverlay, ProtectedRoute } from "./components";

// Lazy load components
const DealerLayout = lazy(() => import("./app").then((m) => ({ default: m.DealerLayout })));
const DealersList = lazy(() => import("./app").then((m) => ({ default: m.DealersList })));
const ErrorPage = lazy(() => import("./app").then((m) => ({ default: m.ErrorPage })));
const LoginPageWithLanguageSelector = lazy(() =>
  import("./app").then((m) => ({ default: m.LoginPageWithLanguageSelector }))
);
const LogoutPage = lazy(() => import("./app").then((m) => ({ default: m.LogoutPage })));
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>
      ),
    },
  ];

  // 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],
    {
      //basename: "/app",
    }
  );

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