'use client';

// Mira 共用 Markdown 渲染器（河道 + Wiki 共用）
// SDD: polaris/mira/.agents/specs/mira-app/design.md §3.5.7

import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

export function MarkdownView({ text }: { text: string }) {
  const cleaned = useMemo(() => stripLogseqMeta(text), [text]);
  return (
    <div className="mira-md">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          a: ({ href, children, ...rest }) => (
            <a
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              className="wiki-link"
              {...rest}
            >
              {children}
            </a>
          ),
          // 圖片不直接 inline 顯示（避免大圖打亂 feed），改成連結
          img: ({ src, alt }) => {
            const href = typeof src === 'string' ? src : '';
            return href ? (
              <a
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                className="wiki-link"
                style={{ fontStyle: 'italic' }}
              >
                🖼 {alt || 'image'}
              </a>
            ) : null;
          },
        }}
      >
        {cleaned}
      </ReactMarkdown>
    </div>
  );
}

// Strip Logseq 專屬語法
// - 屬性行：`xxx:: yyy`、`collapsed:: true`、`id:: ...`、`logseq.order-list-type:: ...`
// - block ref：`((uuid))` 暫時保留為純文字
export function stripLogseqMeta(text: string): string {
  return text
    .split('\n')
    .filter((line) => {
      const trimmed = line.trimStart();
      if (/^[a-zA-Z][a-zA-Z0-9_.-]*::\s/.test(trimmed)) return false;
      return true;
    })
    .join('\n');
}