// src/views/AgentChat/index_v3.js
// Agent聊天页面 V3 - 带左侧会话列表和用户信息集成

import React, { useState, useEffect, useRef } from 'react';
import {
  Box,
  Flex,
  VStack,
  HStack,
  Text,
  Input,
  IconButton,
  Button,
  Avatar,
  Heading,
  Divider,
  Spinner,
  Badge,
  useColorModeValue,
  useToast,
  Progress,
  Fade,
  Collapse,
  useDisclosure,
  InputGroup,
  InputLeftElement,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  Tooltip,
} from '@chakra-ui/react';
import {
  FiSend,
  FiSearch,
  FiPlus,
  FiMessageSquare,
  FiTrash2,
  FiMoreVertical,
  FiRefreshCw,
  FiDownload,
  FiCpu,
  FiUser,
  FiZap,
  FiClock,
} from 'react-icons/fi';
import { useAuth } from '@contexts/AuthContext';
import { PlanCard } from '@components/ChatBot/PlanCard';
import { StepResultCard } from '@components/ChatBot/StepResultCard';
import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';
import { logger } from '@utils/logger';
import axios from 'axios';

/**
 * Agent消息类型
 */
const MessageTypes = {
  USER: 'user',
  AGENT_THINKING: 'agent_thinking',
  AGENT_PLAN: 'agent_plan',
  AGENT_EXECUTING: 'agent_executing',
  AGENT_RESPONSE: 'agent_response',
  ERROR: 'error',
};

/**
 * Agent聊天页面 V3
 */
const AgentChatV3 = () => {
  const { user } = useAuth(); // 获取当前用户信息
  const toast = useToast();

  // 会话相关状态
  const [sessions, setSessions] = useState([]);
  const [currentSessionId, setCurrentSessionId] = useState(null);
  const [isLoadingSessions, setIsLoadingSessions] = useState(true);

  // 消息相关状态
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [currentProgress, setCurrentProgress] = useState(0);

  // UI 状态
  const [searchQuery, setSearchQuery] = useState('');
  const { isOpen: isSidebarOpen, onToggle: toggleSidebar } = useDisclosure({ defaultIsOpen: true });

  // Refs
  const messagesEndRef = useRef(null);
  const inputRef = useRef(null);

  // 颜色主题
  const bgColor = useColorModeValue('gray.50', 'gray.900');
  const sidebarBg = useColorModeValue('white', 'gray.800');
  const chatBg = useColorModeValue('white', 'gray.800');
  const inputBg = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const hoverBg = useColorModeValue('gray.100', 'gray.700');
  const activeBg = useColorModeValue('blue.50', 'blue.900');
  const userBubbleBg = useColorModeValue('blue.500', 'blue.600');
  const agentBubbleBg = useColorModeValue('white', 'gray.700');

  // ==================== 会话管理函数 ====================

  // 加载会话列表
  const loadSessions = async () => {
    if (!user?.id) return;

    setIsLoadingSessions(true);
    try {
      const response = await axios.get('/mcp/agent/sessions', {
        params: { user_id: String(user.id), limit: 50 },
      });

      if (response.data.success) {
        setSessions(response.data.data);
        logger.info('会话列表加载成功', response.data.data);
      }
    } catch (error) {
      logger.error('加载会话列表失败', error);
      toast({
        title: '加载失败',
        description: '无法加载会话列表',
        status: 'error',
        duration: 3000,
      });
    } finally {
      setIsLoadingSessions(false);
    }
  };

  // 加载会话历史
  const loadSessionHistory = async (sessionId) => {
    if (!sessionId) return;

    try {
      const response = await axios.get(`/mcp/agent/history/${sessionId}`, {
        params: { limit: 100 },
      });

      if (response.data.success) {
        const history = response.data.data;

        // 将历史记录转换为消息格式
        const formattedMessages = history.map((msg, idx) => ({
          id: `${sessionId}-${idx}`,
          type: msg.message_type === 'user' ? MessageTypes.USER : MessageTypes.AGENT_RESPONSE,
          content: msg.message,
          plan: msg.plan ? JSON.parse(msg.plan) : null,
          stepResults: msg.steps ? JSON.parse(msg.steps) : null,
          timestamp: msg.timestamp,
        }));

        setMessages(formattedMessages);
        logger.info('会话历史加载成功', formattedMessages);
      }
    } catch (error) {
      logger.error('加载会话历史失败', error);
      toast({
        title: '加载失败',
        description: '无法加载会话历史',
        status: 'error',
        duration: 3000,
      });
    }
  };

  // 创建新会话
  const createNewSession = () => {
    setCurrentSessionId(null);
    setMessages([
      {
        id: Date.now(),
        type: MessageTypes.AGENT_RESPONSE,
        content: `你好${user?.nickname || ''}！我是价小前，北京价值前沿科技公司的AI投研助手。\n\n我会通过多步骤分析来帮助你深入了解金融市场。\n\n你可以问我：\n• 全面分析某只股票\n• 某个行业的投资机会\n• 今日市场热点\n• 某个概念板块的表现`,
        timestamp: new Date().toISOString(),
      },
    ]);
  };

  // 切换会话
  const switchSession = (sessionId) => {
    setCurrentSessionId(sessionId);
    loadSessionHistory(sessionId);
  };

  // 删除会话（需要后端API支持）
  const deleteSession = async (sessionId) => {
    // TODO: 实现删除会话的后端API
    toast({
      title: '删除会话',
      description: '此功能尚未实现',
      status: 'info',
      duration: 2000,
    });
  };

  // ==================== 消息处理函数 ====================

  // 自动滚动到底部
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  // 添加消息
  const addMessage = (message) => {
    setMessages((prev) => [...prev, { ...message, id: Date.now() }]);
  };

  // 发送消息（流式 SSE 版本）
  const handleSendMessage = async () => {
    if (!inputValue.trim() || isProcessing) return;

    // 权限检查 - 只允许 max 用户访问（与传导链分析权限保持一致）
    const hasAccess = user?.subscription_type === 'max';

    if (!hasAccess) {
      logger.warn('AgentChat', '权限检查失败', {
        userId: user?.id,
        username: user?.username,
        subscription_type: user?.subscription_type,
        userObject: user
      });

      toast({
        title: '订阅升级',
        description: '「价小前投研」功能需要 Max 订阅。请前往设置页面升级您的订阅。',
        status: 'warning',
        duration: 5000,
        isClosable: true,
      });
      return;
    }

    logger.info('AgentChat', '权限检查通过', {
      userId: user?.id,
      username: user?.username,
      subscription_type: user?.subscription_type
    });

    const userMessage = {
      type: MessageTypes.USER,
      content: inputValue,
      timestamp: new Date().toISOString(),
    };

    addMessage(userMessage);
    const userInput = inputValue;
    setInputValue('');
    setIsProcessing(true);
    setCurrentProgress(0);

    let currentPlan = null;
    let stepResults = [];
    let executingMessageId = null;

    try {
      // 1. 显示思考状态
      addMessage({
        type: MessageTypes.AGENT_THINKING,
        content: '正在分析你的问题...',
        timestamp: new Date().toISOString(),
      });

      setCurrentProgress(10);

      // 2. 使用 EventSource 接收 SSE 流式数据
      const requestBody = {
        message: userInput,
        conversation_history: messages
          .filter((m) => m.type === MessageTypes.USER || m.type === MessageTypes.AGENT_RESPONSE)
          .map((m) => ({
            isUser: m.type === MessageTypes.USER,
            content: m.content,
          })),
        user_id: user?.id ? String(user.id) : 'anonymous',
        user_nickname: user?.nickname || user?.username || '匿名用户',
        user_avatar: user?.avatar || '',
        subscription_type: user?.subscription_type || 'free',
        session_id: currentSessionId,
      };

      // 使用 fetch API 进行 SSE 请求
      const response = await fetch('/mcp/agent/chat/stream', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';

      // 流式状态变量
      let thinkingMessageId = null;
      let thinkingContent = '';
      let summaryMessageId = null;
      let summaryContent = '';

      // 读取流式数据
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop(); // 保留不完整的行

        let currentEvent = null;

        for (const line of lines) {
          if (!line.trim() || line.startsWith(':')) continue;

          if (line.startsWith('event:')) {
            // 提取事件类型
            currentEvent = line.substring(6).trim();
            continue;
          }

          if (line.startsWith('data:')) {
            try {
              const data = JSON.parse(line.substring(5).trim());

              // 根据事件类型处理数据
              if (currentEvent === 'thinking') {
                // Kimi 流式思考过程
                if (!thinkingMessageId) {
                  thinkingMessageId = Date.now();
                  thinkingContent = '';
                  setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING));
                  addMessage({
                    id: thinkingMessageId,
                    type: MessageTypes.AGENT_THINKING,
                    content: '',
                    timestamp: new Date().toISOString(),
                  });
                }
                thinkingContent += data.content;
                // 实时更新思考内容
                setMessages((prev) =>
                  prev.map((m) =>
                    m.id === thinkingMessageId
                      ? { ...m, content: thinkingContent }
                      : m
                  )
                );
              } else if (currentEvent === 'reasoning') {
                // Kimi 推理过程（可选显示）
                logger.info('Kimi reasoning:', data.content);
              } else if (currentEvent === 'plan') {
                // 收到执行计划
                currentPlan = data;
                thinkingMessageId = null;
                thinkingContent = '';
                setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING));
                addMessage({
                  type: MessageTypes.AGENT_PLAN,
                  content: '已制定执行计划',
                  plan: data,
                  timestamp: new Date().toISOString(),
                });
                setCurrentProgress(30);
              } else if (currentEvent === 'step_complete') {
                // 收到步骤完成事件
                const stepResult = {
                  step_index: data.step_index,
                  tool: data.tool,
                  status: data.status,
                  result: data.result,
                  error: data.error,
                  execution_time: data.execution_time,
                };
                stepResults.push(stepResult);

                // 更新执行中的消息
                setMessages((prev) =>
                  prev.map((m) =>
                    m.id === executingMessageId
                      ? { ...m, stepResults: [...stepResults] }
                      : m
                  )
                );

                // 更新进度
                const progress = 40 + (stepResults.length / (currentPlan?.steps?.length || 5)) * 40;
                setCurrentProgress(Math.min(progress, 80));
              } else if (currentEvent === 'summary_chunk') {
                // 流式总结内容
                if (!summaryMessageId) {
                  summaryMessageId = Date.now();
                  summaryContent = '';
                  setMessages((prev) =>
                    prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING && m.type !== MessageTypes.AGENT_EXECUTING)
                  );
                  addMessage({
                    id: summaryMessageId,
                    type: MessageTypes.AGENT_RESPONSE,
                    content: '',
                    plan: currentPlan,
                    stepResults: stepResults,
                    isStreaming: true,  // 标记为流式输出中
                    timestamp: new Date().toISOString(),
                  });
                  setCurrentProgress(85);
                }
                summaryContent += data.content;
                // 实时更新总结内容
                setMessages((prev) =>
                  prev.map((m) =>
                    m.id === summaryMessageId
                      ? { ...m, content: summaryContent }
                      : m
                  )
                );
              } else if (currentEvent === 'summary') {
                // 收到完整总结（包含元数据）
                if (summaryMessageId) {
                  // 更新已有消息的元数据和内容，并标记流式输出完成
                  setMessages((prev) =>
                    prev.map((m) =>
                      m.id === summaryMessageId
                        ? {
                            ...m,
                            content: data.content || summaryContent,  // ✅ 使用后端返回的完整内容，如果没有则使用累积内容
                            metadata: data.metadata,
                            isStreaming: false,  // ✅ 标记流式输出完成
                          }
                        : m
                    )
                  );
                } else {
                  // 如果没有流式片段，直接显示完整总结
                  setMessages((prev) =>
                    prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING && m.type !== MessageTypes.AGENT_EXECUTING)
                  );
                  addMessage({
                    type: MessageTypes.AGENT_RESPONSE,
                    content: data.content,
                    plan: currentPlan,
                    stepResults: stepResults,
                    metadata: data.metadata,
                    isStreaming: false,  // 非流式，直接标记完成
                    timestamp: new Date().toISOString(),
                  });
                }
                setCurrentProgress(100);
              } else if (currentEvent === 'status') {
                // 状态更新
                if (data.stage === 'planning') {
                  setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_THINKING));
                  addMessage({
                    type: MessageTypes.AGENT_THINKING,
                    content: data.message,
                    timestamp: new Date().toISOString(),
                  });
                  setCurrentProgress(10);
                } else if (data.stage === 'executing') {
                  const msgId = Date.now();
                  executingMessageId = msgId;
                  addMessage({
                    id: msgId,
                    type: MessageTypes.AGENT_EXECUTING,
                    content: data.message,
                    plan: currentPlan,
                    stepResults: [],
                    timestamp: new Date().toISOString(),
                  });
                  setCurrentProgress(40);
                } else if (data.stage === 'summarizing') {
                  setMessages((prev) => prev.filter((m) => m.type !== MessageTypes.AGENT_EXECUTING));
                  addMessage({
                    type: MessageTypes.AGENT_THINKING,
                    content: data.message,
                    timestamp: new Date().toISOString(),
                  });
                  setCurrentProgress(80);
                }
              }
            } catch (e) {
              logger.error('解析 SSE 数据失败', e);
            }
          }
        }
      }

      // 重新加载会话列表
      loadSessions();

    } catch (error) {
      logger.error('Agent chat error', error);

      // 移除思考/执行中消息
      setMessages((prev) =>
        prev.filter(
          (m) => m.type !== MessageTypes.AGENT_THINKING && m.type !== MessageTypes.AGENT_EXECUTING
        )
      );

      const errorMessage = error.response?.data?.detail || error.message || '处理失败';

      addMessage({
        type: MessageTypes.ERROR,
        content: `处理失败：${errorMessage}`,
        timestamp: new Date().toISOString(),
      });

      toast({
        title: '处理失败',
        description: errorMessage,
        status: 'error',
        duration: 5000,
        isClosable: true,
      });
    } finally {
      setIsProcessing(false);
      setCurrentProgress(0);
      inputRef.current?.focus();
    }
  };

  // 处理键盘事件
  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  // 清空对话
  const handleClearChat = () => {
    createNewSession();
  };

  // 导出对话
  const handleExportChat = () => {
    const chatText = messages
      .filter((m) => m.type === MessageTypes.USER || m.type === MessageTypes.AGENT_RESPONSE)
      .map((msg) => `[${msg.type === MessageTypes.USER ? '用户' : '价小前'}] ${msg.content}`)
      .join('\n\n');

    const blob = new Blob([chatText], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `chat_${new Date().toISOString().slice(0, 10)}.txt`;
    a.click();
    URL.revokeObjectURL(url);
  };

  // ==================== 初始化 ====================

  useEffect(() => {
    if (user) {
      loadSessions();
      createNewSession();
    }
  }, [user]);

  // ==================== 渲染 ====================

  // 快捷问题
  const quickQuestions = [
    '全面分析贵州茅台这只股票',
    '今日涨停股票有哪些亮点',
    '新能源概念板块的投资机会',
    '半导体行业最新动态',
  ];

  // 筛选会话
  const filteredSessions = sessions.filter(
    (session) =>
      !searchQuery ||
      session.last_message?.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <Flex h="calc(100vh - 80px)" bg={bgColor}>
      {/* 左侧会话列表 */}
      <Collapse in={isSidebarOpen} animateOpacity>
        <Box
          w="300px"
          bg={sidebarBg}
          borderRight="1px"
          borderColor={borderColor}
          h="100%"
          display="flex"
          flexDirection="column"
        >
          {/* 侧边栏头部 */}
          <Box p={4} borderBottom="1px" borderColor={borderColor}>
            <Button
              leftIcon={<FiPlus />}
              colorScheme="blue"
              w="100%"
              onClick={createNewSession}
              size="sm"
            >
              新建对话
            </Button>

            {/* 搜索框 */}
            <InputGroup mt={3} size="sm">
              <InputLeftElement pointerEvents="none">
                <FiSearch color="gray.300" />
              </InputLeftElement>
              <Input
                placeholder="搜索对话..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </InputGroup>
          </Box>

          {/* 会话列表 */}
          <VStack
            flex="1"
            overflowY="auto"
            spacing={0}
            align="stretch"
            css={{
              '&::-webkit-scrollbar': { width: '6px' },
              '&::-webkit-scrollbar-thumb': {
                background: '#CBD5E0',
                borderRadius: '3px',
              },
            }}
          >
            {isLoadingSessions ? (
              <Flex justify="center" align="center" h="200px">
                <Spinner />
              </Flex>
            ) : filteredSessions.length === 0 ? (
              <Flex justify="center" align="center" h="200px" direction="column">
                <FiMessageSquare size={32} color="gray" />
                <Text mt={2} fontSize="sm" color="gray.500">
                  {searchQuery ? '没有找到匹配的对话' : '暂无对话记录'}
                </Text>
              </Flex>
            ) : (
              filteredSessions.map((session) => (
                <Box
                  key={session.session_id}
                  p={3}
                  cursor="pointer"
                  bg={currentSessionId === session.session_id ? activeBg : 'transparent'}
                  _hover={{ bg: hoverBg }}
                  borderBottom="1px"
                  borderColor={borderColor}
                  onClick={() => switchSession(session.session_id)}
                >
                  <Flex justify="space-between" align="start">
                    <VStack align="start" spacing={1} flex="1">
                      <Text fontSize="sm" fontWeight="medium" noOfLines={2}>
                        {session.last_message || '新对话'}
                      </Text>
                      <HStack spacing={2} fontSize="xs" color="gray.500">
                        <FiClock size={12} />
                        <Text>
                          {new Date(session.last_timestamp).toLocaleDateString('zh-CN', {
                            month: 'numeric',
                            day: 'numeric',
                            hour: 'numeric',
                            minute: 'numeric',
                          })}
                        </Text>
                        <Badge colorScheme="blue" fontSize="xx-small">
                          {session.message_count} 条
                        </Badge>
                      </HStack>
                    </VStack>

                    <Menu>
                      <MenuButton
                        as={IconButton}
                        icon={<FiMoreVertical />}
                        size="xs"
                        variant="ghost"
                        onClick={(e) => e.stopPropagation()}
                      />
                      <MenuList>
                        <MenuItem
                          icon={<FiTrash2 />}
                          color="red.500"
                          onClick={(e) => {
                            e.stopPropagation();
                            deleteSession(session.session_id);
                          }}
                        >
                          删除对话
                        </MenuItem>
                      </MenuList>
                    </Menu>
                  </Flex>
                </Box>
              ))
            )}
          </VStack>

          {/* 用户信息 */}
          <Box p={4} borderTop="1px" borderColor={borderColor}>
            <HStack spacing={3}>
              <Avatar size="sm" name={user?.nickname} src={user?.avatar} />
              <VStack align="start" spacing={0} flex="1">
                <Text fontSize="sm" fontWeight="medium">
                  {user?.nickname || '未登录'}
                </Text>
                <Text fontSize="xs" color="gray.500">
                  {user?.id || 'anonymous'}
                </Text>
              </VStack>
            </HStack>
          </Box>
        </Box>
      </Collapse>

      {/* 主聊天区域 */}
      <Flex flex="1" direction="column" h="100%">
        {/* 聊天头部 */}
        <Box bg={chatBg} borderBottom="1px" borderColor={borderColor} px={6} py={4}>
          <HStack justify="space-between">
            <HStack spacing={4}>
              <IconButton
                icon={<FiMessageSquare />}
                size="sm"
                variant="ghost"
                aria-label="切换侧边栏"
                onClick={toggleSidebar}
              />
              <Avatar size="md" bg="blue.500" icon={<FiCpu fontSize="1.5rem" />} />
              <VStack align="start" spacing={0}>
                <Heading size="md">价小前投研</Heading>
                <HStack>
                  <Badge colorScheme="green" fontSize="xs">
                    <HStack spacing={1}>
                      <FiZap size={10} />
                      <span>智能分析</span>
                    </HStack>
                  </Badge>
                  <Text fontSize="xs" color="gray.500">
                    多步骤深度研究
                  </Text>
                </HStack>
              </VStack>
            </HStack>

            <HStack>
              <IconButton
                icon={<FiRefreshCw />}
                size="sm"
                variant="ghost"
                aria-label="清空对话"
                onClick={handleClearChat}
              />
              <IconButton
                icon={<FiDownload />}
                size="sm"
                variant="ghost"
                aria-label="导出对话"
                onClick={handleExportChat}
              />
            </HStack>
          </HStack>

          {/* 进度条 */}
          {isProcessing && (
            <Progress
              value={currentProgress}
              size="xs"
              colorScheme="blue"
              mt={3}
              borderRadius="full"
              isAnimated
            />
          )}
        </Box>

        {/* 消息列表 */}
        <Box
          flex="1"
          overflowY="auto"
          px={6}
          py={4}
          css={{
            '&::-webkit-scrollbar': { width: '8px' },
            '&::-webkit-scrollbar-thumb': {
              background: '#CBD5E0',
              borderRadius: '4px',
            },
          }}
        >
          <VStack spacing={4} align="stretch">
            {messages.map((message) => (
              <Fade in key={message.id}>
                <MessageRenderer message={message} userAvatar={user?.avatar} />
              </Fade>
            ))}
            <div ref={messagesEndRef} />
          </VStack>
        </Box>

        {/* 快捷问题 */}
        {messages.length <= 2 && !isProcessing && (
          <Box px={6} py={3} bg={chatBg} borderTop="1px" borderColor={borderColor}>
            <Text fontSize="xs" color="gray.500" mb={2}>
              💡 试试这些问题：
            </Text>
            <Flex wrap="wrap" gap={2}>
              {quickQuestions.map((question, idx) => (
                <Button
                  key={idx}
                  size="sm"
                  variant="outline"
                  colorScheme="blue"
                  fontSize="xs"
                  onClick={() => {
                    setInputValue(question);
                    inputRef.current?.focus();
                  }}
                >
                  {question}
                </Button>
              ))}
            </Flex>
          </Box>
        )}

        {/* 输入框 */}
        <Box px={6} py={4} bg={chatBg} borderTop="1px" borderColor={borderColor}>
          <Flex>
            <Input
              ref={inputRef}
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder="输入你的问题，我会进行深度分析..."
              bg={inputBg}
              border="1px"
              borderColor={borderColor}
              _focus={{ borderColor: 'blue.500', boxShadow: '0 0 0 1px #3182CE' }}
              mr={2}
              disabled={isProcessing}
              size="lg"
            />
            <IconButton
              icon={isProcessing ? <Spinner size="sm" /> : <FiSend />}
              colorScheme="blue"
              aria-label="发送"
              onClick={handleSendMessage}
              isLoading={isProcessing}
              disabled={!inputValue.trim() || isProcessing}
              size="lg"
            />
          </Flex>
        </Box>
      </Flex>
    </Flex>
  );
};

/**
 * 消息渲染器
 */
const MessageRenderer = ({ message, userAvatar }) => {
  const userBubbleBg = useColorModeValue('blue.500', 'blue.600');
  const agentBubbleBg = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  switch (message.type) {
    case MessageTypes.USER:
      return (
        <Flex justify="flex-end">
          <HStack align="flex-start" maxW="75%">
            <Box
              bg={userBubbleBg}
              color="white"
              px={4}
              py={3}
              borderRadius="lg"
              boxShadow="md"
            >
              <Text fontSize="sm" whiteSpace="pre-wrap">
                {message.content}
              </Text>
            </Box>
            <Avatar size="sm" src={userAvatar} icon={<FiUser fontSize="1rem" />} />
          </HStack>
        </Flex>
      );

    case MessageTypes.AGENT_THINKING:
      return (
        <Flex justify="flex-start">
          <HStack align="flex-start" maxW="75%">
            <Avatar size="sm" bg="purple.500" icon={<FiCpu fontSize="1rem" />} />
            <Box
              bg={agentBubbleBg}
              px={4}
              py={3}
              borderRadius="lg"
              borderWidth="1px"
              borderColor={borderColor}
              boxShadow="sm"
            >
              <HStack>
                <Spinner size="sm" color="purple.500" />
                <Text fontSize="sm" color="purple.600">
                  {message.content}
                </Text>
              </HStack>
            </Box>
          </HStack>
        </Flex>
      );

    case MessageTypes.AGENT_PLAN:
      return (
        <Flex justify="flex-start">
          <HStack align="flex-start" maxW="85%">
            <Avatar size="sm" bg="blue.500" icon={<FiCpu fontSize="1rem" />} />
            <VStack align="stretch" flex="1">
              <PlanCard plan={message.plan} stepResults={[]} />
            </VStack>
          </HStack>
        </Flex>
      );

    case MessageTypes.AGENT_EXECUTING:
      return (
        <Flex justify="flex-start">
          <HStack align="flex-start" maxW="85%">
            <Avatar size="sm" bg="orange.500" icon={<FiCpu fontSize="1rem" />} />
            <VStack align="stretch" flex="1" spacing={3}>
              <PlanCard plan={message.plan} stepResults={message.stepResults} />
              {message.stepResults?.map((result, idx) => (
                <StepResultCard key={idx} stepResult={result} />
              ))}
            </VStack>
          </HStack>
        </Flex>
      );

    case MessageTypes.AGENT_RESPONSE:
      return (
        <Flex justify="flex-start">
          <HStack align="flex-start" maxW="85%">
            <Avatar size="sm" bg="green.500" icon={<FiCpu fontSize="1rem" />} />
            <VStack align="stretch" flex="1" spacing={3}>
              {/* 最终总结（支持 Markdown + ECharts） */}
              <Box
                bg={agentBubbleBg}
                px={4}
                py={3}
                borderRadius="lg"
                borderWidth="1px"
                borderColor={borderColor}
                boxShadow="md"
              >
                {/* 流式输出中显示纯文本，完成后才渲染 Markdown + 图表 */}
                {message.isStreaming ? (
                  <Text fontSize="sm" whiteSpace="pre-wrap">
                    {message.content}
                  </Text>
                ) : (
                  <MarkdownWithCharts content={message.content} />
                )}

                {/* 元数据 */}
                {message.metadata && (
                  <HStack mt={3} spacing={4} fontSize="xs" color="gray.500">
                    <Text>总步骤: {message.metadata.total_steps}</Text>
                    <Text>✓ {message.metadata.successful_steps}</Text>
                    {message.metadata.failed_steps > 0 && (
                      <Text>✗ {message.metadata.failed_steps}</Text>
                    )}
                    <Text>耗时: {message.metadata.total_execution_time?.toFixed(1)}s</Text>
                  </HStack>
                )}
              </Box>

              {/* 执行详情（可选） */}
              {message.plan && message.stepResults && message.stepResults.length > 0 && (
                <VStack align="stretch" spacing={2}>
                  <Divider />
                  <Text fontSize="xs" fontWeight="bold" color="gray.500">
                    📊 执行详情（点击展开查看）
                  </Text>
                  {message.stepResults.map((result, idx) => (
                    <StepResultCard key={idx} stepResult={result} />
                  ))}
                </VStack>
              )}
            </VStack>
          </HStack>
        </Flex>
      );

    case MessageTypes.ERROR:
      return (
        <Flex justify="flex-start">
          <HStack align="flex-start" maxW="75%">
            <Avatar size="sm" bg="red.500" icon={<FiCpu fontSize="1rem" />} />
            <Box
              bg="red.50"
              color="red.700"
              px={4}
              py={3}
              borderRadius="lg"
              borderWidth="1px"
              borderColor="red.200"
            >
              <Text fontSize="sm">{message.content}</Text>
            </Box>
          </HStack>
        </Flex>
      );

    default:
      return null;
  }
};

export default AgentChatV3;