import { useT } from '@app/i18n'
import { IconLoader2 as Loader2 } from '@tabler/icons-react'
import { lazy, type ReactNode, Suspense } from 'react'

const WorkspaceRouteContent = lazy(() =>
  import('./workspace-route').then((route) => ({ default: route.WorkspaceRouteContent })),
)
const NotFoundPage = lazy(() => import('@app/pages/not-found').then((page) => ({ default: page.NotFoundPage })))
const SpaceInvitePage = lazy(() => import('@app/pages/invite').then((page) => ({ default: page.SpaceInvitePage })))

function RoutePending() {
  const { t } = useT()
  return (
    <main className="grid min-h-dvh place-items-center bg-background text-foreground" role="status">
      <Loader2 size={22} className="animate-spin text-primary" aria-hidden />
      <span className="sr-only">{t('common.action.loading')}</span>
    </main>
  )
}

function DeferredRoute({ children }: { children: ReactNode }) {
  return <Suspense fallback={<RoutePending />}>{children}</Suspense>
}

export function WorkspaceRoute() {
  return (
    <DeferredRoute>
      <WorkspaceRouteContent />
    </DeferredRoute>
  )
}

export function SpaceInviteRoute() {
  return (
    <DeferredRoute>
      <SpaceInvitePage />
    </DeferredRoute>
  )
}

export function NotFoundRoute() {
  return (
    <DeferredRoute>
      <NotFoundPage />
    </DeferredRoute>
  )
}