import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { HelmetProvider } from 'react-helmet-async';
import { router } from './routes';
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
import './index.css';

// Enhanced error handling and logging
const handleError = (error: Error, errorInfo?: any) => {
  console.error('Application Error:', error);
  if (errorInfo) {
    console.error('Error Info:', errorInfo);
  }
};

// Time-slicing utility to break up heavy tasks
const yieldToMain = () => {
  return new Promise(resolve => {
    if ('scheduler' in window && 'postTask' in (window as any).scheduler) {
      (window as any).scheduler.postTask(resolve, { priority: 'background' });
    } else {
      setTimeout(resolve, 0);
    }
  });
};

// Optimized app initialization with time-slicing to prevent blocking
const initializeApp = async () => {
  try {
    const rootElement = document.getElementById('root');
    
    if (!rootElement) {
      throw new Error('Root element not found - DOM may not be ready');
    }

    // Defer hiding noscript to avoid blocking initial render
    const hideNoJsFallback = () => {
      const noJsFallback = document.querySelector('.no-js-fallback');
      if (noJsFallback) {
        (noJsFallback as HTMLElement).style.display = 'none';
      }
    };

    // Use scheduler API for non-blocking execution
    if ('scheduler' in window && 'postTask' in (window as any).scheduler) {
      (window as any).scheduler.postTask(hideNoJsFallback, { priority: 'background' });
    } else {
      requestIdleCallback(hideNoJsFallback, { timeout: 100 });
    }

    // Create root immediately to start rendering
    const root = createRoot(rootElement);

    // Yield to main thread before heavy render
    await yieldToMain();

    root.render(
      <StrictMode>
        <HelmetProvider>
          <ErrorBoundary>
            <RouterProvider 
              router={router}
              fallbackElement={
                <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-cargo-blue to-cargo-green">
                  <div className="text-center p-8 bg-white rounded-lg shadow-lg max-w-md mx-4">
                    <div className="loading-spinner mx-auto mb-4"></div>
                    <h1 className="text-3xl font-bold text-gray-800 mb-4">Cargo to Pakistan UAE</h1>
                    <p className="text-gray-600">Initializing application...</p>
                  </div>
                </div>
              }
            />
          </ErrorBoundary>
        </HelmetProvider>
      </StrictMode>
    );

    console.log('✅ React application initialized successfully');
    
    // Load analytics only after user interaction to reduce unused JS
    const loadAnalyticsOnInteraction = async () => {
      await yieldToMain(); // Ensure main thread is free
      
      try {
        const { initAnalyticsOnInteraction } = await import('./services/analytics/scriptLoader');
        initAnalyticsOnInteraction();
      } catch (error) {
        console.warn('Analytics loading failed:', error);
      }
    };

    // Initialize analytics interaction listeners with maximum deferral
    if ('requestIdleCallback' in window) {
      window.requestIdleCallback(loadAnalyticsOnInteraction, { timeout: 15000 });
    } else {
      setTimeout(loadAnalyticsOnInteraction, 8000);
    }
    
  } catch (error) {
    console.error('❌ Failed to initialize React application:', error);
    handleError(error as Error);
    
    // Fallback: Show error message in the root element
    const rootElement = document.getElementById('root');
    if (rootElement) {
      rootElement.innerHTML = `
        <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-cargo-blue to-cargo-green">
          <div class="text-center p-8 bg-white rounded-lg shadow-lg max-w-md mx-4">
            <h1 class="text-3xl font-bold text-gray-800 mb-4">Cargo to Pakistan UAE</h1>
            <p class="text-gray-600 mb-4">Failed to load application</p>
            <p class="text-sm text-red-600 mb-4">${(error as Error).message}</p>
            <button 
              onclick="window.location.reload()" 
              class="bg-cargo-blue text-white px-6 py-2 rounded hover:bg-cargo-blue/90 transition-colors"
            >
              Reload Page
            </button>
          </div>
        </div>
      `;
    }
  }
};

// Optimized DOM ready check with immediate execution for faster TTI
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initializeApp, { once: true, passive: true });
} else {
  // Use high-priority scheduling to minimize delay
  if ('scheduler' in window && 'postTask' in (window as any).scheduler) {
    (window as any).scheduler.postTask(initializeApp, { priority: 'user-blocking' });
  } else {
    // Immediate execution - no deferral for critical path
    initializeApp();
  }
}

// Optimized global error handlers with minimal overhead
window.addEventListener('error', (event) => {
  // Use scheduler to defer error handling completely
  const deferredErrorHandle = () => {
    handleError(new Error(event.message), {
      filename: event.filename,
      lineno: event.lineno,
      colno: event.colno
    });
  };

  if ('scheduler' in window && 'postTask' in (window as any).scheduler) {
    (window as any).scheduler.postTask(deferredErrorHandle, { priority: 'background' });
  } else {
    setTimeout(deferredErrorHandle, 0);
  }
}, { passive: true });

// Optimized unhandled promise rejection handler
window.addEventListener('unhandledrejection', (event) => {
  const deferredErrorHandle = () => {
    handleError(new Error(`Unhandled promise rejection: ${event.reason}`));
  };

  if ('scheduler' in window && 'postTask' in (window as any).scheduler) {
    (window as any).scheduler.postTask(deferredErrorHandle, { priority: 'background' });
  } else {
    setTimeout(deferredErrorHandle, 0);
  }
}, { passive: true });