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

// Suppress ResizeObserver loop limit exceeded error
// This is a benign error often thrown by Monaco Editor or resizable panels
const originalError = console.error;
console.error = (...args) => {
  if (
    typeof args[0] === 'string' &&
    (args[0].includes('ResizeObserver loop limit exceeded') ||
     args[0].includes('ResizeObserver loop completed with undelivered notifications.'))
  ) {
    return;
  }
  originalError.call(console, ...args);
};

window.addEventListener('error', (e) => {
  if (
    e.message === 'ResizeObserver loop limit exceeded' ||
    e.message === 'ResizeObserver loop completed with undelivered notifications.'
  ) {
    e.stopImmediatePropagation();
  }
});

// Robust fix for ResizeObserver loop error
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback: ResizeObserverCallback) {
    super((entries, observer) => {
      window.requestAnimationFrame(() => {
        callback(entries, observer);
      });
    });
  }
};

// ── Pop-out routing ─────────────────────────────────────────────────────────
// When the URL contains ?popout=<panelId>, render only the detached panel shell
// instead of the full IDE. This allows tool tabs to open in separate windows.
const popoutParam = new URLSearchParams(window.location.search).get('popout');

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    {popoutParam ? <PopOutShell panelId={popoutParam} /> : <App />}
  </StrictMode>,
);