import { StrictMode, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter } from 'react-router-dom'
import { HelmetProvider } from 'react-helmet-async'
import { LanguageProvider } from './context/LanguageContext'
import { AuthProvider } from './context/AuthContext'
import { initAnalytics } from './utils/analytics'

// React Router v7 future flags for smoother migration
const futureFlags = {
  v7_startTransition: true,
  v7_relativeSplatPath: true,
}

// After a redeploy, hashed chunks referenced by an already-open tab no longer
// exist; Vite fires 'vite:preloadError' when a dynamic import fails. Reload
// once to pick up the fresh index.html instead of crashing with a MIME error.
window.addEventListener('vite:preloadError', (event) => {
  event.preventDefault();
  const RELOAD_KEY = 'vadg_chunk_reload_at';
  const last = Number(sessionStorage.getItem(RELOAD_KEY) || 0);
  if (Date.now() - last > 60_000) {
    sessionStorage.setItem(RELOAD_KEY, String(Date.now()));
    window.location.reload();
  }
});

// Global error handler to suppress browser extension errors
// This prevents "Extension context invalidated" errors from cluttering the console
window.addEventListener('error', (event) => {
  const errorMessage = event.message || String(event.error || '');
  const errorSource = event.filename || '';
  
  // Suppress browser extension errors (Grammarly, language tools, etc.)
  if (
    errorMessage.includes('Extension context invalidated') ||
    errorSource.includes('all-frames.js') ||
    errorSource.includes('content-script') ||
    errorSource.includes('extension://')
  ) {
    event.preventDefault();
    // Silently ignore - these are harmless browser extension errors
    return false;
  }
}, true); // Use capture phase to catch errors early

// Handle unhandled promise rejections from browser extensions
window.addEventListener('unhandledrejection', (event) => {
  const errorMessage = String(event.reason || '');
  const errorStack = String(event.reason?.stack || '');
  
  // Suppress browser extension promise rejections
  if (
    errorMessage.includes('Extension context invalidated') ||
    errorStack.includes('all-frames.js') ||
    errorStack.includes('content-script') ||
    errorStack.includes('extension://')
  ) {
    event.preventDefault();
    // Silently ignore - these are harmless browser extension errors
    return false;
  }
});

// Suppress console logs in production for security
if (process.env.NODE_ENV === 'production') {
  // Disable console logging in production for performance and security
  // Only disable in production build, keep for development
  if (import.meta.env.MODE === 'production') {
    // Keep error logging but remove sensitive data
    const originalError = console.error;
    console.error = (...args: any[]) => {
      // Filter out browser extension errors
      const filtered = args.filter(arg => {
        const str = String(arg);
        // Filter out extension errors and sensitive data
        if (
          str.includes('Extension context invalidated') ||
          str.includes('all-frames.js') ||
          str.includes('content-script')
        ) {
          return false;
        }
        // Filter out tokens, passwords, API keys, etc.
        return !str.match(/(token|password|secret|key|api[_-]?key)/i);
      });
      if (filtered.length > 0) {
        originalError(...filtered);
      }
    };
    // Disable log and warn in production
    console.log = console.warn = () => {};
  }
}

// Initialize mock server in development
// We're commenting this out to use the real backend
// if (process.env.NODE_ENV === 'development') {
//   initMockServer();
// }

// Initialize analytics
initAnalytics().catch((error) => {
  if (process.env.NODE_ENV === 'development') {
    console.warn('Analytics initialization failed:', error);
  }
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <HelmetProvider>
      <BrowserRouter future={futureFlags}>
        <AuthProvider>
        <LanguageProvider>
        <Suspense
          fallback={(
            <div
              style={{
                minHeight: '100vh',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: '#f8fafc',
                color: '#1A3C73',
                fontFamily: 'Inter, system-ui, sans-serif',
                fontSize: '1rem',
                letterSpacing: '0.08em'
              }}
              aria-busy="true"
              aria-live="polite"
            >
              Loading experience…
            </div>
          )}
        >
          <App />
        </Suspense>
        </LanguageProvider>
        </AuthProvider>
      </BrowserRouter>
    </HelmetProvider>
  </StrictMode>,
)