import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

function showFatal(title: string, details: string) {
  try {
    document.body.innerHTML = `
      <div style="font-family: ui-sans-serif, system-ui; padding: 24px; max-width: 980px; margin: 0 auto;">
        <h1 style="font-size:20px; font-weight:800; margin: 0 0 12px;">${title}</h1>
        <pre style="white-space: pre-wrap; background:#0b1220; color:#e5e7eb; padding:16px; border-radius:12px; overflow:auto;">${details}</pre>
        <p style="margin-top:12px; color:#6b7280; font-size:12px;">
          Questa schermata appare solo se c’è un errore JavaScript a runtime.
        </p>
      </div>
    `;
  } catch {
    // ignore
  }
}

window.addEventListener('error', (e) => {
  const ev = e as ErrorEvent;
  const msg = (ev.error && (ev.error.stack || ev.error.message)) ? (ev.error.stack || ev.error.message) : (ev.message || String(e));
  showFatal('Errore JavaScript (window.error)', msg);
});

window.addEventListener('unhandledrejection', (e: PromiseRejectionEvent) => {
  const r: any = e.reason;
  const msg = (r && (r.stack || r.message)) ? (r.stack || r.message) : String(r);
  showFatal('Promise rejection non gestita', msg);
});

const rootElement = document.getElementById('root');
if (!rootElement) {
  showFatal('Root element mancante', 'Non trovo <div id="root"></div> in index.html');
  throw new Error("Could not find root element to mount to");
}

try {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} catch (err: any) {
  showFatal('Errore durante render React', err?.stack || err?.message || String(err));
  throw err;
}