import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { Components } from "react-markdown";
import { renderMermaid } from "./mermaid";

function MermaidBlock({ code }: { code: string }) {
  const [svg, setSvg] = useState<string>("");
  const [error, setError] = useState<string>("");

  useEffect(() => {
    renderMermaid(code)
      .then(setSvg)
      .catch((e: unknown) =>
        setError(e instanceof Error ? e.message : String(e))
      );
  }, [code]);

  if (error) return <pre className="text-red-500 text-xs">{error}</pre>;
  if (!svg) return <pre className="text-xs opacity-50">{code}</pre>;
  // eslint-disable-next-line react/no-danger
  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

const components: Components = {
  code({ className, children }) {
    const lang = /language-(\w+)/.exec(className ?? "")?.[1];
    const code = String(children).replace(/\n$/, "");
    if (lang === "mermaid") {
      return <MermaidBlock code={code} />;
    }
    return (
      <code className={className}>
        {children}
      </code>
    );
  },
  pre({ children }) {
    return <pre className="overflow-auto rounded bg-muted p-3 text-sm">{children}</pre>;
  },
};

export function MarkdownView({ source }: { source: string }) {
  return (
    <div className="markdown-view overflow-auto max-h-[60vh] prose prose-sm dark:prose-invert p-3">
      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
        {source}
      </ReactMarkdown>
    </div>
  );
}