"use client";

import ReactMarkdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import { mergeMarkdownComponents } from "@/components/markdown/mergeComponents";
import { splitHideSegments, type HideKind } from "@/lib/hideBlocks";
import MdHideBlock from "@/components/markdown/MdHideBlock";

type MarkdownBodyClientProps = {
  content: string;
  className?: string;
  components?: Components;
  postId?: number;
  loggedIn?: boolean;
};

/**
 * 客户端 Markdown（发帖预览 / 评论）：GFM + 隐藏块徽章预览。
 */
export default function MarkdownBodyClient({
  content,
  className = "prose-content",
  components,
  postId,
  loggedIn = false,
}: MarkdownBodyClientProps) {
  const segs = splitHideSegments(content || "");
  const mdComponents = mergeMarkdownComponents(components);

  return (
    <div className={className}>
      {segs.map((seg, i) => {
        if (seg.type === "md") {
          if (!seg.text.trim()) return null;
          return (
            <ReactMarkdown key={`md-${i}`} remarkPlugins={[remarkGfm]} components={mdComponents}>
              {seg.text}
            </ReactMarkdown>
          );
        }
        const kind = seg.kind as HideKind;
        if (seg.locked) {
          return (
            <MdHideBlock
              key={`hide-${i}`}
              kind={kind}
              points={seg.points}
              locked
              postId={postId}
              loggedIn={loggedIn}
            />
          );
        }
        return (
          <MdHideBlock key={`hide-${i}`} kind={kind} points={seg.points}>
            {seg.body.trim() ? (
              <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
                {seg.body}
              </ReactMarkdown>
            ) : null}
          </MdHideBlock>
        );
      })}
    </div>
  );
}