import { createRouter, createRoute, createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

// Root layout — wraps all routes with the app shell
const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      {import.meta.env.DEV && <TanStackRouterDevtools />}
    </>
  ),
})

// Routes — components are lazy-imported in Plan 03 and 04; stubs for now
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => (
    <div className="min-h-screen bg-canvas flex items-center justify-center">
      <p className="text-volt font-display font-black text-2xl">HWLab — Dashboard loading…</p>
    </div>
  ),
})

const itemRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/item/$id',
  component: () => (
    <div className="min-h-screen bg-canvas flex items-center justify-center">
      <p className="text-volt font-display font-black text-2xl">Item detail loading…</p>
    </div>
  ),
})

const intakeRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/intake',
  component: () => (
    <div className="min-h-screen bg-canvas flex items-center justify-center">
      <p className="text-volt font-display font-black text-2xl">Intake wizard loading…</p>
    </div>
  ),
})

const scanRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/scan',
  component: () => (
    <div className="min-h-screen bg-canvas flex items-center justify-center">
      <p className="text-volt font-display font-black text-2xl">QR Scanner loading…</p>
    </div>
  ),
})

const routeTree = rootRoute.addChildren([indexRoute, itemRoute, intakeRoute, scanRoute])

export const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
})

// TypeScript type augmentation for TanStack Router
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}