/**
 * @file MarkdownPreview.tsx
 * @description A markdown file rendered for reading (GitHub-flavoured:
 * tables, task lists, strikethrough, autolinks), shared by the config
 * explorer's file viewer and the lane Changes panel. Raw HTML in the file is
 * shown as text, never run (react-markdown without rehype-raw), and links
 * open in a new tab. A leading YAML frontmatter block (skills, agents) is
 * shown as a code block instead of being misread as a heading. `isMarkdown`
 * says which paths get the preview toggle.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

/** Whether `path` names a markdown file. */
export function isMarkdown(path: string | null | undefined): boolean {
  return !!path && /\.(md|markdown|mdx)$/i.test(path);
}

/** Split a leading `---` frontmatter block off the body. */
function splitFrontmatter(text: string): { front: string | null; body: string } {
  const m = /^---\r?\n([\s\S]*?)\r?\n---[ \t]*(?:\r?\n|$)/.exec(text);
  return m ? { front: m[1]!, body: text.slice(m[0].length) } : { front: null, body: text };
}

export function MarkdownPreview({ text, className = "" }: { text: string; className?: string }) {
  const { front, body } = splitFrontmatter(text);
  return (
    <div data-testid="markdown-preview" className={`md-preview ${className}`}>
      {front !== null && <pre className="md-frontmatter">{front}</pre>}
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          a: ({ node: _node, ...props }) => (
            <a {...props} target="_blank" rel="noreferrer noopener" />
          ),
        }}
      >
        {body}
      </ReactMarkdown>
    </div>
  );
}