function escapeHtml(value) {
  return String(value).replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"}[c]));
}

function safeUrl(value) {
  const url = String(value).trim();
  if (/^(https?:\/\/|mailto:|\/|\.\/|\.\.\/|#)/i.test(url)) return escapeHtml(url);
  return "#";
}

const emoji = {
  smile:"😄", joy:"😂", heart:"❤️", thumbs_up:"👍", thumbsup:"👍", thumbs_down:"👎",
  fire:"🔥", rocket:"🚀", tada:"🎉", warning:"⚠️", white_check_mark:"✅", x:"❌",
  eyes:"👀", bulb:"💡", memo:"📝", pushpin:"📌", bug:"🐛", sparkles:"✨",
  thinking:"🤔", clap:"👏", ok_hand:"👌", pray:"🙏", muscle:"💪", coffee:"☕",
  tent:"⛺", star:"⭐", checkered_flag:"🏁"
};

function inline(value) {
  const tokens = [];
  const stash = html => {
    const token = `\u0000T${tokens.length}\u0000`;
    tokens.push(html);
    return token;
  };
  let html = escapeHtml(value);

  html = html.replace(/`([^`]+)`/g, (_, code) => stash(`<code>${code}</code>`));
  html = html.replace(/!\[([^\]]*)\]\(([^\s)]+)(?:\s+["']([^"']*)["'])?\)/g, (_, alt, url, title) => {
    const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
    return stash(`<img src="${safeUrl(url)}" alt="${alt}" loading="lazy" decoding="async"${titleAttr}>`);
  });
  html = html.replace(/\[([^\]]+)\]\(([^\s)]+)(?:\s+["']([^"']*)["'])?\)/g, (_, label, url, title) => {
    const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
    return stash(`<a href="${safeUrl(url)}" target="_blank" rel="noopener noreferrer"${titleAttr}>${label}</a>`);
  });
  html = html.replace(/\[\^([^\]\s]+)\]/g, (_, id) => stash(`<sup class="footnote-ref"><a href="#fn-${escapeHtml(id)}" id="fnref-${escapeHtml(id)}">?</a></sup>`));

  html = html
    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
    .replace(/~~([^~]+)~~/g, "<s>$1</s>")
    .replace(/==([^=]+)==/g, "<mark>$1</mark>")
    .replace(/\*([^*]+)\*/g, "<em>$1</em>")
    .replace(/(?<!~)~([^~\n]+)~(?!~)/g, "<sub>$1</sub>")
    .replace(/\^([^^\n]+)\^/g, "<sup>$1</sup>")
    .replace(/:([a-z0-9_+-]+):/gi, (match, name) => emoji[name] || match);

  html = html.replace(/(^|[\s(])((?:https?:\/\/|mailto:)[^\s<]+)/gi, (match, prefix, url) => {
    const clean = url.replace(/[.,!?;:]+$/, "");
    const suffix = url.slice(clean.length);
    return `${prefix}${stash(`<a href="${safeUrl(clean)}" target="_blank" rel="noopener noreferrer">${clean}</a>`)}${suffix}`;
  });

  return html.replace(/\u0000T(\d+)\u0000/g, (_, index) => tokens[Number(index)] || "");
}


const languageAliases = {
  js: "javascript", javascript: "javascript", jsx: "javascript",
  ts: "typescript", typescript: "typescript", tsx: "typescript",
  py: "python", python: "python",
  rb: "ruby", ruby: "ruby",
  rs: "rust", rust: "rust",
  php: "php",
  sh: "bash", shell: "bash", bash: "bash", zsh: "bash",
  c: "c", h: "c",
  cpp: "cpp", "c++": "cpp", cxx: "cpp", hpp: "cpp",
  cs: "csharp", "c#": "csharp", csharp: "csharp",
  java: "java", kotlin: "kotlin", kt: "kotlin",
  go: "go", golang: "go",
  swift: "swift", dart: "dart", scala: "scala",
  html: "html", htm: "html", xml: "xml", svg: "xml",
  css: "css", scss: "scss", sass: "scss", less: "less",
  json: "json", jsonc: "json", yaml: "yaml", yml: "yaml", toml: "ini", ini: "ini",
  sql: "sql", graphql: "graphql", gql: "graphql",
  md: "markdown", markdown: "markdown",
  dockerfile: "dockerfile", docker: "dockerfile",
  makefile: "makefile", make: "makefile",
  powershell: "powershell", ps1: "powershell",
  lua: "lua", perl: "perl", pl: "perl", r: "r", matlab: "matlab",
  nginx: "nginx", apache: "apache", diff: "diff", patch: "diff",
  text: "plaintext", txt: "plaintext", plaintext: "plaintext", none: "plaintext",
  mermaid: "mermaid"
};

function normalizeLanguage(value) {
  const language = String(value || "").trim().toLowerCase();
  if (!language) return "";
  return languageAliases[language] || language.replace(/[^a-z0-9_-]/g, "");
}

const attrs = (line, editable = false, prefix = "", suffix = "", lineOffset = 0) => ` class="preview-source-line${editable ? " preview-editable" : ""}" data-source-line="${line + lineOffset + 1}"${editable ? ` contenteditable="true" spellcheck="true" data-source-prefix="${escapeHtml(prefix)}" data-source-suffix="${escapeHtml(suffix)}"` : ""}`;
const isPlainText = line => !/[`*_~^=\[\]<>|:#]/.test(line) && !/^\s*(?:[-+*>]|\d+\.)\s/.test(line);

function splitTableRow(line) {
  let value = line.trim();
  if (value.startsWith("|")) value = value.slice(1);
  if (value.endsWith("|")) value = value.slice(0, -1);
  return value.split("|").map(cell => cell.trim().replace(/&#124;/g, "|"));
}

function tableDelimiter(line) {
  const cells = splitTableRow(line);
  if (!cells.length || !cells.every(cell => /^:?-{3,}:?$/.test(cell))) return null;
  return cells.map(cell => cell.startsWith(":") && cell.endsWith(":") ? "center" : cell.endsWith(":") ? "right" : "left");
}

function headingSlug(value) {
  return String(value)
    .replace(/\{#[A-Za-z][\w:.-]*\}\s*$/, "")
    .replace(/[`*_~^=<>]/g, "")
    .replace(/:([a-z0-9_+-]+):/gi, "$1")
    .toLowerCase().trim()
    .replace(/[^a-z0-9\u00c0-\u024f\u1e00-\u1eff]+/g, "-")
    .replace(/^-+|-+$/g, "") || "section";
}

function collectHeadings(lines) {
  const used = new Map();
  const headings = [];
  let fence = null;
  lines.forEach((line, index) => {
    const fenceMatch = line.match(/^\s*(```+|~~~+)/);
    if (fenceMatch) {
      if (!fence) fence = fenceMatch[1];
      else if (fenceMatch[1][0] === fence[0] && fenceMatch[1].length >= fence.length) fence = null;
      return;
    }
    if (fence) return;
    const match = line.match(/^\s{0,4}(#{1,6})\s+(.+?)(?:\s+\{#([A-Za-z][\w:.-]*)\})?\s*$/);
    if (!match) return;
    const base = match[3] || headingSlug(match[2]);
    const count = used.get(base) || 0;
    used.set(base, count + 1);
    const id = count ? `${base}-${count + 1}` : base;
    headings.push({level: match[1].length, text: match[2], id, index});
  });
  return headings;
}

export function renderMarkdown(source, lineOffset = 0) {
  let html = "", inCode = false, fence = "", language = "", codeLineStart = null, code = [], codeStart = 0, list = null;
  const lines = String(source).split("\n");
  const headings = collectHeadings(lines);
  const headingByLine = new Map(headings.map(item => [item.index, item]));
  const footnotes = new Map();

  for (let i = 0; i < lines.length; i++) {
    const match = lines[i].match(/^\[\^([^\]\s]+)\]:\s*(.*)$/);
    if (!match) continue;
    const body = [match[2]];
    let j = i + 1;
    while (j < lines.length && /^(?: {4}|\t)/.test(lines[j])) {
      body.push(lines[j].replace(/^(?: {4}|\t)/, ""));
      lines[j] = "";
      j++;
    }
    footnotes.set(match[1], body.join("\n"));
    lines[i] = "";
  }

  const closeList = () => { if (list) { html += `</${list}>`; list = null; } };
  const closeCode = () => {
    const body = escapeHtml(code.join("\n"));
    const lang = normalizeLanguage(language);
    if (lang === "mermaid") {
      html += `<div class="mermaid preview-source-line" data-source-line="${codeStart + lineOffset + 1}">${body}</div>`;
    } else if (codeLineStart !== null) {
      const numbered = body.split("\n").map((line, index) => `<span class="code-line" data-line="${codeLineStart + index}">${line || " "}</span>`).join("\n");
      const languageClass = lang ? ` class="language-${escapeHtml(lang)}"` : "";
      html += `<pre${attrs(codeStart, false, "", "", lineOffset).replace(' class="', ' class="code-with-lines ')}><code${languageClass}>${numbered}</code></pre>`;
    } else {
      const languageClass = lang ? ` class="language-${escapeHtml(lang)}"` : "";
      html += `<pre${attrs(codeStart, false, "", "", lineOffset)}><code${languageClass}>${body}</code></pre>`;
    }
    code = []; language = ""; codeLineStart = null; fence = "";
  };

  for (let index = 0; index < lines.length; index++) {
    const line = lines[index];
    const fenceMatch = line.match(/^\s*(```+|~~~+)\s*([^\s]*)\s*$/);
    if (fenceMatch) {
      closeList();
      if (inCode && fenceMatch[1][0] === fence[0] && fenceMatch[1].length >= fence.length) closeCode();
      else if (!inCode) {
        fence = fenceMatch[1];
        const info = fenceMatch[2] || "";
        // Generic syntax for every fenced code block:
        // ```rust=, ```python=101, ```= or ```=101.
        const numbered = info.match(/^(.*?)=(\d*)$/);
        language = numbered ? numbered[1] : info;
        codeLineStart = numbered ? Number(numbered[2] || 1) : null;
        codeStart = index;
      }
      inCode = !inCode;
      continue;
    }
    if (inCode) { code.push(line); continue; }

    const delimiter = index + 1 < lines.length ? tableDelimiter(lines[index + 1]) : null;
    if (line.includes("|") && delimiter) {
      closeList();
      const headers = splitTableRow(line);
      html += `<div class="table-wrap preview-source-line" data-source-line="${index + lineOffset + 1}"><table><thead><tr>`;
      headers.forEach((cell, i) => html += `<th class="preview-editable" contenteditable="true" spellcheck="true" data-source-line="${index + lineOffset + 1}" data-table-cell="${i}" style="text-align:${delimiter[i] || "left"}">${inline(cell)}</th>`);
      html += `</tr></thead><tbody>`;
      index += 2;
      while (index < lines.length && lines[index].includes("|") && lines[index].trim()) {
        const cells = splitTableRow(lines[index]);
        html += `<tr>`;
        headers.forEach((_, i) => html += `<td class="preview-editable" contenteditable="true" spellcheck="true" data-source-line="${index + lineOffset + 1}" data-table-cell="${i}" style="text-align:${delimiter[i] || "left"}">${inline(cells[i] || "")}</td>`);
        html += `</tr>`;
        index++;
      }
      html += `</tbody></table></div>`;
      index--;
      continue;
    }

    if (/^<details>\s*$/i.test(line.trim())) {
      closeList();
      let end = index + 1;
      while (end < lines.length && !/^<\/details>\s*$/i.test(lines[end].trim())) end++;
      if (end < lines.length) {
        const block = lines.slice(index + 1, end);
        let summary = "Details";
        while (block.length && !block[0].trim()) block.shift();
        if (block.length) {
          const summaryMatch = block[0].trim().match(/^<summary>([\s\S]*?)<\/summary>$/i);
          if (summaryMatch) { summary = summaryMatch[1].trim() || "Details"; block.shift(); }
        }
        while (block.length && !block[0].trim()) block.shift();
        html += `<details class="markdown-details preview-source-line" data-source-line="${index + lineOffset + 1}"><summary>${inline(summary)}</summary><div class="markdown-details__content">${renderMarkdown(block.join("\n"), lineOffset + index + 1)}</div></details>`;
        index = end;
        continue;
      }
    }

    if (/^\s*\[TOC\]\s*$/i.test(line)) {
      closeList();
      if (headings.length) {
        html += `<nav class="markdown-toc preview-source-line" data-source-line="${index + lineOffset + 1}" aria-label="Table of contents"><ol>`;
        headings.forEach(item => html += `<li class="toc-level-${item.level}"><a href="#${escapeHtml(item.id)}">${inline(item.text)}</a></li>`);
        html += `</ol></nav>`;
      }
      continue;
    }

    const alertStart = line.match(/^\s*:::(success|info|warning|danger)\s*$/i);
    if (alertStart) {
      closeList();
      let end = index + 1;
      while (end < lines.length && !/^\s*:::\s*$/.test(lines[end])) end++;
      if (end < lines.length) {
        const type = alertStart[1].toLowerCase();
        const body = lines.slice(index + 1, end).join("\n");
        html += `<aside class="markdown-alert markdown-alert--${type}" role="note">${renderMarkdown(body, lineOffset + index + 1)}</aside>`;
        index = end;
        continue;
      }
    }

    const heading = line.match(/^\s{0,4}(#{1,6})\s+(.+?)(?:\s+\{#([A-Za-z][\w:.-]*)\})?\s*$/);
    const task = line.match(/^(\s*)[-*+]\s+\[([ xX])\]\s+(.+)$/);
    const ul = line.match(/^(\s*)[-*+]\s+(.+)$/);
    const ol = line.match(/^(\s*)\d+\.\s+(.+)$/);

    if (heading) {
      closeList();
      const n = heading[1].length;
      const resolved = headingByLine.get(index);
      const id = resolved?.id || heading[3] || headingSlug(heading[2]);
      const suffix = heading[3] ? ` {#${heading[3]}}` : "";
      html += `<h${n} id="${escapeHtml(id)}"${attrs(index, true, `${heading[1]} `, suffix, lineOffset)}>${inline(heading[2])}</h${n}>`;
    } else if (task) {
      if (list !== "ul") { closeList(); html += `<ul class="task-list">`; list = "ul"; }
      const checked = task[2].toLowerCase() === "x";
      html += `<li class="preview-source-line task-list-item" data-source-line="${index + lineOffset + 1}"><input type="checkbox" class="task-checkbox" data-source-line="${index + lineOffset + 1}"${checked ? " checked" : ""}><span class="preview-editable" contenteditable="true" spellcheck="true" data-source-line="${index + lineOffset + 1}" data-source-prefix="${escapeHtml(`${task[1]}- [${checked ? "x" : " "}] `)}">${inline(task[3])}</span></li>`;
    } else if (ul || ol) {
      const type = ul ? "ul" : "ol";
      if (list !== type) { closeList(); html += `<${type}>`; list = type; }
      const match = ul || ol;
      const indentWidth = match[1].replace(/\t/g, "    ").length;
      const prefix = ul ? `${match[1]}- ` : `${match[1]}${(line.match(/^\s*(\d+)\./)||[])[1] || 1}. `;
      const indentStyle = indentWidth ? ` style="margin-left:${Math.min(indentWidth, 24) * 0.45}em"` : "";
      html += `<li${attrs(index, true, prefix, "", lineOffset)}${indentStyle}>${inline(match[2])}</li>`;
    } else {
      closeList();
      const definition = index + 1 < lines.length && /^:\s+/.test(lines[index + 1]);
      if (line.trim() && definition) {
        html += `<dl${attrs(index, false, "", "", lineOffset)}><dt>${inline(line)}</dt>`;
        while (index + 1 < lines.length && /^:\s+/.test(lines[index + 1])) {
          index++;
          html += `<dd data-source-line="${index + lineOffset + 1}">${inline(lines[index].replace(/^:\s+/, ""))}</dd>`;
        }
        html += `</dl>`;
      } else if (/^---+$/.test(line.trim())) html += `<hr${attrs(index, false, "", "", lineOffset)}>`;
      else if (line.startsWith("> ")) html += `<blockquote${attrs(index, true, "> ", "", lineOffset)}>${inline(line.slice(2))}</blockquote>`;
      else if (line.trim()) html += `<p${attrs(index, true, "", "", lineOffset)}>${inline(line)}</p>`;
      else html += `<div${attrs(index, true, "", "", lineOffset)}><br></div>`;
    }
  }

  closeList();
  if (inCode) closeCode();

  if (footnotes.size) {
    html = html.replace(/<sup class="footnote-ref"><a href="#fn-([^"]+)" id="fnref-\1">\?<\/a><\/sup>/g, (_, id) => {
      const order = [...footnotes.keys()].indexOf(id) + 1;
      return `<sup class="footnote-ref"><a href="#fn-${id}" id="fnref-${id}">${order || "?"}</a></sup>`;
    });
    html += `<section class="footnotes"><hr><ol>`;
    for (const [id, body] of footnotes) {
      html += `<li id="fn-${escapeHtml(id)}">${body.split("\n").map(part => inline(part)).join("<br>")} <a class="footnote-backref" href="#fnref-${escapeHtml(id)}" aria-label="Back to reference">↩</a></li>`;
    }
    html += `</ol></section>`;
  }
  return html;
}