import { createRoot } from 'react-dom/client'
import { HelmetProvider } from 'react-helmet-async'
import App from './App.tsx'
import './index.css'
import './styles/compatibility.css'
import { setupRoutePreloading } from './utils/routePreload'

const recoverFromStaleAssets = async () => {
  const marker = 'satubooster-stale-assets-recovered';
  if (sessionStorage.getItem(marker) === '1') return;
  sessionStorage.setItem(marker, '1');

  try {
    if ('caches' in window) {
      const keys = await caches.keys();
      await Promise.all(keys.map((key) => caches.delete(key)));
    }
    if ('serviceWorker' in navigator) {
      const registrations = await navigator.serviceWorker.getRegistrations();
      await Promise.all(registrations.map((registration) => registration.unregister()));
    }
  } catch {}

  window.location.reload();
};

window.addEventListener('error', (event) => {
  const target = event.target as HTMLElement | null;
  const src = target instanceof HTMLScriptElement
    ? target.src
    : target instanceof HTMLLinkElement
      ? target.href
      : '';
  const message = event.message || '';

  if (src.includes('/assets/') || message.includes('Failed to fetch dynamically imported module')) {
    void recoverFromStaleAssets();
  }
}, true);

window.addEventListener('unhandledrejection', (event) => {
  const message = String(event.reason?.message || event.reason || '');
  if (message.includes('Failed to fetch dynamically imported module') || message.includes('Importing a module script failed')) {
    void recoverFromStaleAssets();
  }
});

// Preload critical routes immediately (not lazily)
const preloadCriticalRoutes = () => {
  // Start loading these chunks immediately for faster navigation
  import('./pages/Leads');
};

// Start preloading immediately - don't wait
preloadCriticalRoutes();

// Setup route preloading on hover
setupRoutePreloading();

// Console branding
console.log(
  '%c\n' +
  '██████╗ ███████╗███████╗██╗  ██╗████████╗██╗\n' +
  '██╔══██╗██╔════╝██╔════╝██║  ██║╚══██╔══╝██║\n' +
  '██║  ██║█████╗  ███████╗███████║   ██║   ██║\n' +
  '██║  ██║██╔══╝  ╚════██║██╔══██║   ██║   ██║\n' +
  '██████╔╝███████╗███████║██║  ██║   ██║   ██║\n' +
  '╚═════╝ ╚══════╝╚══════╝╚═╝  ╚═╝   ╚═╝   ╚═╝\n' +
  '  ████████╗███████╗ ██████╗██╗  ██╗\n' +
  '  ╚══██╔══╝██╔════╝██╔════╝██║  ██║\n' +
  '     ██║   █████╗  ██║     ███████║\n' +
  '     ██║   ██╔══╝  ██║     ██╔══██║\n' +
  '     ██║   ███████╗╚██████╗██║  ██║\n' +
  '     ╚═╝   ╚══════╝ ╚═════╝╚═╝  ╚═╝\n',
  'color: #2563eb; font-family: monospace; font-size: 12px; font-weight: bold;'
);
console.log(
  '%c DESHTI TECHNOLOGIES %c SatuBooster CRM Platform ',
  'background: #2563eb; color: white; padding: 4px 8px; border-radius: 4px 0 0 4px; font-weight: bold;',
  'background: #1e40af; color: white; padding: 4px 8px; border-radius: 0 4px 4px 0;'
);
console.log('%c⚠️ This is a browser feature for developers. Do not paste any code here.', 'color: #ef4444; font-size: 14px; font-weight: bold;');

// Use concurrent mode for better performance
const root = createRoot(document.getElementById("root")!);
root.render(
  <HelmetProvider>
    <App />
  </HelmetProvider>
);

// Disable the old service worker: stale cached chunks can blank the CRM after deploys.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.getRegistrations()
      .then((registrations) => Promise.all(registrations.map((registration) => registration.unregister())))
      .catch(() => {});
  });
}

// Preload secondary routes after initial render
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    import('./pages/Calendar');
    import('./pages/Team');
    import('./pages/Settings');
  }, { timeout: 3000 });
}