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

mermaid.initialize({ startOnLoad: false, theme: "default", securityLevel: "loose" });

const MermaidDiagram = ({ chart, id }: { chart: string; id: string }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [svg, setSvg] = useState("");
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    const render = async () => {
      try {
        const uniqueId = `mermaid-${id}-${Date.now()}`;
        const { svg: renderedSvg } = await mermaid.render(uniqueId, chart);
        if (!cancelled) { setSvg(renderedSvg); setError(null); }
      } catch (e: any) {
        if (!cancelled) setError(e?.message || "Failed to render diagram");
      }
    };
    render();
    return () => { cancelled = true; };
  }, [chart, id]);

  if (error) return <p className="text-sm text-destructive">Diagram error: {error}</p>;
  if (!svg) return <p className="text-sm text-muted-foreground">Rendering diagram...</p>;

  return <div ref={ref} dangerouslySetInnerHTML={{ __html: svg }} className="overflow-x-auto [&_svg]:max-w-full" />;
};

export default MermaidDiagram;