import React, { Suspense } from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
import { RequireAuth, RequireRole, RequireOnboardingComplete } from "./guards";

// Layouts
const ClientLayout = React.lazy(() => import("../layouts/ClientLayout"));
const AdminLayout = React.lazy(() => import("../layouts/AdminLayout"));

// Pages (Lazy Loaded)
const LoginPage = React.lazy(() =>
  import("../../pages/LoginPage").then((m) => ({ default: m.LoginPage })),
);
const InvitePage = React.lazy(() =>
  import("../../pages/InvitePage").then((m) => ({ default: m.InvitePage })),
);
const DashboardPage = React.lazy(() =>
  import("../../pages/DashboardPage").then((m) => ({
    default: m.DashboardPage,
  })),
);
const AssetsPage = React.lazy(() =>
  import("../../pages/AssetsPage").then((m) => ({ default: m.AssetsPage })),
);
const ApprovalsPage = React.lazy(() =>
  import("../../pages/admin/ApprovalsPage").then((m) => ({
    default: m.ApprovalsPage,
  })),
);
const DirectoryPage = React.lazy(() =>
  import("../../pages/admin/DirectoryPage").then((m) => ({
    default: m.DirectoryPage,
  })),
);
const OnboardingPage = React.lazy(() =>
  import("../../pages/OnboardingPage").then((m) => ({
    default: m.OnboardingPage,
  })),
);
const LegalTemplatesPage = React.lazy(() =>
  import("../../pages/admin/LegalTemplatesPage").then((m) => ({
    default: m.LegalTemplatesPage,
  })),
);

const ClientAgreementsPage = React.lazy(() =>
  import("../../pages/ClientAgreementsPage").then((m) => ({
    default: m.ClientAgreementsPage,
  })),
);
const EcosystemPage = React.lazy(() =>
  import("../../pages/EcosystemPage").then((m) => ({
    default: m.EcosystemPage,
  })),
);
const GroupDetailsPage = React.lazy(() =>
  import("../../pages/admin/GroupDetailsPage").then((m) => ({
    default: m.GroupDetailsPage,
  })),
);
const EcosystemManagerPage = React.lazy(() =>
  import("../../pages/admin/EcosystemManagerPage").then((m) => ({
    default: m.EcosystemManagerPage,
  })),
);

// Dummy Components for routing
const LoadingFallback = () => (
  <div className="flex h-screen w-full items-center justify-center bg-ink-50">
    <div className="w-8 h-8 border-4 border-ink-900/30 border-t-ink-900 rounded-full animate-spin"></div>
  </div>
);

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="/login" replace />,
  },
  {
    path: "/login",
    element: (
      <Suspense fallback={<LoadingFallback />}>
        <LoginPage />
      </Suspense>
    ),
  },
  {
    path: "/invite",
    element: (
      <Suspense fallback={<LoadingFallback />}>
        <InvitePage />
      </Suspense>
    ),
  },
  {
    path: "/onboarding",
    element: (
      <RequireAuth>
        <RequireRole role="PARTNER_USER">
          <Suspense fallback={<LoadingFallback />}>
            <OnboardingPage />
          </Suspense>
        </RequireRole>
      </RequireAuth>
    ),
  },
  {
    path: "/client",
    element: (
      <RequireAuth>
        <RequireRole role="PARTNER_USER">
          <RequireOnboardingComplete>
            <Suspense fallback={<LoadingFallback />}>
              <ClientLayout />
            </Suspense>
          </RequireOnboardingComplete>
        </RequireRole>
      </RequireAuth>
    ),
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <DashboardPage />
          </Suspense>
        ),
      },
      {
        path: "assets",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <AssetsPage />
          </Suspense>
        ),
      },
      {
        path: "agreements",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <ClientAgreementsPage />
          </Suspense>
        ),
      },
      {
        path: "ecosystem",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <EcosystemPage />
          </Suspense>
        ),
      },
    ],
  },
  {
    path: "/admin",
    element: (
      <RequireAuth>
        <RequireRole role="ADMIN">
          <Suspense fallback={<LoadingFallback />}>
            <AdminLayout />
          </Suspense>
        </RequireRole>
      </RequireAuth>
    ),
    children: [
      {
        index: true,
        element: <DirectoryPage />,
      },
      {
        path: "assets",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <AssetsPage />
          </Suspense>
        ),
      },
      {
        path: "legal",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <LegalTemplatesPage />
          </Suspense>
        ),
      },
      {
        path: "approvals",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <ApprovalsPage />
          </Suspense>
        ),
      },
      {
        path: "partners",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <DirectoryPage />
          </Suspense>
        ),
      },
      {
        path: "groups/:groupId",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <GroupDetailsPage />
          </Suspense>
        ),
      },
      {
        path: "ecosystem",
        element: (
          <Suspense fallback={<LoadingFallback />}>
            <EcosystemManagerPage />
          </Suspense>
        ),
      },
    ],
  },
]);