"use client";
import { memo, useMemo, type ReactNode } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import rehypeHighlight from "rehype-highlight";
import { Eye } from "lucide-react";
import { CopyButton } from "../ui";

const PREVIEWABLE = new Set(["html", "svg", "mermaid", "jsx", "tsx", "react", "markdown", "md", "python", "py", "typescript", "ts"]);

export interface MarkdownProps { text: string; onPreview?: (code: string, lang: string) => void; className?: string }

function Code({ className, children, onPreview, ...rest }: { className?: string; children?: ReactNode; onPreview?: MarkdownProps["onPreview"]; node?: unknown }) {
  const lang = /language-([\w+-]+)/.exec(className ?? "")?.[1];
  const raw = String(children ?? "").replace(/\n$/, "");
  if (!lang && !raw.includes("\n")) return <code className={className} {...rest}>{children}</code>;
  return (
    <>
      <div className="code-head not-prose">
        <span>{lang ?? "texte"}</span>
        <span className="flex items-center gap-1">
          {lang && PREVIEWABLE.has(lang) && onPreview && <button type="button" onClick={() => onPreview(raw, lang)} className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-xs text-fg-2 hover:bg-surface-2 hover:text-fg"><Eye className="h-3.5 w-3.5" /> Aperçu</button>}
          <CopyButton text={raw} />
        </span>
      </div>
      <pre><code className={className} {...rest}>{children}</code></pre>
    </>
  );
}

export const Markdown = memo(function Markdown({ text, onPreview, className }: MarkdownProps) {
  // Normalize \[ \] and \( \) LaTeX delimiters that some models emit
  const src = useMemo(() => text.replace(/\\\[((?:.|\n)*?)\\\]/g, (_, m) => `$$${m}$$`).replace(/\\\((.+?)\\\)/g, (_, m) => `$${m}$`), [text]);
  return (
    <div className={`prose-ai ${className ?? ""}`}>
      <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex, [rehypeHighlight, { ignoreMissing: true, detect: false }]]}
        components={{
          code: (p) => <Code {...p} onPreview={onPreview} />,
          pre: ({ children }) => <>{children}</>,
          a: ({ href, children }) => <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>,
          table: ({ children }) => <div className="overflow-x-auto"><table>{children}</table></div>,
        }}>
        {src}
      </ReactMarkdown>
    </div>
  );
});