import { useState } from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import AppShell from '@/components/layout/AppShell'
import DashboardPage from '@/pages/DashboardPage'
import CodePage from '@/pages/CodePage'
import DocsPage from '@/pages/DocsPage'
import OtelPage from '@/pages/OtelPage'
import OtelTraceDetailPage from '@/pages/OtelTraceDetailPage'
import McpPage from '@/pages/McpPage'

export default function App() {
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: Infinity,
        refetchOnWindowFocus: false,
        refetchOnReconnect: false,
        retry: 1,
      },
    },
  }))

  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <Routes>
          <Route element={<AppShell />}>
            <Route path="/" element={<DashboardPage />} />
            <Route path="/code" element={<CodePage />} />
            <Route path="/docs" element={<DocsPage />} />
            <Route path="/otel" element={<OtelPage />} />
            <Route path="/otel/traces/:traceId" element={<OtelTraceDetailPage />} />
            <Route path="/mcp" element={<McpPage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  )
}
