import type { ComponentType } from "react";
import { lazy, Suspense } from "react";
import { createBrowserRouter } from "react-router-dom";
import App from "@/App";
import Spinner from "@/components/Spinner";
import { ProtectedRoute } from "@/components/ProtectedRoute";
import MainLayout from "@/layouts/MainLayout";
import RootLayout from "@/layouts/RootLayout";
import Home from "@/pages/Home";
import NotFound from "@/pages/NotFound";

const Archived = lazy(() => import("@/pages/Archived"));
const Explore = lazy(() => import("@/pages/Explore"));
const Inboxes = lazy(() => import("@/pages/Inboxes"));
const MemoDetail = lazy(() => import("@/pages/MemoDetail"));
const PermissionDenied = lazy(() => import("@/pages/PermissionDenied"));
const Attachments = lazy(() => import("@/pages/Attachments"));
const Setting = lazy(() => import("@/pages/Setting"));
const UserProfile = lazy(() => import("@/pages/UserProfile"));
const MemoDetailRedirect = lazy(() => import("./MemoDetailRedirect"));
const AuthPage = lazy(() => import("@/pages/Auth"));
const Landing = lazy(() => import("@/pages/Landing"));
const AboutCuCu = lazy(() => import("@/pages/AboutCuCu"));
const Teams = lazy(() => import("@/pages/Teams"));
const TeamWorkspace = lazy(() => import("@/pages/TeamWorkspace"));
const TeamJoin = lazy(() => import("@/pages/TeamJoin"));
const Deadlines = lazy(() => import("@/pages/Deadlines"));
const Documents = lazy(() => import("@/pages/DocumentsPage"));

import { ROUTES } from "./routes";

// Backward compatibility alias
export const Routes = ROUTES;
export { ROUTES };

// Helper component to reduce Suspense boilerplate for lazy routes
const LazyRoute = ({ component: Component }: { component: ComponentType }) => (
  <Suspense
    fallback={
      <div className="w-full h-64 flex items-center justify-center">
        <Spinner size="lg" />
      </div>
    }
  >
    <Component />
  </Suspense>
);

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFound />,
    children: [
      // Landing page at root
      { index: true, element: <LazyRoute component={Landing} /> },
      { path: "landing", element: <LazyRoute component={Landing} /> },
      // Auth page (separate from main app - no sidebar)
      { path: Routes.AUTH, element: <LazyRoute component={AuthPage} /> },
      // Backward-compatible auth aliases to avoid accidental 404s.
      { path: "app/auth", element: <LazyRoute component={AuthPage} /> },
      { path: "sign-in", element: <LazyRoute component={AuthPage} /> },
      { path: "signin", element: <LazyRoute component={AuthPage} /> },
      {
        path: Routes.ROOT,
        element: (
          <ProtectedRoute>
            <RootLayout />
          </ProtectedRoute>
        ),
        children: [
          {
            element: <MainLayout />,
            children: [
              { path: "", element: <Home /> },
              { path: "explore", element: <LazyRoute component={Explore} /> },
              { path: "u/:username", element: <LazyRoute component={UserProfile} /> },
            ],
          },
          { path: "attachments", element: <LazyRoute component={Attachments} /> },
          { path: "archived", element: <LazyRoute component={Archived} /> },
          { path: "inbox", element: <LazyRoute component={Inboxes} /> },
          { path: "setting", element: <LazyRoute component={Setting} /> },
          { path: "about", element: <LazyRoute component={AboutCuCu} /> },
          { path: "teams", element: <LazyRoute component={Teams} /> },
          { path: "teams/:teamId", element: <LazyRoute component={TeamWorkspace} /> },
          { path: "teams/join/:inviteCode", element: <LazyRoute component={TeamJoin} /> },
          { path: "deadlines", element: <LazyRoute component={Deadlines} /> },
          { path: "documents", element: <LazyRoute component={Documents} /> },
          { path: "memos/:uid", element: <LazyRoute component={MemoDetail} /> },
          // Redirect old path to new path
          { path: "m/:uid", element: <LazyRoute component={MemoDetailRedirect} /> },
          { path: "403", element: <LazyRoute component={PermissionDenied} /> },
          { path: "404", element: <LazyRoute component={NotFound} /> },
          { path: "*", element: <LazyRoute component={NotFound} /> },
        ],
      },
      // Support direct /teams/join/:inviteCode path for share links
      { path: "teams/join/:inviteCode", element: <LazyRoute component={TeamJoin} /> },
      // Support direct /memos/:uid path (without /app prefix) for sharing
      { path: "memos/:uid", element: <LazyRoute component={MemoDetail} /> },
      { path: "*", element: <LazyRoute component={NotFound} /> },
    ],
  },
]);

export default router;
