function esc(str) {
  const d = document.createElement('div');
  d.textContent = String(str ?? '');
  return d.innerHTML;
}

const EMPTY_ICON_SVG = `
  <svg class="app-empty-state-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
  </svg>
`;

export function renderEmptyState(options = {}) {
  const message = String(options.message || '').trim();
  if (!message) {
    return '';
  }

  const hint = String(options.hint || '').trim();
  const sizeRaw = String(options.size || 'compact').trim().toLowerCase();
  const size = ['default', 'compact', 'small'].includes(sizeRaw) ? sizeRaw : 'compact';
  const alignRaw = String(options.align || 'center').trim().toLowerCase();
  const align = ['center', 'left'].includes(alignRaw) ? alignRaw : 'center';
  const icon = options.icon === true;

  return `<div class="app-empty-state" data-size="${esc(size)}" data-align="${esc(align)}">
    ${icon ? EMPTY_ICON_SVG : ''}
    <p class="app-empty-state-message">${esc(message)}</p>
    ${hint ? `<small class="app-empty-state-hint">${esc(hint)}</small>` : ''}
  </div>`;
}