import { StrictMode, Suspense } from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { ErrorBoundary } from './components/ErrorBoundary';

// Suppress benign third-party library logs and HMR errors to keep logging pristine
const originalConsoleError = console.error;
const originalConsoleWarn = console.warn;

const isBenignLog = (args: any[]) => {
  return args.some(arg => {
    if (!arg) return false;
    try {
      const str = String(arg).toLowerCase();
      if (str.includes('bloomfilter') || 
          str.includes('bloom_filter') ||
          str.includes('invalid hash count') ||
          str.includes('websocket') ||
          str.includes('failed to connect to websocket') ||
          str.includes('[vite] connect')) {
        return true;
      }
      if (typeof arg === 'object') {
        const msg = String(arg.message || '').toLowerCase();
        if (msg.includes('bloomfilter') || 
            msg.includes('bloom_filter') ||
            msg.includes('invalid hash count') ||
            msg.includes('websocket') ||
            msg.includes('failed to connect to websocket')) {
          return true;
        }
      }
    } catch (e) {
      // Ignore errors in interceptor
    }
    return false;
  });
};

console.error = function (...args) {
  if (isBenignLog(args)) {
    return;
  }
  originalConsoleError.apply(console, args);
};

console.warn = function (...args) {
  if (isBenignLog(args)) {
    return;
  }
  originalConsoleWarn.apply(console, args);
};

// Global listener for dynamic import failures (stale builds)
window.addEventListener('error', (e) => {
  const errorMessage = e.message || "";
  if (
    errorMessage.includes("Failed to fetch dynamically imported module") ||
    errorMessage.includes("Importing a module script failed") ||
    errorMessage.includes("error loading dynamically imported module") ||
    errorMessage.includes("CSS chunk loading failed") ||
    errorMessage.includes("Loading chunk") ||
    errorMessage.includes("module not found")
  ) {
    const pageHasAlreadyBeenForceRefreshed = JSON.parse(
      window.sessionStorage.getItem('page-has-been-force-refreshed') || 'false'
    );

    if (!pageHasAlreadyBeenForceRefreshed) {
      console.warn("[ARENA_RECOVERY_GLOBAL] Stale build detected via Error event. Reloading...");
      window.sessionStorage.setItem('page-has-been-force-refreshed', 'true');
      window.location.reload();
    }
  }
}, true);

window.addEventListener('unhandledrejection', (e) => {
  const errorMessage = e.reason?.message || String(e.reason || '');
  if (errorMessage.includes("BloomFilter") || errorMessage.includes("Invalid hash count") || errorMessage.includes("bloomfilter")) {
    e.preventDefault();
    return;
  }
  if (
    errorMessage.includes("Failed to fetch dynamically imported module") ||
    errorMessage.includes("Importing a module script failed") ||
    errorMessage.includes("error loading dynamically imported module") ||
    errorMessage.includes("CSS chunk loading failed") ||
    errorMessage.includes("Loading chunk") ||
    errorMessage.includes("module not found")
  ) {
    const pageHasAlreadyBeenForceRefreshed = JSON.parse(
      window.sessionStorage.getItem('page-has-been-force-refreshed') || 'false'
    );

    if (!pageHasAlreadyBeenForceRefreshed) {
      console.warn("[ARENA_RECOVERY_GLOBAL] Stale build detected via UnhandledRejection. Reloading...");
      window.sessionStorage.setItem('page-has-been-force-refreshed', 'true');
      window.location.reload();
    }
  }
});

const rootElement = document.getElementById('root');

if (!rootElement) {
  const msg = "CRITICAL: Root element '#root' not found in DOM.";
  console.error(msg);
  document.body.innerHTML = `<div style="background:#050505; color:#ff4444; padding:40px; font-family:monospace; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center;">
    <div>
      <h1 style="margin-bottom:20px;">SYSTEM BOOT FAILURE</h1>
      <p style="color:#666; font-size:12px;">${msg}</p>
      <button onclick="window.location.reload()" style="margin-top:20px; background:white; color:black; border:none; padding:10px 20px; font-weight:bold; cursor:pointer;">RETRY LOAD</button>
    </div>
  </div>`;
} else {
  console.log("[ARENA_BOOT] Rendering root with Suspense boundary...");
  createRoot(rootElement).render(
    <StrictMode>
      <ErrorBoundary>
        <Suspense fallback={<div style={{ background: '#050505', height: '100vh' }} />}>
          <App />
        </Suspense>
      </ErrorBoundary>
    </StrictMode>,
  );
}