import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.tsx';
import { ErrorBoundary } from './components/ErrorBoundary.tsx';
import { reportSystemError } from './services/errorLoggingService.ts';
import './index.css';

// Global error handlers to capture unexpected errors and 404s in production, while suppressing harmless websocket dev noise
if (typeof window !== 'undefined') {
  window.addEventListener('unhandledrejection', (event) => {
    const reason = event.reason;
    const msg = String(reason?.message || reason || '');
    if (msg.includes('WebSocket') || msg.includes('websocket') || msg.includes('failed to fetch')) {
      // Suppress dev vite websocket connection errors
      event.preventDefault();
      return;
    }
    reportSystemError({
      type: 'unhandled',
      level: 'ERROR',
      errorMessage: msg || 'Unhandled Promise Rejection',
      route: typeof window !== 'undefined' ? window.location.pathname : '/',
    });
  });

  window.addEventListener('error', (event) => {
    const msg = String(event.message || '');
    if (msg.includes('WebSocket') || msg.includes('websocket') || msg.includes('ResizeObserver')) {
      return;
    }
    reportSystemError({
      type: 'javascript',
      level: 'ERROR',
      errorMessage: msg || 'Window Error Event',
      route: typeof window !== 'undefined' ? window.location.pathname : '/',
      metadata: {
        filename: event.filename ? event.filename.split('/').pop() : undefined,
        lineno: event.lineno,
      },
    });
  });
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </StrictMode>,
);