import { createRouter as createTanStackRouter } from '@tanstack/react-router'
import { routerWithQueryClient } from '@tanstack/react-router-with-query'
import { getQueryClient } from './lib/query-client'
import { routeTree } from './routeTree.gen'

export const getRouter = createRouter

export function createRouter() {
  const queryClient = getQueryClient()
  const router = createTanStackRouter({
    routeTree,
    context: { queryClient },
    scrollRestoration: true,
    defaultPreloadStaleTime: 0,
    defaultPendingComponent: () => (
      <div className="flex min-h-[50dvh] items-center justify-center" role="status" aria-label="正在加载">
        <i className="ri-loader-4-line animate-spin text-2xl text-muted" aria-hidden="true" />
      </div>
    ),
    defaultNotFoundComponent: () => (
      <main className="flex min-h-screen items-center justify-center bg-background px-6 text-center">
        <div>
          <p className="text-7xl font-bold text-primary">404</p>
          <h1 className="mt-3 text-xl font-semibold">页面不存在</h1>
          <p className="mt-2 text-sm text-muted">请从左侧导航进入已配置的功能页面。</p>
        </div>
      </main>
    ),
  })
  return routerWithQueryClient(router, queryClient)
}

declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof getRouter>
  }
}