import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from '@/App';
import '@/index.css';

// Context Imports
import { AuthProvider } from '@/contexts/AuthContext';
import { ApprovalProvider } from '@/contexts/ApprovalContext';
import { ThemeProvider } from '@/contexts/ThemeContext';
import { NotificationProvider } from '@/contexts/NotificationContext';
import { BusinessProvider } from '@/contexts/BusinessContext';
import { StockProvider } from '@/contexts/StockContext';
import { SalesProvider } from '@/contexts/SalesContext';
import { CartProvider } from '@/contexts/CartContext';
import { Toaster } from '@/components/ui/toaster';
import ErrorBoundary from '@/components/ErrorBoundary';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary>
      <BrowserRouter>
        {/* AuthProvider is the OUTERMOST functional provider */}
        <AuthProvider>
          <ThemeProvider>
            <NotificationProvider>
              <BusinessProvider>
                <StockProvider>
                  <SalesProvider>
                    <CartProvider>
                      <ApprovalProvider>
                        <App />
                        <Toaster />
                      </ApprovalProvider>
                    </CartProvider>
                  </SalesProvider>
                </StockProvider>
              </BusinessProvider>
            </NotificationProvider>
          </ThemeProvider>
        </AuthProvider>
      </BrowserRouter>
    </ErrorBoundary>
  </React.StrictMode>
);