import type React from 'react';
import ReactDOM from 'react-dom/client';

export function renderInShadowRoot(
  id: string,
  element: React.ReactNode
): {
  unmount: () => void;
} {
  const div = document.createElement('div');
  div.id = id;
  // Position absolute removes element from document flow, preventing layout impact
  div.style.position = 'absolute';
  document.body.appendChild(div);

  const shadowRoot = div.attachShadow({ mode: 'open' });

  // Inject reset styles to make the portal truly inert (invisible to layout and browser inspector)
  // This is applied via JS to avoid affecting native platforms where :host becomes :root
  const resetStyle = document.createElement('style');
  resetStyle.textContent = `
    :host {
      all: initial;
      direction: ltr;
      position: absolute;
    }
  `;
  shadowRoot.appendChild(resetStyle);

  document.querySelectorAll('style').forEach((styleEl) => {
    const moduleName = styleEl.getAttribute('data-expo-css-hmr');
    const isLogBoxStyle = moduleName && moduleName.includes('expo_log_box');

    const isReactNativeStyle = styleEl.id === 'react-native-stylesheet';

    if (isLogBoxStyle || isReactNativeStyle) {
      shadowRoot.appendChild(styleEl.cloneNode(true));
    }
  });

  const shadowContainer = document.createElement('div');
  shadowRoot.appendChild(shadowContainer);

  let currentRoot: ReactDOM.Root | null = ReactDOM.createRoot(shadowContainer);
  currentRoot.render(element);

  return {
    unmount: () => {
      currentRoot?.unmount();
      currentRoot = null;
      document.getElementById(id)?.remove();
    },
  };
}