import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { initI18n } from './services/i18nService';
import { scheduleIdleCallback } from './utils/requestIdleCallback';
import { initPipModeListener } from './utils/pipMode';

// CRITICAL FIX: Global error handler to prevent white screen on PWA startup errors
window.addEventListener('error', event => {
  // OPTIMIZATION: Suppress browser cache operation errors for videos - they're handled by retry logic
  if (
    event.message?.includes('ERR_CACHE_OPERATION_NOT_SUPPORTED') ||
    event.filename?.includes('.mp4') ||
    event.filename?.includes('.webm')
  ) {
    // Silently ignore - retry mechanism will handle it
    return;
  }
  console.error('🚨 Global error caught:', event.error);
  // Don't prevent default - let React error boundary handle it
});

window.addEventListener('unhandledrejection', event => {
  // Suppress known-safe errors (thumbnail generation failures are handled by thumbnailCacheService)
  const reason = event.reason;
  const reasonStr = reason ? reason.message || String(reason) : '';
  const thumbnailPatterns = [
    'Thumbnail generation timed out',
    'Thumbnail generation skipped',
    'Video failed to load for thumbnail',
  ];
  if (thumbnailPatterns.some(p => reasonStr.includes(p))) {
    // Already handled by thumbnailCacheService — suppress to avoid console spam
    return;
  }
  console.error('🚨 Unhandled promise rejection:', event.reason);
  // Don't prevent default - let React error boundary handle it
});

const rootElement = document.getElementById('root');
if (!rootElement) {
  throw new Error('Could not find root element to mount to');
}

const scheduleServiceWorkerRegistration = () => {
  if (!import.meta.env.PROD || typeof window === 'undefined') {
    return;
  }

  const register = () => {
    scheduleIdleCallback(
      () => {
        void import('./src/serviceWorkerRegistration')
          .then(module => {
            module.register();
          })
          .catch(error => {
            console.error('⚠️ Deferred service worker registration failed:', error);
          });
      },
      { timeout: 5000 }
    );
  };

  if (document.readyState === 'complete') {
    register();
    return;
  }

  window.addEventListener('load', register, { once: true });
};

async function bootstrap() {
  try {
    await initI18n();
  } catch (error) {
    console.warn('⚠️ i18n initialization failed, falling back to English:', error);
  }

  // Listen for native Android PiP transitions (if any) and toggle `html.pip-mode`.
  // Safe no-op on web.
  initPipModeListener();

  // CRITICAL FIX: Wrap app rendering in try-catch to prevent white screen
  try {
    const root = ReactDOM.createRoot(rootElement!);

    // ⚡ PERFORMANCE: Only use StrictMode in development to prevent double-rendering in production
    if (import.meta.env.DEV) {
      root.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>
      );
    } else {
      root.render(<App />);
    }

    scheduleServiceWorkerRegistration();
  } catch (error) {
    console.error('🚨 CRITICAL: Failed to render app:', error);
    // Show user-friendly error message instead of white screen
    rootElement!.innerHTML = `
      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: #111827; color: #fff; font-family: system-ui; padding: 20px; text-align: center;">
        <h1 style="font-size: 24px; margin-bottom: 20px;">⚠️ App Failed to Load</h1>
        <p style="margin-bottom: 20px;">Please try refreshing the page or clearing your cache.</p>
        <button onclick="window.location.href='/?clearCache=true'" style="padding: 12px 24px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;">
          Clear Cache & Reload
        </button>
        <p style="margin-top: 20px; font-size: 12px; color: #9ca3af;">Error: ${error instanceof Error ? error.message : 'Unknown error'}</p>
      </div>
    `;
  }
}

void bootstrap();