import type { ComponentType, ReactNode } from "react"
import { createBrowserRouter, Navigate } from "react-router-dom"
import ErrorPage from "@/components/ErrorPage"
import Layout from "@/components/Layout"
import EmptyLayout from "@/components/EmptyLayout"
import { isAuthenticated } from "@/store/auth-slice"
import { useAppSelector } from "@/store"

function lazy<T extends { default: ComponentType<unknown> }>(importer: () => Promise<T>) {
  return async () => {
    const module = await importer()
    return { Component: module.default }
  }
}

const hydrateFallbackElement = <div className="px-4 py-6 text-neutral-500">Loading...</div>

function RequireAuth({ children }: { children: ReactNode }) {
  const authenticated = useAppSelector(isAuthenticated)
  if (!authenticated) return <Navigate to="/login" replace />
  return <>{children}</>
}

const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <Navigate to="/dashboard" replace />,
    },
    {
      element: (
        <RequireAuth>
          <Layout />
        </RequireAuth>
      ),
      hydrateFallbackElement,
      errorElement: <ErrorPage />,
      children: [
        {
          path: "dashboard",
          lazy: lazy(() => import("@/pages/Dashboard")),
        },
        {
          path: "artefacts",
          lazy: lazy(() => import("@/pages/Artefacts")),
        },
        {
          path: "deployments",
          lazy: lazy(() => import("@/pages/Deployments")),
        },
        {
          path: "users",
          lazy: lazy(() => import("@/pages/Users")),
        },
      ],
    },
    {
      element: <EmptyLayout />,
      hydrateFallbackElement,
      errorElement: <ErrorPage />,
      children: [
        {
          path: "login",
          lazy: lazy(() => import("@/pages/Login")),
        },
      ],
    },
  ],
  { basename: "/" }
)

export default router