import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

// Simple error handling for development
if (typeof window !== 'undefined') {
  const originalError = console.error;
  console.error = (...args: any[]) => {
    // Filter out browser extension errors (non-critical)
    const message = args[0]?.toString() || '';
    if (
      message.includes('message channel closed') ||
      message.includes('runtime.lastError') ||
      message.includes('Extension context invalidated')
    ) {
      // Silenciar estos errores (son de extensiones del navegador, no de nuestra app)
      return;
    }
    originalError.apply(console, args);
  };
}

// Registrar Service Worker para PWA (solo en producción)
if ('serviceWorker' in navigator) {
  // No registrar SW en desarrollo para evitar conflictos con Vite HMR
  const isDevelopment = import.meta.env.DEV || 
    window.location.hostname === 'localhost' || 
    window.location.hostname === '127.0.0.1' ||
    window.location.hostname === '[::1]';
  
  if (!isDevelopment) {
    // En producción, registrar SW normalmente
    window.addEventListener('load', () => {
      // Detectar base path dinámicamente (para GitHub Pages)
      const base = import.meta.env.BASE_URL || '/';
      navigator.serviceWorker
        .register(`${base}sw.js`, {
          updateViaCache: 'none', // Siempre verificar actualizaciones del SW
        })
        .then((registration) => {
          console.log('[SW] Registered:', registration.scope);
        })
        .catch((error) => {
          console.error('[SW] Registration failed:', error);
        });
    });
  }
}

// Renderizar la app
const rootElement = document.getElementById("root");
if (!rootElement) {
  throw new Error("Root element not found");
}

try {
  createRoot(rootElement).render(
    <App />
  );
} catch (error) {
  console.error('[React] Error rendering app:', error);
  // Simple error display
  const errorDiv = document.createElement('div');
  errorDiv.style.cssText = 'padding: 2rem; text-align: center; font-family: sans-serif; background: #fee2e2; color: #991b1b; border-radius: 8px;';
  
  const h1 = document.createElement('h1');
  h1.textContent = 'Error al cargar la aplicación';
  errorDiv.appendChild(h1);
  
  const p1 = document.createElement('p');
  p1.textContent = 'Por favor, recarga la página.';
  errorDiv.appendChild(p1);
  
  const p2 = document.createElement('p');
  p2.style.cssText = 'color: #666; font-size: 0.9rem; margin-top: 1rem;';
  p2.textContent = error instanceof Error ? error.message : String(error);
  errorDiv.appendChild(p2);
  
  rootElement.innerHTML = '';
  rootElement.appendChild(errorDiv);
  
  throw error;
}