import type { Transformer } from "./types.js";

/**
 * Replaces every `<span data-type="footnote" content="...">` with a numbered
 * superscript link. The footnote texts are pushed into `ctx.footnoteTexts` so
 * the orchestrator can render the `<section class="footnotes">` block once
 * all transformers have run.
 */
export const footnoteTransformer: Transformer = {
  name: "footnote",
  apply(document, ctx) {
    for (const span of [...document.querySelectorAll('span[data-type="footnote"]')]) {
      const text =
        span.getAttribute("content") ||
        span.getAttribute("data-content") ||
        span.getAttribute("title") ||
        "";
      ctx.footnoteTexts.push(text);
      const idx = ctx.footnoteTexts.length;

      const sup = document.createElement("sup");
      sup.className = "footnote-ref";
      const a = document.createElement("a");
      a.setAttribute("href", `#fn-${idx}`);
      a.setAttribute("id", `fnref-${idx}`);
      a.textContent = `[${idx}]`;
      sup.appendChild(a);

      span.replaceWith(sup);
    }
  },
};