import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { ErrorBoundary } from './components/ErrorBoundary';
import { initializeEnvironment } from './lib/envValidation';
import './index.css';
import './i18n/i18n';

try {
  initializeEnvironment();
} catch (error) {
  console.error('Failed to initialize application:', error);
  document.body.innerHTML = `
    <div style="min-height: 100vh; background: #0f172a; display: flex; align-items: center; justify-center; padding: 1rem; font-family: system-ui, -apple-system, sans-serif;">
      <div style="max-width: 28rem; width: 100%; background: #1e293b; border-radius: 0.75rem; padding: 2rem; border: 1px solid #334155;">
        <div style="text-align: center;">
          <div style="width: 4rem; height: 4rem; background: rgba(239, 68, 68, 0.2); border-radius: 50%; display: flex; align-items: center; justify-center; margin: 0 auto 1rem;">
            <svg style="width: 2rem; height: 2rem; color: #ef4444;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
          </div>
          <h1 style="font-size: 1.5rem; font-weight: bold; color: white; margin-bottom: 0.5rem;">Configuration Error</h1>
          <p style="color: #94a3b8; margin-bottom: 1.5rem;">The application is not properly configured.</p>
          <div style="background: #0f172a; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1.5rem; text-align: left;">
            <p style="font-size: 0.875rem; color: #cbd5e1; font-family: monospace; word-break: break-all;">${error instanceof Error ? error.message : 'Unknown error'}</p>
          </div>
          <p style="font-size: 0.875rem; color: #64748b;">Please contact the system administrator.</p>
        </div>
      </div>
    </div>
  `;
  throw error;
}

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