import { useEffect, useRef, useState } from "react";
import mermaid from "mermaid";

let initialized = false;
function init() {
  if (initialized) return;
  initialized = true;
  mermaid.initialize({ startOnLoad: false, theme: "default", securityLevel: "loose", fontFamily: "inherit" });
}

export function MermaidBlock({ code }: { code: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    init();
    let cancelled = false;
    const id = `m${Math.random().toString(36).slice(2)}`;
    mermaid
      .render(id, code)
      .then(({ svg }) => { if (!cancelled && ref.current) ref.current.innerHTML = svg; })
      .catch((e) => { if (!cancelled) setErr(String(e?.message || e)); });
    return () => { cancelled = true; };
  }, [code]);

  if (err) return <pre className="text-xs text-destructive bg-destructive/5 p-2 rounded overflow-auto">{code}</pre>;
  return <div ref={ref} className="my-2 overflow-x-auto bg-muted/30 rounded-lg p-2 [&_svg]:max-w-full [&_svg]:h-auto" />;
}