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

const container = document.getElementById('root');
if (!container) {
  throw new Error('Root element not found. Ensure index.html has a <div id="root"></div>.');
}

const root = createRoot(container);

const renderApp = () => {
  try {
    root.render(
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    );
  } catch (error) {
    console.error('Fatal error during app render:', error);
    container.innerHTML = `
      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:#12100e;color:#D8D3C7;font-family:monospace;padding:2rem;text-align:center;">
        <h1 style="font-size:2rem;color:#FF5A3D;margin-bottom:1rem;">Fatal Error</h1>
        <p style="margin-bottom:0.5rem;">The application failed to initialize.</p>
        <p style="font-size:0.875rem;color:#9E9787;margin-bottom:2rem;">Check the console for details.</p>
        <button onclick="location.reload()" style="padding:0.75rem 2rem;background:#FFB84A;color:#070807;border:none;border-radius:8px;cursor:pointer;font-weight:600;">
          Reload Application
        </button>
      </div>
    `;
  }
};

renderApp();