"use client";
// Rendu Markdown des réponses : GFM + LaTeX (KaTeX), sans HTML brut (XSS),
// citations [Sx] transformées en puces cliquables.
import { memo } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

function prepareCitations(content: string): string {
  // [S3] → lien markdown interne que le composant « a » rend comme puce.
  return content.replace(/\[S(\d+)\]/g, "[S$1](#citation-$1)");
}

export const Markdown = memo(function Markdown({
  content,
  onCitationClick,
  streaming,
}: {
  content: string;
  onCitationClick?: (index: number) => void;
  streaming?: boolean;
}) {
  return (
    <div className={`prose-immbot ${streaming ? "stream-cursor" : ""}`}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm, remarkMath]}
        rehypePlugins={[rehypeKatex]}
        skipHtml
        components={{
          a({ href, children, ...props }) {
            if (href?.startsWith("#citation-")) {
              const index = parseInt(href.slice("#citation-".length), 10);
              return (
                <button
                  type="button"
                  className="citation-chip"
                  title={`Voir la source S${index}`}
                  onClick={(e) => {
                    e.preventDefault();
                    onCitationClick?.(index);
                  }}
                >
                  {children}
                </button>
              );
            }
            return (
              <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
                {children}
              </a>
            );
          },
        }}
      >
        {prepareCitations(content)}
      </ReactMarkdown>
    </div>
  );
});