import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import './code.css'
import '@stacklok/ui-kit/style'
import App from './App.tsx'
import ErrorBoundary from './components/ErrorBoundary.tsx'
import { Error } from './components/Error.tsx'
import { DarkModeProvider, Toaster } from '@stacklok/ui-kit'
import { client } from './api/generated/index.ts'
import { QueryClientProvider } from './components/react-query-provider.tsx'
import { BrowserRouter } from 'react-router-dom'
import { UiKitClientSideRoutingProvider } from './lib/ui-kit-client-side-routing.tsx'
import { ConfirmProvider } from './context/confirm-context.tsx'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { getAppConfig } from './lib/utils.ts'

// Initialize the API client
client.setConfig({
  baseUrl: getAppConfig().DASHBOARD_API_BASE_URL,
})

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <UiKitClientSideRoutingProvider>
        <DarkModeProvider>
          <QueryClientProvider>
            <ErrorBoundary fallback={<Error />}>
              <ConfirmProvider>
                <Toaster />
                <App />
              </ConfirmProvider>
            </ErrorBoundary>
            <ReactQueryDevtools initialIsOpen={false} />
          </QueryClientProvider>
        </DarkModeProvider>
      </UiKitClientSideRoutingProvider>
    </BrowserRouter>
  </StrictMode>
)