import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { ErrorBoundary } from './components/ErrorBoundary.tsx';
import './index.css';

function mountApplication() {
  if ((window as any).__cloutManaMounted) {
    return;
  }

  let container = document.getElementById('root');
  if (!container && document.body) {
    container = document.createElement('div');
    container.id = 'root';
    document.body.appendChild(container);
  }

  if (!container) {
    return;
  }

  try {
    (window as any).__cloutManaMounted = true;
    container.innerHTML = '';
    const root = createRoot(container);
    root.render(
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    );
    console.log('[CLOUT=MANA] Mounted successfully');
  } catch (err) {
    (window as any).__cloutManaMounted = false;
    console.error('[CLOUT=MANA Fatal Mount Error]:', err);
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountApplication);
} else {
  mountApplication();
}
window.addEventListener('load', mountApplication);