/**
 * AssistantMessage — Agent 回复消息卡片
 *
 * 分为三个阶段，流式时实时展示：
 * 1. 💭 思考阶段 — ThoughtBlock 自动展开，流式追加 reasoning content
 * 2. 🔧 工具调用 — ToolCallCard 展示调用和结果
 * 3. ✏️ 回复阶段 — Markdown 渲染，打字光标指示流式输出
 *
 * F1 性能优化: 使用 React.memo 包裹，避免历史消息在流式 delta 时重渲染。
 * 配合 agentStatus 选择器优化：历史消息（isStreaming=false）不订阅真实 agentStatus，
 * 避免 agentStatus 频繁变化（thinking/executing/idle）触发所有 AssistantMessage 重渲染。
 */

import { useState, useCallback, memo, useMemo } from 'react';
import { Box, Typography, Avatar, Stack, IconButton, Tooltip } from '@mui/material';
import { Bot, Copy, Check } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
// F11: 移除 rehypeRaw — 避免解析 raw HTML 的开销 + 安全考虑（防止 AI 输出 HTML 注入）
// 如需恢复内联 HTML 渲染，可重新引入 rehype-raw
import type { ChatMessage } from '@renderer/stores/agent-store';
import { useAgentStore } from '@renderer/stores/agent-store';
import { ThoughtBlock } from './ThoughtBlock';
import { ToolCallCard } from './ToolCallCard';
import { ToolResultBlock } from './ToolResultBlock';
import { formatTime } from '@renderer/lib/formatters';
import { ContextMenu, createContextMenuItems } from '@renderer/components/ContextMenu';

interface AssistantMessageProps {
  message: ChatMessage;
  isStreaming?: boolean;
}

function AssistantMessageImpl({ message, isStreaming }: AssistantMessageProps): React.JSX.Element {
  // 直接使用 message.content — updateLastAssistantMessage 已实时更新此字段
  const content = message.content;
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
  // F1: 历史消息（isStreaming=false）固定返回 'idle'，避免 agentStatus 变化触发重渲染
  // 逻辑等价：原 isThinking = agentStatus === 'thinking' && isStreaming
  //          新 isThinking = agentStatus === 'thinking'（agentStatus 在非流式时恒为 'idle'）
  const agentStatus = useAgentStore((s) => (isStreaming ? s.agentStatus : 'idle'));

  const contextMenuItems = createContextMenuItems('message', { content });

  const hasThinking = !!message.reasoningContent;
  const hasTools = !!message.toolCalls?.length;
  const hasContent = !!content;
  const isThinking = agentStatus === 'thinking' && isStreaming;

  // F7: useMemo 缓存 ReactMarkdown 元素，避免非流式时因 isStreaming/isLast 变化重新创建元素
  // 流式时此元素不被渲染（用纯文本），useMemo 仍会更新但仅创建轻量 React 元素对象
  // 非流式时 content 不变，useMemo 复用缓存，避免重新创建 ReactMarkdown 组件实例
  const markdownElement = useMemo(() => (
    <Box className="prose-metona">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeHighlight]}
        components={{
          code({ className, children, ...props }) {
            const match = /language-(\w+)/.exec(className ?? '');
            // rehype-highlight 会把代码替换为 <span> 高亮元素，需提取纯文本
            const codeStr = extractTextContent(children).replace(/\n$/, '');
            if (!match) return <code className={className} {...props}>{children}</code>;
            return <CodeBlock language={match[1]} code={codeStr} />;
          },
        }}
      >
        {content}
      </ReactMarkdown>
    </Box>
  ), [content]);

  return (
    <Stack
      direction="row"
      spacing={1.5}
      sx={{ animation: 'fadeInUp 300ms ease-out' }}
      onContextMenu={(e: React.MouseEvent) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY }); }}
    >
      <Avatar sx={{ width: 32, height: 32, bgcolor: 'secondary.main', color: 'primary.main', flexShrink: 0 }}>
        <Bot size={16} />
      </Avatar>

      <Box
        sx={{
          flex: 1, minWidth: 0, maxWidth: 768, borderRadius: 3, px: 2, py: 1.5,
          bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider',
          transition: 'border-color 200ms, box-shadow 200ms',
          ...(isStreaming ? { borderColor: 'rgba(129,140,248,0.3)', boxShadow: '0 0 0 1px rgba(129,140,248,0.1)' } : {}),
        }}
      >
        {/* ===== 阶段 1: 思考过程 ===== */}
        {hasThinking && (
          <>
            <Stack direction="row" spacing={1} sx={{ mb: 0.5, alignItems: 'center' }}>
              <Typography variant="caption" sx={{ color: '#fbbf24', fontWeight: 600, fontSize: 10, textTransform: 'uppercase', letterSpacing: 0.5 }}>
                💭 {isThinking ? '正在思考...' : '思考过程'}
              </Typography>
              {isThinking && (
                <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: '#fbbf24', animation: 'pulse 1.5s infinite' }} />
              )}
            </Stack>
            <ThoughtBlock content={message.reasoningContent!} defaultExpanded={!!isStreaming} />
          </>
        )}

        {/* ===== 阶段 2: 工具调用 ===== */}
        {hasTools && (
          <>
            {hasThinking && <Box sx={{ height: 8 }} />}
            <Stack direction="row" spacing={1} sx={{ mb: 0.5, alignItems: 'center' }}>
              <Typography variant="caption" sx={{ color: '#a855f7', fontWeight: 600, fontSize: 10, textTransform: 'uppercase', letterSpacing: 0.5 }}>
                🔧 工具调用
              </Typography>
            </Stack>
            {message.toolCalls!.map((tc) => (
              <Box key={tc.id}>
                <ToolCallCard toolCall={tc} />
                {tc.status === 'success' && tc.result != null && (
                  <ToolResultBlock toolCall={tc} />
                )}
              </Box>
            ))}
          </>
        )}

        {/* ===== 阶段 3: 回复内容 ===== */}
        {(hasContent || isStreaming) && (
          <>
            {(hasThinking || hasTools) && (
              <Stack direction="row" spacing={1} sx={{ mt: 0.5, mb: 0.5, alignItems: 'center' }}>
                <Typography variant="caption" sx={{ color: '#34d399', fontWeight: 600, fontSize: 10, textTransform: 'uppercase', letterSpacing: 0.5 }}>
                  ✏️ 回复
                </Typography>
                {isStreaming && !isThinking && (
                  <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: '#34d399', animation: 'pulse 1.5s infinite' }} />
                )}
              </Stack>
            )}

            {hasContent ? (
              isStreaming ? (
                // F3: 流式时用纯文本渲染，避免 ReactMarkdown 对长内容重新解析导致卡顿。
                // 根因：每个 delta 触发 ReactMarkdown 全量重新解析 + rehypeHighlight 高亮，
                //       内容长度增加时单次解析耗时 O(n) 退化，30+ delta/秒下呈 O(n²) 卡死。
                // 流结束后自动切换到 ReactMarkdown 一次性渲染（一次性 O(n)，可接受）。
                <Box
                  component="pre"
                  className="prose-metona prose-streaming"
                  sx={{
                    margin: 0,
                    padding: 0,
                    fontFamily: 'inherit',
                    fontSize: 14,
                    lineHeight: 1.6,
                    whiteSpace: 'pre-wrap',
                    wordBreak: 'break-word',
                    overflowWrap: 'break-word',
                    color: 'text.primary',
                  }}
                >
                  {content}
                </Box>
              ) : (
                // F7: 使用 useMemo 缓存的 ReactMarkdown 元素
                markdownElement
              )
            ) : isStreaming ? (
              <Typography variant="body2" sx={{ color: 'text.disabled', fontStyle: 'italic', py: 1 }}>
                {isThinking ? '正在思考...' : '正在生成回复...'}
                <Box component="span" sx={{ display: 'inline-block', width: 8, height: 16, ml: 0.5, bgcolor: 'primary.main', animation: 'blink 1s step-end infinite', verticalAlign: 'middle' }} />
              </Typography>
            ) : null}

            {/* 流式打字光标 */}
            {isStreaming && hasContent && (
              <Box component="span" sx={{ display: 'inline-block', width: 8, height: 16, ml: 0.25, bgcolor: 'primary.main', animation: 'blink 1s step-end infinite', verticalAlign: 'middle' }} />
            )}
          </>
        )}

        {/* 时间戳 */}
        {!isStreaming && (
          <Typography variant="caption" sx={{ mt: 0.5, display: 'block', color: 'text.disabled' }}>
            {formatTime(message.timestamp)}
          </Typography>
        )}
      </Box>

      {contextMenu && (
        <ContextMenu
          x={contextMenu.x}
          y={contextMenu.y}
          items={contextMenuItems}
          onClose={() => setContextMenu(null)}
        />
      )}
    </Stack>
  );
}

/**
 * F1: memo 包裹 AssistantMessage。
 * - 流式 delta 时仅最后一条 message 引用变化，历史消息跳过 re-render
 * - agentStatus 订阅已优化（非流式时返回 'idle'），历史消息不受 agentStatus 变化影响
 */
export const AssistantMessage = memo(AssistantMessageImpl);

function CodeBlock({ language, code }: { language: string; code: string }): React.JSX.Element {
  const [copied, setCopied] = useState(false);
  const handleCopy = useCallback(async () => {
    try { await navigator.clipboard.writeText(code); } catch { const ta = document.createElement('textarea'); ta.value = code; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); }
    setCopied(true); setTimeout(() => setCopied(false), 2000);
  }, [code]);

  return (
    <Box sx={{ position: 'relative', my: 1, '&:hover .copy-btn': { opacity: 1 } }}>
      <Stack direction="row" sx={{ px: 1.5, py: 0.75, borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottom: '1px solid', borderColor: 'divider', bgcolor: 'background.paper', fontSize: 11, color: 'text.secondary', justifyContent: 'space-between', alignItems: 'center' }}>
        <span>{language}</span>
        <Tooltip title={copied ? '已复制' : '复制'}>
          <IconButton className="copy-btn" size="small" onClick={handleCopy} sx={{ opacity: 0, transition: 'opacity 150ms', color: 'text.secondary' }}>
            {copied ? <Check size={10} /> : <Copy size={10} />}
          </IconButton>
        </Tooltip>
      </Stack>
      <Box component="pre" sx={{ m: 0, bgcolor: 'background.default', border: '1px solid', borderColor: 'divider', borderTop: 'none', borderBottomLeftRadius: 8, borderBottomRightRadius: 8, p: 1.5, overflowX: 'auto', fontSize: 13, lineHeight: 1.6, color: 'text.primary' }}>
        <code className={language ? `language-${language}` : ''}>{code}</code>
      </Box>
    </Box>
  );
}

/**
 * 从 React children（可能含高亮 span）递归提取纯文本
 *
 * L-1 修复: 添加 maxDepth 参数防止循环引用导致的栈溢出
 * React children 正常深度不会超过 10，50 已足够安全裕量
 */
function extractTextContent(children: React.ReactNode, maxDepth = 50): string {
  if (maxDepth <= 0) return '';  // 超出深度上限，停止递归
  if (typeof children === 'string') return children;
  if (typeof children === 'number') return String(children);
  if (!children) return '';
  if (Array.isArray(children)) return children.map((c) => extractTextContent(c, maxDepth - 1)).join('');
  if (typeof children === 'object' && 'props' in children) {
    // 使用 React.ReactElement<{ children?: React.ReactNode }> 显式声明 props.children 类型
    return extractTextContent(
      (children as React.ReactElement<{ children?: React.ReactNode }>).props.children as React.ReactNode,
      maxDepth - 1,
    );
  }
  return '';
}