import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { CartProvider } from './context/CartContext';
import { WishlistProvider } from './context/WishlistContext';
import { AuthProvider } from './context/AuthContext';
import { SellerProvider } from './context/SellerContext';
import { AdminProvider } from './context/AdminContext';
import { ToastProvider } from './context/ToastContext';

const rootElement = document.getElementById('root');
if (!rootElement) {
  throw new Error("Could not find root element to mount to");
}

const root = ReactDOM.createRoot(rootElement);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <ToastProvider>
        <AdminProvider>
          <AuthProvider>
            <SellerProvider>
              <CartProvider>
                <WishlistProvider>
                  <App />
                </WishlistProvider>
              </CartProvider>
            </SellerProvider>
          </AuthProvider>
        </AdminProvider>
      </ToastProvider>
    </BrowserRouter>
  </React.StrictMode>
);

// Dynamically register the service worker based on the path
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    const isSellerApp = window.location.pathname.startsWith('/seller');
    const swUrl = isSellerApp ? '/sw.seller.js' : '/sw.customer.js';
    const scope = isSellerApp ? '/seller/' : '/';

    navigator.serviceWorker.register(swUrl, { scope }).then(registration => {
      console.log(`ServiceWorker for ${isSellerApp ? 'Seller' : 'Customer'} app registered with scope: `, registration.scope);
    }, err => {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}