import React from "react";
import ReactDOM from "react-dom/client";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { AppShell } from "./layout/AppShell";
import { DashboardPage } from "./pages/DashboardPage";
import { DeploymentsPage } from "./pages/DeploymentsPage";
import { DeploymentGroupsPage } from "./pages/DeploymentGroupsPage";
import { DomainDetailsPage } from "./pages/DomainDetailsPage";
import { DomainsPage } from "./pages/DomainsPage";
import { EnvironmentDomainsPage } from "./pages/EnvironmentDomainsPage";
import { EnvironmentDetailsPage } from "./pages/EnvironmentDetailsPage";
import { EnvironmentsPage } from "./pages/EnvironmentsPage";
import { RunbooksPage } from "./pages/RunbooksPage";
import { TemplatesPage } from "./pages/TemplatesPage";
import { ServicesPage } from "./pages/ServicesPage";
import "./styles/global.css";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      retry: 1,
    },
  },
});

const router = createBrowserRouter([
  {
    path: "/",
    element: <AppShell />,
    children: [
      { index: true, element: <DashboardPage /> },
      { path: "deployments", element: <DeploymentsPage /> },
      { path: "deployment-groups", element: <DeploymentGroupsPage /> },
      { path: "domains", element: <DomainsPage /> },
      { path: "domains/:id", element: <DomainDetailsPage /> },
      { path: "environment-domains", element: <EnvironmentDomainsPage /> },
      { path: "environments", element: <EnvironmentsPage /> },
      { path: "environments/:id", element: <EnvironmentDetailsPage /> },
      { path: "runbooks", element: <RunbooksPage /> },
      { path: "templates", element: <TemplatesPage /> },
      { path: "services", element: <ServicesPage /> },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <FluentProvider theme={webLightTheme}>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
      </QueryClientProvider>
    </FluentProvider>
  </React.StrictMode>,
);