import { lazy, Suspense } from 'react'
import { createRouter, createRootRoute, createRoute, Outlet } from '@tanstack/react-router'
import { WorkspacePage } from '@/features/workspace/WorkspacePage'
import { ImportPage } from '@/features/import/ImportPage'
import { Loader2 } from 'lucide-react'

// ECharts es grande (373KB gzip). Lazy-load del ReportPage para que el
// bundle inicial no lo incluya — se carga solo cuando el usuario llega al reporte.
const ReportPage = lazy(() =>
  import('@/features/report/ReportPage').then((m) => ({ default: m.ReportPage }))
)

function ReportPageWithSuspense() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex flex-col items-center justify-center gap-3 bg-slate-50">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <p className="text-sm text-slate-400">Cargando reporte…</p>
      </div>
    }>
      <ReportPage />
    </Suspense>
  )
}

const rootRoute = createRootRoute({ component: () => <Outlet /> })

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: ImportPage,
})

const workspaceRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/workspace/$processId',
  component: WorkspacePage,
})

const reportRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/report/$processId',
  component: ReportPageWithSuspense,
})

const routeTree = rootRoute.addChildren([indexRoute, workspaceRoute, reportRoute])
export const router = createRouter({ routeTree })

declare module '@tanstack/react-router' {
  interface Register { router: typeof router }
}
