import {
  createRootRoute,
  createRoute,
  createRouter,
  Outlet,
} from "@tanstack/react-router"
import { AppShell } from "@/components/app-shell"
import { DashboardPage } from "@/pages/dashboard"
import { DataSourcesPage } from "@/pages/data-sources"
import { WidgetsPage } from "@/pages/widgets"
import { LayoutBuilderPage } from "@/pages/layout-builder"
import { PresetsPage } from "@/pages/presets"

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

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

const dataSourcesRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/data-sources",
  component: DataSourcesPage,
})

const widgetsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/widgets",
  component: WidgetsPage,
})

const layoutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/layout",
  component: LayoutBuilderPage,
})

const presetsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/presets",
  component: PresetsPage,
})

const routeTree = rootRoute.addChildren([
  indexRoute,
  dataSourcesRoute,
  widgetsRoute,
  layoutRoute,
  presetsRoute,
])

export const router = createRouter({ routeTree })

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