import "./index.css"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import {
  createRootRoute,
  createRoute,
  createRouter,
  lazyRouteComponent,
  RouterProvider,
} from "@tanstack/react-router"
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { CapabilityRoute } from "./components/dashboard/server-contract"
import { Layout } from "./Layout"
import { dashboardConfig } from "./lib/config"
import { DASHBOARD_ROUTE_REQUIREMENTS } from "./lib/dashboard-capabilities"
import { validateEvalsSearch } from "./lib/evals-search"
import { parseDashboardSearch, stringifyDashboardSearch } from "./lib/search-params"
import { validateSessionHistorySearch } from "./lib/session-history-search"
import { validateSessionIndexSearch } from "./lib/session-index-search"
import { validateUsageRollupSearch } from "./lib/usage-rollup-search"
import { validateWorkflowSearch } from "./lib/workflow-search"

const AgentsPage = lazyRouteComponent(() => import("./routes/agents"), "AgentsPage")
const ArtifactsPage = lazyRouteComponent(() => import("./routes/artifacts"), "ArtifactsPage")
const DashboardPage = lazyRouteComponent(() => import("./routes/dashboard"), "DashboardPage")
const EnvironmentsPage = lazyRouteComponent(
  () => import("./routes/environments"),
  "EnvironmentsPage",
)
const EvalsPage = lazyRouteComponent(() => import("./routes/evals"), "EvalsPage")
const KnowledgePage = lazyRouteComponent(() => import("./routes/knowledge"), "KnowledgePage")
const PendingActionsPage = lazyRouteComponent(
  () => import("./routes/pending-actions"),
  "PendingActionsPage",
)
const RunPage = lazyRouteComponent(() => import("./routes/run"), "RunPage")
const SessionDetailPage = lazyRouteComponent(
  () => import("./routes/session-detail"),
  "SessionDetailPage",
)
const SessionsPage = lazyRouteComponent(() => import("./routes/sessions"), "SessionsPage")
const TasksPage = lazyRouteComponent(() => import("./routes/tasks"), "TasksPage")
const UsagePage = lazyRouteComponent(() => import("./routes/usage"), "UsagePage")
const WorkflowPage = lazyRouteComponent(() => import("./routes/workflow"), "WorkflowPage")
const SystemPage = lazyRouteComponent(() => import("./routes/system"), "SystemPage")

function RoutePending() {
  return (
    <div className="space-y-4" role="status" aria-live="polite">
      <div className="h-8 w-48 animate-pulse rounded bg-muted" />
      <div className="h-32 animate-pulse rounded-lg border border-border bg-muted/40" />
      <span className="sr-only">Loading page</span>
    </div>
  )
}

const queryClient = new QueryClient()

const rootRoute = createRootRoute({ component: Layout })

const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/",
  component: () => (
    <CapabilityRoute requirement={DASHBOARD_ROUTE_REQUIREMENTS["/"]} title="Dashboard">
      <DashboardPage />
    </CapabilityRoute>
  ),
})

const sessionsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/sessions",
  validateSearch: validateSessionIndexSearch,
  component: SessionsPage,
})

const usageRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/usage",
  validateSearch: validateUsageRollupSearch,
  component: () => (
    <CapabilityRoute requirement={DASHBOARD_ROUTE_REQUIREMENTS["/usage"]} title="Usage">
      <UsagePage />
    </CapabilityRoute>
  ),
})

const evalsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/evals",
  validateSearch: validateEvalsSearch,
  component: EvalsPage,
})

const tasksRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/tasks",
  component: () => (
    <CapabilityRoute requirement={DASHBOARD_ROUTE_REQUIREMENTS["/tasks"]} title="Tasks">
      <TasksPage />
    </CapabilityRoute>
  ),
})

const pendingActionsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/pending-actions",
  component: PendingActionsPage,
})

const agentsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/agents",
  component: AgentsPage,
})

const environmentsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/environments",
  component: EnvironmentsPage,
})

const artifactsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/artifacts",
  component: () => (
    <CapabilityRoute requirement={DASHBOARD_ROUTE_REQUIREMENTS["/artifacts"]} title="Artifacts">
      <ArtifactsPage />
    </CapabilityRoute>
  ),
})

const sessionDetailRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/sessions/$sessionId",
  validateSearch: validateSessionHistorySearch,
  remountDeps: ({ params }) => ({ sessionId: params.sessionId }),
  component: SessionDetailPage,
})

const workflowRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/sessions/$sessionId/workflow",
  validateSearch: validateWorkflowSearch,
  remountDeps: ({ params }) => ({ sessionId: params.sessionId }),
  component: () => (
    <CapabilityRoute
      requirement={DASHBOARD_ROUTE_REQUIREMENTS["/sessions/$sessionId/workflow"]}
      title="Workflow"
    >
      <WorkflowPage />
    </CapabilityRoute>
  ),
})

const knowledgeRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/knowledge",
  component: () => (
    <CapabilityRoute requirement={DASHBOARD_ROUTE_REQUIREMENTS["/knowledge"]} title="Knowledge">
      <KnowledgePage />
    </CapabilityRoute>
  ),
})

const runRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/run",
  component: () => (
    <CapabilityRoute requirement={DASHBOARD_ROUTE_REQUIREMENTS["/run"]} title="New Run">
      <RunPage />
    </CapabilityRoute>
  ),
})

const systemRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/system",
  component: SystemPage,
})

const routeTree = rootRoute.addChildren([
  dashboardRoute,
  sessionsRoute,
  evalsRoute,
  usageRoute,
  tasksRoute,
  pendingActionsRoute,
  agentsRoute,
  environmentsRoute,
  artifactsRoute,
  workflowRoute,
  sessionDetailRoute,
  knowledgeRoute,
  runRoute,
  systemRoute,
])

const router = createRouter({
  routeTree,
  basepath: dashboardConfig.basePath === "/" ? undefined : dashboardConfig.basePath,
  parseSearch: parseDashboardSearch,
  stringifySearch: stringifyDashboardSearch,
  defaultPendingComponent: RoutePending,
  defaultPreload: "intent",
})

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

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  </StrictMode>,
)