import styles from './styles/review.css?inline';

async function boot(): Promise<void> {
  const param = window.CommentMateSettings?.reviewParam ?? 'review';
  if (new URL(window.location.href).searchParams.get(param) !== 'true' || document.getElementById('commentmate-root')) return;
  const host = document.createElement('div');
  host.id = 'commentmate-root';
  host.setAttribute('aria-live', 'polite');
  document.documentElement.append(host);
  const shadow = host.attachShadow({ mode: 'open' });
  const style = document.createElement('style');
  style.textContent = styles;
  shadow.append(style);
  const mount = document.createElement('div');
  mount.className = 'commentmate-app';
  shadow.append(mount);
  mount.setAttribute('role', 'status');
  mount.textContent = window.wp.i18n.__('Connecting to secure review…', 'commentmate');
  try {
    const { mountReview } = await import('./App');
    mount.removeAttribute('role');
    mount.textContent = '';
    mountReview(mount);
  } catch {
    mount.textContent = window.wp.i18n.__('The review could not load. Reload this page to try again.', 'commentmate');
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', boot, { once: true });
} else {
  boot();
}