function esc(s: string): string {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}

export function renderMarkdown(text: string): string {
  if (!text) return "";

  const codeBlocks: string[] = [];
  let h = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
    const i = codeBlocks.length;
    codeBlocks.push(
      `<pre style="background:var(--surface);padding:10px;border-radius:6px;overflow-x:auto;border:1px solid var(--border);margin:8px 0"><code>${esc(code.trimEnd())}</code></pre>`
    );
    return `\x00CB${i}\x00`;
  });

  h = esc(h);

  h = h.replace(/`([^`]+)`/g, '<code style="background:var(--surface);padding:1px 5px;border-radius:3px;font-size:0.9em">$1</code>');
  h = h.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
  h = h.replace(/\*([^*]+)\*/g, "<em>$1</em>");
  h = h.replace(/^### (.+)$/gm, '<h4 style="margin:12px 0 4px;font-size:14px">$1</h4>');
  h = h.replace(/^## (.+)$/gm, '<h3 style="margin:12px 0 4px;font-size:15px">$1</h3>');
  h = h.replace(/^# (.+)$/gm, '<h3 style="margin:12px 0 4px;font-size:16px">$1</h3>');
  h = h.replace(/^[*-] (.+)$/gm, '<li style="margin-left:20px">$1</li>');
  h = h.replace(/^\d+\. (.+)$/gm, '<li style="margin-left:20px">$1</li>');
  h = h.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color:var(--gold)">$1</a>');

  h = h.replace(/\n\n/g, "</p><p>");
  h = h.replace(/\n/g, "<br>");

  h = h.replace(/\x00CB(\d+)\x00/g, (_, i) => codeBlocks[+i]);

  return "<p>" + h + "</p>";
}