interface RenderStartupErrorOptions {
  reload?: () => void;
  root?: HTMLElement | null;
}

/**
 * 在 Vue 应用尚未挂载时展示可恢复的启动错误，避免异常后只剩白屏。
 */
function renderStartupError(options: RenderStartupErrorOptions = {}) {
  const root = options.root ?? document.querySelector<HTMLElement>('#app');
  if (!root) {
    return false;
  }

  const container = document.createElement('main');
  container.className = 'startup-error';
  container.setAttribute('role', 'alert');

  const content = document.createElement('div');
  content.className = 'startup-error__content';

  const title = document.createElement('h1');
  title.className = 'startup-error__title';
  title.textContent = '页面加载失败';

  const description = document.createElement('p');
  description.className = 'startup-error__description';
  description.textContent = '请刷新后重试';

  const retryButton = document.createElement('button');
  retryButton.className = 'startup-error__retry';
  retryButton.type = 'button';
  retryButton.textContent = '重新加载';
  retryButton.addEventListener('click', () => {
    (options.reload ?? (() => window.location.reload()))();
  });

  content.append(title, description, retryButton);
  container.append(content);
  root.replaceChildren(container);
  retryButton.focus();
  return true;
}

export { renderStartupError };