import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { initPerformanceMonitoring } from './utils/performance';

// Enhanced error handling for deployment environments
const initializeApp = () => {
  try {
    // Initialize performance monitoring in production with safety
    if (process.env.NODE_ENV === 'production') {
      try {
        initPerformanceMonitoring();
      } catch (perfError) {
        // Silently handle performance monitoring errors
      }
    }

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

    if (!rootElement) {
      throw new Error('Root element not found');
    }

    const root = createRoot(rootElement);
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  } catch (error) {
    console.error('Failed to initialize app:', error);
    
    // Enhanced fallback for deployment environments
    const rootElement = document.getElementById('root');
    if (rootElement) {
      rootElement.innerHTML = `
        <div style="
          padding: 40px 20px; 
          text-align: center; 
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          max-width: 500px;
          margin: 50px auto;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          background: #f8fafc;
        ">
          <h1 style="color: #1e293b; margin-bottom: 16px;">Dream World Tours</h1>
          <p style="color: #64748b; margin-bottom: 20px;">Application is starting up...</p>
          <p style="color: #64748b; font-size: 14px;">Please refresh the page if this message persists.</p>
          <button 
            onclick="window.location.reload()" 
            style="
              background: #3b82f6; 
              color: white; 
              border: none; 
              padding: 10px 20px; 
              border-radius: 6px; 
              cursor: pointer; 
              margin-top: 20px;
            "
          >
            Refresh Page
          </button>
        </div>
      `;
    }
  }
};

// Initialize the app
initializeApp();