import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';

// This function contains the actual app initialization
const initializeApp = async () => {
    try {
        // Dynamically import the main App component ONLY after Firebase is ready.
        // This prevents a race condition where the app tries to use Firebase before it's loaded.
        const { default: App } = await import('./App.tsx');

        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>
                <HashRouter>
                    <App />
                </HashRouter>
            </React.StrictMode>
        );
         // Once the app is successfully initialized, we can clear the global error handler
        window.onerror = null;
    } catch (e: any) {
         // If an error happens during React initialization, display it
        const errorMsg = e.message || 'Unknown error during app initialization.';
        const rootEl = document.getElementById('root');
        if (rootEl) {
             rootEl.innerHTML = `<div style="padding: 2rem; color: red;"><h1>Critical Error</h1><pre>${errorMsg}</pre><pre>${e.stack}</pre></div>`;
        }
    }
};

// This function will repeatedly check if the Firebase library is ready
const waitForFirebase = () => {
    if (typeof (window as any).firebase !== 'undefined' && (window as any).firebase.app) {
        // Firebase is ready, initialize the app
        initializeApp();
    } else {
        // Firebase is not ready yet, check again in a moment
        setTimeout(waitForFirebase, 50);
    }
};

// Start the process
waitForFirebase();