minimap/frontend/components/MarkdownMessage.tsx

import React from "react";

type MarkdownMessageProps = {
  content: string;
};

type MarkdownBlock =
  | { type: "paragraph"; content: string }
  | { type: "heading"; level: number; content: string }
  | { type: "unordered-list"; items: string[] }
  | { type: "ordered-list"; items: string[] }
  | { type: "blockquote"; content: string }
  | { type: "code"; language: string; content: string };

export default function MarkdownMessage({ content }: MarkdownMessageProps) {
  const blocks = parseMarkdown(content);

  return (
    <div className="space-y-3">
      {blocks.map((block, index) => renderBlock(block, index))}
    </div>
  );
}

function parseMarkdown(source: string): MarkdownBlock[] {
  const normalized = source.replace(/\r\n/g, "\n");
  const lines = normalized.split("\n");
  const blocks: MarkdownBlock[] = [];
  let paragraphLines: string[] = [];

  const flushParagraph = () => {
    if (!paragraphLines.length) return;
    blocks.push({
      type: "paragraph",
      content: paragraphLines.join("\n").trim(),
    });
    paragraphLines = [];
  };

  for (let index = 0; index < lines.length; index += 1) {
    const line = lines[index];
    const trimmed = line.trim();

    if (!trimmed) {
      flushParagraph();
      continue;
    }

    const codeFenceMatch = trimmed.match(/^```([^`]*)$/);
    if (codeFenceMatch) {
      flushParagraph();
      const codeLines: string[] = [];
      let cursor = index + 1;
      while (cursor < lines.length && !lines[cursor].trim().startsWith("```")) {
        codeLines.push(lines[cursor]);
        cursor += 1;
      }
      blocks.push({
        type: "code",
        language: codeFenceMatch[1].trim(),
        content: codeLines.join("\n"),
      });
      index = cursor;
      continue;
    }

    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
    if (headingMatch) {
      flushParagraph();
      blocks.push({
        type: "heading",
        level: headingMatch[1].length,
        content: headingMatch[2].trim(),
      });
      continue;
    }

    const blockquoteMatch = line.match(/^>\s?(.*)$/);
    if (blockquoteMatch) {
      flushParagraph();
      const quoteLines = [blockquoteMatch[1]];
      let cursor = index + 1;
      while (cursor < lines.length) {
        const nextMatch = lines[cursor].match(/^>\s?(.*)$/);
        if (!nextMatch) break;
        quoteLines.push(nextMatch[1]);
        cursor += 1;
      }
      blocks.push({
        type: "blockquote",
        content: quoteLines.join("\n").trim(),
      });
      index = cursor - 1;
      continue;
    }

    const unorderedMatch = line.match(/^[-*+]\s+(.+)$/);
    if (unorderedMatch) {
      flushParagraph();
      const items = [unorderedMatch[1].trim()];
      let cursor = index + 1;
      while (cursor < lines.length) {
        const nextMatch = lines[cursor].match(/^[-*+]\s+(.+)$/);
        if (!nextMatch) break;
        items.push(nextMatch[1].trim());
        cursor += 1;
      }
      blocks.push({ type: "unordered-list", items });
      index = cursor - 1;
      continue;
    }

    const orderedMatch = line.match(/^\d+\.\s+(.+)$/);
    if (orderedMatch) {
      flushParagraph();
      const items = [orderedMatch[1].trim()];
      let cursor = index + 1;
      while (cursor < lines.length) {
        const nextMatch = lines[cursor].match(/^\d+\.\s+(.+)$/);
        if (!nextMatch) break;
        items.push(nextMatch[1].trim());
        cursor += 1;
      }
      blocks.push({ type: "ordered-list", items });
      index = cursor - 1;
      continue;
    }

    paragraphLines.push(line);
  }

  flushParagraph();
  return blocks;
}

function renderBlock(block: MarkdownBlock, index: number) {
  if (block.type === "paragraph") {
    return (
      <p key={index} className="whitespace-pre-wrap leading-7 text-inherit">
        {renderInline(block.content, `p-${index}`)}
      </p>
    );
  }

  if (block.type === "heading") {
    const sizeClass =
      block.level === 1
        ? "text-xl font-bold"
        : block.level === 2
          ? "text-lg font-bold"
          : "text-base font-semibold";
    return (
      <div key={index} className={`${sizeClass} leading-7 text-slate-900`}>
        {renderInline(block.content, `h-${index}`)}
      </div>
    );
  }

  if (block.type === "unordered-list") {
    return (
      <ul key={index} className="list-disc space-y-1 pl-5 leading-7 text-inherit">
        {block.items.map((item, itemIndex) => (
          <li key={`${index}-${itemIndex}`}>{renderInline(item, `ul-${index}-${itemIndex}`)}</li>
        ))}
      </ul>
    );
  }

  if (block.type === "ordered-list") {
    return (
      <ol key={index} className="list-decimal space-y-1 pl-5 leading-7 text-inherit">
        {block.items.map((item, itemIndex) => (
          <li key={`${index}-${itemIndex}`}>{renderInline(item, `ol-${index}-${itemIndex}`)}</li>
        ))}
      </ol>
    );
  }

  if (block.type === "blockquote") {
    return (
      <blockquote
        key={index}
        className="border-l-4 border-slate-300 bg-slate-50/80 px-4 py-2 text-slate-600"
      >
        <div className="whitespace-pre-wrap leading-7">
          {renderInline(block.content, `q-${index}`)}
        </div>
      </blockquote>
    );
  }

  return (
    <div key={index} className="overflow-hidden rounded-xl border border-slate-200 bg-slate-950">
      {block.language && (
        <div className="border-b border-slate-800 px-3 py-2 text-xs uppercase tracking-[0.18em] text-slate-400">
          {block.language}
        </div>
      )}
      <pre className="overflow-x-auto px-4 py-3 text-sm leading-6 text-slate-100">
        <code>{block.content}</code>
      </pre>
    </div>
  );
}

function renderInline(text: string, keyPrefix: string): React.ReactNode[] {
  const pattern = /(\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|`([^`]+)`|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|_([^_]+)_)/g;
  const nodes: React.ReactNode[] = [];
  let lastIndex = 0;
  let matchIndex = 0;
  let match: RegExpExecArray | null;

  while ((match = pattern.exec(text)) !== null) {
    const plainText = text.slice(lastIndex, match.index);
    if (plainText) {
      nodes.push(...renderPlainText(plainText, `${keyPrefix}-plain-${matchIndex}`));
    }

    if (match[2] && match[3]) {
      nodes.push(
        <a
          key={`${keyPrefix}-link-${matchIndex}`}
          href={match[3]}
          target="_blank"
          rel="noreferrer"
          className="font-medium text-blue-600 underline decoration-blue-300 underline-offset-2"
        >
          {match[2]}
        </a>,
      );
    } else if (match[4]) {
      nodes.push(
        <code
          key={`${keyPrefix}-code-${matchIndex}`}
          className="rounded bg-slate-900/90 px-1.5 py-0.5 font-mono text-[0.92em] text-amber-200"
        >
          {match[4]}
        </code>,
      );
    } else if (match[5] || match[6]) {
      nodes.push(
        <strong key={`${keyPrefix}-strong-${matchIndex}`} className="font-semibold text-slate-900">
          {match[5] ?? match[6]}
        </strong>,
      );
    } else if (match[7] || match[8]) {
      nodes.push(
        <em key={`${keyPrefix}-em-${matchIndex}`} className="italic">
          {match[7] ?? match[8]}
        </em>,
      );
    }

    lastIndex = match.index + match[0].length;
    matchIndex += 1;
  }

  const trailingText = text.slice(lastIndex);
  if (trailingText) {
    nodes.push(...renderPlainText(trailingText, `${keyPrefix}-tail`));
  }

  return nodes;
}

function renderPlainText(text: string, keyPrefix: string): React.ReactNode[] {
  return text.split("\n").flatMap((segment, index, array) => {
    const nodes: React.ReactNode[] = [
      <React.Fragment key={`${keyPrefix}-${index}`}>{segment}</React.Fragment>,
    ];

    if (index < array.length - 1) {
      nodes.push(<br key={`${keyPrefix}-br-${index}`} />);
    }

    return nodes;
  });
}