import { RouterProvider } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import { ToastProvider } from './context/ToastContext';
import { NetworkProvider } from './context/NetworkContext';
import { UndoProvider } from './context/UndoContext';
import { PreferencesProvider } from './context/PreferencesContext';
import { ErrorBoundary } from './components/ErrorBoundary';
import { RateLimitBanner } from './components/ui/RateLimitBanner';
import { registerServiceWorker } from './hooks/useServiceWorker';
import { router } from './router';

// Global styles are imported in main.tsx

// Register service worker in production
registerServiceWorker();

function App() {
    return (
        <ErrorBoundary>
            <PreferencesProvider>
                <AuthProvider>
                    <NetworkProvider>
                        <ToastProvider>
                            <UndoProvider>
                                <RateLimitBanner />
                                <RouterProvider router={router} />
                            </UndoProvider>
                        </ToastProvider>
                    </NetworkProvider>
                </AuthProvider>
            </PreferencesProvider>
        </ErrorBoundary>
    );
}

export default App;