"use client";

import { useEffect, useRef } from "react";

/**
 * Math rendering, loaded only when a message actually contains math: KaTeX is
 * imported dynamically (its CSS with it) the first time a span mounts and
 * writes into this span imperatively — no HTML injection anywhere.
 */
export function MathSpan({ tex, display = false }: { tex: string; display?: boolean }) {
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    let cancelled = false;
    void (async () => {
      try {
        const [katex] = await Promise.all([import("katex"), import("katex/dist/katex.min.css")]);
        if (cancelled || !ref.current) return;
        katex.default.render(tex, ref.current, {
          displayMode: display,
          throwOnError: false,
          strict: false,
          trust: false,
        });
      } catch {
        if (!cancelled && ref.current) ref.current.textContent = tex;
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [tex, display]);

  return (
    <span
      ref={ref}
      className={display ? "my-2 block overflow-x-auto text-center" : "inline-block max-w-full align-middle"}
      aria-label={tex}
    />
  );
}