import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { AuthProvider } from 'react-oidc-context'
import './index.css'
import App from './App.tsx'
import Monitor from './pages/Monitor.tsx'
import Financial from './pages/Financial.tsx'
import McpMonitor from './pages/McpMonitor.tsx'
import N8nMonitor from './pages/N8nMonitor.tsx'
import Paperclip from './pages/Paperclip.tsx'
import AiOverview from './pages/AiOverview.tsx'
import Operations from './pages/Operations.tsx'
import Layout from './components/Layout.tsx'
import { oidcConfig } from './auth/config.ts'
import { AuthWrapper } from './auth/AuthWrapper.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AuthProvider {...oidcConfig}>
      <BrowserRouter>
        <AuthWrapper>
          <Routes>
            <Route element={<Layout />}>
              <Route path="/" element={<App />} />
              <Route path="/monitor" element={<Monitor />} />
              <Route path="/financial" element={<Financial />} />
              <Route path="/mcps" element={<McpMonitor />} />
              <Route path="/n8n" element={<N8nMonitor />} />
              <Route path="/paperclip" element={<Paperclip />} />
              <Route path="/ai" element={<AiOverview />} />
              <Route path="/operations" element={<Operations />} />
              <Route path="/callback" element={<App />} />
            </Route>
          </Routes>
        </AuthWrapper>
      </BrowserRouter>
    </AuthProvider>
  </StrictMode>,
)