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

const rootElement = document.getElementById('root');

function renderFatalError(message) {
  if (!rootElement) return;
  rootElement.innerHTML = `
    <div style="
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background: #000;
      color: #f5f5f0;
      font-family: Inter, system-ui, sans-serif;
    ">
      <div style="max-width: 560px; width: 100%; text-align: center;">
        <p style="margin: 0 0 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; font-size: 12px;">Pwallq / Runtime Error</p>
        <h1 style="margin: 0 0 16px; font-family: Georgia, serif; font-size: 40px; line-height: 1;">页面加载失败</h1>
        <p style="margin: 0; opacity: 0.8; line-height: 1.7;">${message}</p>
      </div>
    </div>
  `;
}

try {
  if (!rootElement) {
    throw new Error('Root container #root not found.');
  }

  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );
} catch (error) {
  console.error(error);
  renderFatalError(error instanceof Error ? error.message : 'Unknown boot error.');
}

window.addEventListener('error', (event) => {
  console.error(event.error || event.message);
});

window.addEventListener('unhandledrejection', (event) => {
  console.error(event.reason);
});