import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { BrowserRouter } from 'react-router-dom'
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material'
import { WebSocketProvider } from './components/WebSocketProvider'
import { SnackbarProvider } from './contexts/SnackbarContext'
import { AutopilotSettingsProvider } from './contexts/AutopilotSettingsContext'
import App from './App'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
    },
  },
})

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#FF9800', // Amber
    },
    secondary: {
      main: '#2196F3', // Blue
    },
    success: {
      main: '#00E676', // Neon Green
    },
    error: {
      main: '#FF1744', // Neon Red
    },
    background: {
      default: '#121212',
      paper: '#1E1E1E',
    },
  },
  typography: {
    fontFamily: "'Segoe UI', 'Roboto', 'Arial', sans-serif",
  },
})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={darkTheme}>
        <CssBaseline />
        <WebSocketProvider>
          <SnackbarProvider>
            <AutopilotSettingsProvider>
              <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
                <App />
              </BrowserRouter>
            </AutopilotSettingsProvider>
          </SnackbarProvider>
        </WebSocketProvider>
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
)
