import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'

import * as TanStackQueryProvider from './integrations/tanstack-query/root-provider.tsx'
import * as MaterialUIProvider from './integrations/material-ui/root-provider.tsx'
import {
  TechniaThemeProvider,
  useTechniaTheme,
} from './context/technia-theme.context.tsx'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

import './styles.css'
import { applyBrandTheme, applyBrandDocument } from './config/brand.ts'
import { initTokenRefresh } from './api/auth/auth'
import reportWebVitals from './reportWebVitals.ts'

// Set the brand's primary color on :root before React mounts, so the very
// first paint uses the right palette. Also swap the tab title + favicon
// since index.html ships a generic placeholder for all three deploys.
applyBrandTheme()
applyBrandDocument()

// Re-arm proactive token refresh if the user already has a valid access
// cookie from a prior tab/session. New sign-ins schedule their own timer
// via setAccessToken.
initTokenRefresh()

// import inter font
import "@fontsource/inter/100.css";
import "@fontsource/inter/200.css";
import "@fontsource/inter/300.css";
import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
import "@fontsource/inter/700.css";
import "@fontsource/inter/800.css";
import "@fontsource/inter/900.css";

// Create a new router instance

const TanStackQueryProviderContext = TanStackQueryProvider.getContext()
const router = createRouter({
  routeTree,
  context: {
    ...TanStackQueryProviderContext,
    setModule: () => {},
    module: null,
  },
  defaultPreload: 'intent',
  scrollRestoration: true,
  defaultStructuralSharing: true,
  defaultPreloadStaleTime: 0,
})

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

function App() {
  const { setModule, module } = useTechniaTheme()
  return <RouterProvider router={router} context={{ setModule, module }} />
}

// Render the app
const rootElement = document.getElementById('app')
if (rootElement && !rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
        <TechniaThemeProvider>
          <MaterialUIProvider.Provider>
            <App />
          </MaterialUIProvider.Provider>
        </TechniaThemeProvider>
      </TanStackQueryProvider.Provider>
    </StrictMode>,
  )
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()