import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import ErrorBoundary from './components/ErrorBoundary.jsx'
import { enableCopyProtection } from './utils/protection.js'

// Função para verificar compatibilidade básica
function checkBrowserCompatibility() {
  // Verificar recursos essenciais
  const requiredFeatures = {
    fetch: typeof fetch !== 'undefined',
    Promise: typeof Promise !== 'undefined',
    Array: typeof Array !== 'undefined' && Array.isArray,
    Object: typeof Object !== 'undefined',
  }

  const missingFeatures = Object.entries(requiredFeatures)
    .filter(([_, supported]) => !supported)
    .map(([feature]) => feature)

  if (missingFeatures.length > 0) {
    console.error('Recursos não suportados:', missingFeatures)
    return false
  }

  return true
}

// Função para mostrar mensagem de erro se o React não carregar
function showFallbackError() {
  const root = document.getElementById('root')
  if (root) {
    root.innerHTML = `
      <div style="min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
        <h1 style="font-size: 24px; margin-bottom: 16px; color: #333;">Carregando...</h1>
        <p style="font-size: 16px; color: #666; margin-bottom: 24px;">Se esta mensagem persistir, seu navegador pode não ser compatível.</p>
        <button onclick="window.location.reload()" style="padding: 12px 24px; font-size: 16px; background-color: #fb373c; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">
          Recarregar Página
        </button>
      </div>
    `
  }
}

// Verificar compatibilidade antes de inicializar
if (!checkBrowserCompatibility()) {
  console.error('Navegador não compatível com recursos necessários')
  showFallbackError()
} else {
  try {
    // Habilitar proteção contra cópia (com tratamento de erro)
    try {
      enableCopyProtection()
    } catch (e) {
      console.warn('Erro ao habilitar proteção:', e)
    }

    // Verificar se o elemento root existe
    const rootElement = document.getElementById('root')
    if (!rootElement) {
      throw new Error('Elemento #root não encontrado no DOM')
    }

    // Tentar criar root e renderizar
    const root = createRoot(rootElement)
    
    root.render(
      <StrictMode>
        <ErrorBoundary>
          <App />
        </ErrorBoundary>
      </StrictMode>
    )
  } catch (error) {
    console.error('Erro ao inicializar React:', error)
    showFallbackError()
    
    // Tentar enviar erro para analytics
    if (window.gtag) {
      try {
        window.gtag('event', 'exception', {
          description: `React initialization error: ${error.toString()}`,
          fatal: true
        })
      } catch (e) {
        // Ignorar erros de analytics
      }
    }
  }
}