MindSift/frontend/src/lib/markdown.tsx

import React from 'react';

/**
 * Parses inline markdown:
 * - **bold** or __bold__
 * - *italic* or _italic_
 * - ~~strikethrough~~
 * - `code`
 * - [label](url)
 */
function renderInlineTokens(text: string): React.ReactNode[] {
  if (!text) return [];

  const regex = /(`[^`]+`|\*\*[^*]+\*\*|__[^_]+__|~~[^~]+~~|\*[^*]+\*|_[^_]+_|\[([^\]]+)\]\(([^)]+)\))/g;

  const elements: React.ReactNode[] = [];
  let lastIndex = 0;
  let match: RegExpExecArray | null;

  while ((match = regex.exec(text)) !== null) {
    if (match.index > lastIndex) {
      elements.push(text.slice(lastIndex, match.index));
    }
    const token = match[0];
    const key = `${match.index}-${token}`;

    if (token.startsWith('`') && token.endsWith('`')) {
      elements.push(
        <code key={key} className="px-1.5 py-0.5 rounded bg-panel-elevated text-accent font-mono text-[0.9em] border border-border/50">
          {token.slice(1, -1)}
        </code>
      );
    } else if (
      (token.startsWith('**') && token.endsWith('**')) ||
      (token.startsWith('__') && token.endsWith('__'))
    ) {
      elements.push(
        <strong key={key} className="font-semibold text-main">
          {token.slice(2, -2)}
        </strong>
      );
    } else if (
      (token.startsWith('*') && token.endsWith('*')) ||
      (token.startsWith('_') && token.endsWith('_'))
    ) {
      elements.push(
        <em key={key} className="italic text-main/90">
          {token.slice(1, -1)}
        </em>
      );
    } else if (token.startsWith('~~') && token.endsWith('~~')) {
      elements.push(
        <del key={key} className="line-through text-muted/80">
          {token.slice(2, -2)}
        </del>
      );
    } else if (token.startsWith('[') && match[2] && match[3]) {
      const label = match[2];
      const url = match[3];
      elements.push(
        <a
          key={key}
          href={url}
          target="_blank"
          rel="noopener noreferrer"
          className="text-accent underline hover:opacity-80 transition-opacity"
          onClick={(e) => e.stopPropagation()}
        >
          {label}
        </a>
      );
    } else {
      elements.push(token);
    }

    lastIndex = regex.lastIndex;
  }

  if (lastIndex < text.length) {
    elements.push(text.slice(lastIndex));
  }

  return elements;
}

/**
 * Parses inline markdown and fenced code blocks:
 * - ```lang\ncode\n```
 * - **bold** or __bold__
 * - *italic* or _italic_
 * - ~~strikethrough~~
 * - `code`
 * - [label](url)
 */
export function renderInlineMarkdown(text: string): React.ReactNode[] {
  if (!text) return [];

  if (text.includes('```')) {
    const codeBlockRegex = /(```[a-zA-Z0-9_-]*\r?\n[\s\S]*?```|```[\s\S]*?```)/g;
    const parts = text.split(codeBlockRegex);
    const nodes: React.ReactNode[] = [];

    parts.forEach((part, partIdx) => {
      if (part.startsWith('```') && part.endsWith('```')) {
        const lines = part.split(/\r?\n/);
        const firstLine = lines[0].slice(3).trim();
        const codeLines = lines.slice(1, lines.length - 1);
        const code = codeLines.join('\n');
        nodes.push(
          <div
            key={`fenced-${partIdx}`}
            className="p-2.5 my-2 rounded bg-code text-accent font-mono text-xs overflow-x-auto border border-border/60 select-text"
          >
            {firstLine && (
              <div className="text-[10px] text-faint uppercase font-sans pb-1 select-none">
                {firstLine}
              </div>
            )}
            <pre className="whitespace-pre overflow-x-auto font-mono text-status-ok leading-relaxed">
              <code>{code}</code>
            </pre>
          </div>
        );
      } else if (part) {
        nodes.push(...renderInlineTokens(part));
      }
    });

    return nodes;
  }

  return renderInlineTokens(text);
}

export function MarkdownViewer({ content, className = '' }: { content: string; className?: string }) {
  if (!content) return null;

  const lines = content.split('\n');
  const renderedNodes: React.ReactNode[] = [];
  let inCodeBlock = false;
  let codeBlockLines: string[] = [];

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    if (line.trim().startsWith('```')) {
      if (inCodeBlock) {
        renderedNodes.push(
          <pre key={`code-${i}`} className="p-2.5 my-2 rounded bg-panel-elevated text-accent font-mono text-xs overflow-x-auto border border-border/60">
            <code>{codeBlockLines.join('\n')}</code>
          </pre>
        );
        codeBlockLines = [];
        inCodeBlock = false;
      } else {
        inCodeBlock = true;
        codeBlockLines = [];
      }
      continue;
    }

    if (inCodeBlock) {
      codeBlockLines.push(line);
      continue;
    }

    const trimmed = line.trim();

    if (trimmed.startsWith('### ')) {
      renderedNodes.push(
        <h3 key={i} className="text-sm font-bold text-main mt-2 mb-1">
          {renderInlineMarkdown(trimmed.slice(4))}
        </h3>
      );
    } else if (trimmed.startsWith('## ')) {
      renderedNodes.push(
        <h2 key={i} className="text-base font-bold text-main mt-3 mb-1">
          {renderInlineMarkdown(trimmed.slice(3))}
        </h2>
      );
    } else if (trimmed.startsWith('# ')) {
      renderedNodes.push(
        <h1 key={i} className="text-lg font-bold text-main mt-3 mb-1.5">
          {renderInlineMarkdown(trimmed.slice(2))}
        </h1>
      );
    } else if (trimmed.startsWith('> ')) {
      renderedNodes.push(
        <blockquote key={i} className="border-l-2 border-accent pl-2.5 my-1 text-muted italic">
          {renderInlineMarkdown(trimmed.slice(2))}
        </blockquote>
      );
    } else if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) {
      renderedNodes.push(
        <div key={i} className="flex items-start gap-1.5 my-0.5">
          <span className="text-accent mt-0.5">•</span>
          <span className="flex-1 text-main">{renderInlineMarkdown(trimmed.slice(2))}</span>
        </div>
      );
    } else if (/^\d+\.\s/.test(trimmed)) {
      const matchNum = trimmed.match(/^(\d+)\.\s(.*)$/);
      renderedNodes.push(
        <div key={i} className="flex items-start gap-1.5 my-0.5">
          <span className="text-muted text-[11px] font-mono mt-0.5">{matchNum ? matchNum[1] + '.' : '•'}</span>
          <span className="flex-1 text-main">{renderInlineMarkdown(matchNum ? matchNum[2] : trimmed)}</span>
        </div>
      );
    } else if (trimmed === '') {
      renderedNodes.push(<div key={i} className="h-2" />);
    } else {
      renderedNodes.push(
        <div key={i} className="my-0.5 text-main leading-relaxed">
          {renderInlineMarkdown(line)}
        </div>
      );
    }
  }

  if (inCodeBlock && codeBlockLines.length > 0) {
    renderedNodes.push(
      <pre key="code-end" className="p-2.5 my-2 rounded bg-panel-elevated text-accent font-mono text-xs overflow-x-auto border border-border/60">
        <code>{codeBlockLines.join('\n')}</code>
      </pre>
    );
  }

  return <div className={`markdown-body text-xs ${className}`}>{renderedNodes}</div>;
}