import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';
import { initDataSource } from './data';
import { AuthProvider, Splash } from './auth/AuthContext';
import { SettingsProvider } from './hooks/useSettings';
import { CartProvider } from './hooks/useCart';
import { ToastProvider } from './components/ui/Toast';
import { UpdatePrompt } from './components/InstallPrompt';
import { useSettings } from './hooks/useSettings';

function CartBridge({ children }: { children: React.ReactNode }) {
  const { settings } = useSettings();
  return <CartProvider taxRate={settings.order?.taxRate ?? 0}>{children}</CartProvider>;
}

const container = document.getElementById('root');
if (!container) throw new Error('Root container missing');

// Render a splash while the data layer (Firebase or local store) boots.
createRoot(container).render(
  <StrictMode>
    <Splash />
  </StrictMode>,
);

initDataSource()
  .then(() => {
    createRoot(container).render(
      <StrictMode>
        <BrowserRouter>
          <ToastProvider>
            <AuthProvider>
              <SettingsProvider>
                <CartBridge>
                  <App />
                  <UpdatePrompt />
                </CartBridge>
              </SettingsProvider>
            </AuthProvider>
          </ToastProvider>
        </BrowserRouter>
      </StrictMode>,
    );
  })
  .catch((err) => {
    console.error(err);
    createRoot(container).render(
      <div className="grid min-h-screen place-items-center bg-cream p-6 text-center">
        <div>
          <h1 className="text-lg font-bold text-charcoal-900">Unable to start Arikemi Special Kitchen</h1>
          <p className="muted mt-2">{err instanceof Error ? err.message : 'Unknown error'}</p>
        </div>
      </div>,
    );
  });