import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';

const mountApp = () => {
  const rootElement = document.getElementById('root');

  if (rootElement) {
    try {
      const root = createRoot(rootElement);
      root.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>
      );
    } catch (error) {
      console.error("Fatal: React application failed to mount.", error);
    }
  } else {
    console.error("Fatal: #root element not found in DOM.");
  }
};

// Start application when DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountApp);
} else {
  mountApp();
}

// Global listeners to capture and debug silent "Uncaught" errors
window.addEventListener('error', (event) => {
  console.error("Global Error Captured:", event.error || event.message);
});

window.addEventListener('unhandledrejection', (event) => {
  console.error("Uncaught Async Error (Promise Rejection):", event.reason);
});