// src/views/AgentChat/components/MeetingRoom/MeetingMessageBubble.js
// 会议消息气泡组件 - V2: 支持工具调用展示和流式输出

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Box,
  Flex,
  HStack,
  VStack,
  Text,
  Avatar,
  Badge,
  IconButton,
  Tooltip,
  Card,
  CardBody,
  Spinner,
  Code,
  Collapse,
} from '@chakra-ui/react';
import {
  TrendingUp,
  TrendingDown,
  BarChart2,
  Users,
  Crown,
  Copy,
  ThumbsUp,
  ChevronRight,
  ChevronDown,
  Database,
  Check,
  Wrench,
  AlertCircle,
  Brain,
} from 'lucide-react';
import { getRoleConfig, MEETING_ROLES } from '../../constants/meetingRoles';
import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';

/**
 * 清理 DeepSeek 模型输出中的工具调用标记
 * DeepSeek 有时会以文本形式输出工具调用，格式如：
 * <｜tool▁calls▁begin｜><｜tool▁call▁begin｜>tool_name<｜tool▁sep｜>{"args": "value"}<｜tool▁call▁end｜><｜tool▁calls▁end｜>
 */
const cleanDeepseekToolMarkers = (content) => {
  if (!content) return content;

  // 清理 DeepSeek 工具调用标记（匹配整个块）
  let cleaned = content.replace(/<｜tool▁calls▁begin｜>[\s\S]*?<｜tool▁calls▁end｜>/g, '');

  // 清理可能残留的单个标记
  const markers = [
    '<｜tool▁calls▁begin｜>',
    '<｜tool▁calls▁end｜>',
    '<｜tool▁call▁begin｜>',
    '<｜tool▁call▁end｜>',
    '<｜tool▁sep｜>',
  ];
  markers.forEach((marker) => {
    cleaned = cleaned.split(marker).join('');
  });

  return cleaned.trim();
};

/**
 * 解析 deepmoney 格式的内容
 * 格式: <think>思考过程</think><answer>回答内容</answer>
 *
 * @param {string} content - 原始内容
 * @returns {{ thinking: string | null, answer: string }} 解析后的内容
 */
const parseDeepmoneyContent = (content) => {
  if (!content) return { thinking: null, answer: '' };

  // 先清理 DeepSeek 工具调用标记
  const cleanedContent = cleanDeepseekToolMarkers(content);

  // 匹配 <think>...</think> 标签
  const thinkMatch = cleanedContent.match(/<think>([\s\S]*?)<\/think>/i);
  // 匹配 <answer>...</answer> 标签
  const answerMatch = cleanedContent.match(/<answer>([\s\S]*?)<\/answer>/i);

  // 如果有 answer 标签，提取内容
  if (answerMatch) {
    return {
      thinking: thinkMatch ? thinkMatch[1].trim() : null,
      answer: answerMatch[1].trim(),
    };
  }

  // 如果只有 think 标签但没有 answer 标签，可能正在流式输出中
  if (thinkMatch && !answerMatch) {
    // 检查 think 后面是否有其他内容
    const afterThink = cleanedContent.replace(/<think>[\s\S]*?<\/think>/i, '').trim();
    // 如果 think 后面有内容但不是 answer 标签包裹的，可能是部分输出
    if (afterThink && !afterThink.startsWith('<answer>')) {
      return {
        thinking: thinkMatch[1].trim(),
        answer: afterThink.replace(/<\/?answer>/gi, '').trim(),
      };
    }
    return {
      thinking: thinkMatch[1].trim(),
      answer: '',
    };
  }

  // 如果没有特殊标签，返回清理后的内容
  return {
    thinking: null,
    answer: cleanedContent,
  };
};

/**
 * 获取角色图标
 */
const getRoleIcon = (roleType) => {
  switch (roleType) {
    case 'bull':
      return <TrendingUp className="w-4 h-4" />;
    case 'bear':
      return <TrendingDown className="w-4 h-4" />;
    case 'quant':
      return <BarChart2 className="w-4 h-4" />;
    case 'retail':
      return <Users className="w-4 h-4" />;
    case 'manager':
      return <Crown className="w-4 h-4" />;
    default:
      return <Users className="w-4 h-4" />;
  }
};

/**
 * 工具名称映射
 */
const TOOL_NAME_MAP = {
  search_china_news: '搜索新闻',
  search_research_reports: '搜索研报',
  get_stock_basic_info: '获取股票信息',
  get_stock_financial_index: '获取财务指标',
  get_stock_balance_sheet: '获取资产负债表',
  get_stock_cashflow: '获取现金流量表',
  get_stock_trade_data: '获取交易数据',
  search_limit_up_stocks: '搜索涨停股',
  get_concept_statistics: '获取概念统计',
};

/**
 * 格式化结果数据用于显示
 */
const formatResultData = (data) => {
  if (data === null || data === undefined) return null;
  if (typeof data === 'string') return data;
  try {
    return JSON.stringify(data, null, 2);
  } catch {
    return String(data);
  }
};

/**
 * 获取结果数据的预览文本
 */
const getResultPreview = (result) => {
  if (!result) return '无数据';

  if (result.data) {
    const data = result.data;
    if (data.chart_data) {
      return `图表数据: ${data.chart_data.labels?.length || 0} 项`;
    }
    if (data.sector_data) {
      const sectorCount = Object.keys(data.sector_data).length;
      return `${sectorCount} 个板块分析`;
    }
    if (data.stocks) {
      return `${data.stocks.length} 只股票`;
    }
    if (Array.isArray(data)) {
      return `${data.length} 条记录`;
    }
  }

  if (Array.isArray(result)) {
    return `${result.length} 条记录`;
  }

  if (typeof result === 'object') {
    const keys = Object.keys(result);
    return `${keys.length} 个字段`;
  }

  return '查看详情';
};

/**
 * 单个工具调用卡片
 */
const ToolCallCard = ({ toolCall, idx, roleColor }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [copied, setCopied] = useState(false);

  const hasResult = toolCall.result && (
    typeof toolCall.result === 'object'
      ? Object.keys(toolCall.result).length > 0
      : toolCall.result
  );

  const handleCopy = async (e) => {
    e.stopPropagation();
    try {
      await navigator.clipboard.writeText(formatResultData(toolCall.result));
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('复制失败:', err);
    }
  };

  const toolDisplayName = TOOL_NAME_MAP[toolCall.tool_name] || toolCall.tool_name;

  return (
    <motion.div
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay: idx * 0.05 }}
    >
      <Card
        bg="rgba(255, 255, 255, 0.03)"
        border="1px solid"
        borderColor={isExpanded ? `${roleColor}40` : 'rgba(255, 255, 255, 0.1)'}
        borderRadius="md"
        transition="all 0.2s"
        _hover={{
          borderColor: `${roleColor}30`,
        }}
        size="sm"
      >
        <CardBody p={2}>
          {/* 工具调用头部 */}
          <Flex
            align="center"
            justify="space-between"
            gap={2}
            cursor={hasResult ? 'pointer' : 'default'}
            onClick={() => hasResult && setIsExpanded(!isExpanded)}
          >
            <HStack flex={1} spacing={2}>
              {toolCall.status === 'calling' ? (
                <Spinner size="xs" color={roleColor} />
              ) : toolCall.status === 'success' ? (
                <Box color="green.400">
                  <Check className="w-3 h-3" />
                </Box>
              ) : (
                <Box color="red.400">
                  <AlertCircle className="w-3 h-3" />
                </Box>
              )}
              <Wrench className="w-3 h-3" style={{ color: roleColor }} />
              <Text fontSize="xs" fontWeight="medium" color="gray.300">
                {toolDisplayName}
              </Text>
              {hasResult && (
                <Box
                  color="gray.500"
                  transition="transform 0.2s"
                  transform={isExpanded ? 'rotate(90deg)' : 'rotate(0deg)'}
                >
                  <ChevronRight className="w-3 h-3" />
                </Box>
              )}
            </HStack>

            <HStack spacing={2}>
              {hasResult && (
                <Tooltip label={copied ? '已复制' : '复制数据'} placement="top">
                  <IconButton
                    size="xs"
                    variant="ghost"
                    icon={copied ? <Check className="w-2 h-2" /> : <Copy className="w-2 h-2" />}
                    onClick={handleCopy}
                    color={copied ? 'green.400' : 'gray.500'}
                    _hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
                    aria-label="复制"
                    minW="20px"
                    h="20px"
                  />
                </Tooltip>
              )}
              {toolCall.execution_time && (
                <Text fontSize="10px" color="gray.500">
                  {toolCall.execution_time.toFixed(2)}s
                </Text>
              )}
            </HStack>
          </Flex>

          {/* 展开的详细数据 */}
          <Collapse in={isExpanded} animateOpacity>
            {isExpanded && hasResult && (
              <Box mt={2}>
                <Code
                  display="block"
                  p={2}
                  borderRadius="sm"
                  fontSize="10px"
                  whiteSpace="pre-wrap"
                  bg="rgba(0, 0, 0, 0.3)"
                  color="gray.300"
                  maxH="200px"
                  overflowY="auto"
                  sx={{
                    '&::-webkit-scrollbar': { width: '4px' },
                    '&::-webkit-scrollbar-track': { bg: 'transparent' },
                    '&::-webkit-scrollbar-thumb': { bg: 'gray.600', borderRadius: 'full' },
                  }}
                >
                  {formatResultData(toolCall.result)}
                </Code>
              </Box>
            )}
          </Collapse>
        </CardBody>
      </Card>
    </motion.div>
  );
};

/**
 * 工具调用列表组件
 */
const ToolCallsList = ({ toolCalls, roleColor }) => {
  if (!toolCalls || toolCalls.length === 0) return null;

  return (
    <Box mt={3} mb={2}>
      <HStack spacing={2} mb={2}>
        <Wrench className="w-3 h-3" style={{ color: roleColor }} />
        <Text fontSize="xs" color="gray.400">
          工具调用 ({toolCalls.length})
        </Text>
      </HStack>
      <VStack spacing={1} align="stretch">
        {toolCalls.map((toolCall, idx) => (
          <ToolCallCard
            key={toolCall.tool_call_id || idx}
            toolCall={toolCall}
            idx={idx}
            roleColor={roleColor}
          />
        ))}
      </VStack>
    </Box>
  );
};

/**
 * 思考过程展示组件
 * 用于显示 deepmoney 等模型的思考过程，默认折叠
 */
const ThinkingBlock = ({ thinking, roleColor }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  if (!thinking) return null;

  return (
    <Box mb={3}>
      <HStack
        spacing={2}
        cursor="pointer"
        onClick={() => setIsExpanded(!isExpanded)}
        p={2}
        bg="rgba(255, 255, 255, 0.03)"
        borderRadius="md"
        border="1px solid"
        borderColor="rgba(255, 255, 255, 0.1)"
        _hover={{ borderColor: `${roleColor}30` }}
        transition="all 0.2s"
      >
        <Brain className="w-3 h-3" style={{ color: roleColor }} />
        <Text fontSize="xs" color="gray.400" flex={1}>
          AI 思考过程
        </Text>
        <Box
          color="gray.500"
          transition="transform 0.2s"
          transform={isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'}
        >
          <ChevronDown className="w-3 h-3" />
        </Box>
      </HStack>

      <Collapse in={isExpanded} animateOpacity>
        <Box
          mt={2}
          p={3}
          bg="rgba(0, 0, 0, 0.2)"
          borderRadius="md"
          borderLeft="2px solid"
          borderColor={`${roleColor}50`}
          maxH="200px"
          overflowY="auto"
          sx={{
            '&::-webkit-scrollbar': { width: '4px' },
            '&::-webkit-scrollbar-track': { bg: 'transparent' },
            '&::-webkit-scrollbar-thumb': { bg: 'gray.600', borderRadius: 'full' },
          }}
        >
          <Text fontSize="xs" color="gray.400" whiteSpace="pre-wrap" lineHeight="tall">
            {thinking}
          </Text>
        </Box>
      </Collapse>
    </Box>
  );
};

/**
 * MeetingMessageBubble - 会议消息气泡组件
 *
 * @param {Object} props
 * @param {Object} props.message - 消息对象
 * @param {boolean} props.isLatest - 是否是最新消息
 * @returns {JSX.Element}
 */
const MeetingMessageBubble = ({ message, isLatest }) => {
  const roleConfig = getRoleConfig(message.role_id) || {
    name: message.role_name,
    nickname: message.nickname,
    color: message.color,
    roleType: 'retail',
  };

  const isUser = message.role_id === 'user';
  const isManager = roleConfig.roleType === 'manager';
  const isConclusion = message.is_conclusion;
  const isStreaming = message.isStreaming;
  const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;

  // 复制到剪贴板
  const handleCopy = () => {
    navigator.clipboard.writeText(message.content);
  };

  return (
    <Flex
      direction="column"
      align={isUser ? 'flex-end' : 'flex-start'}
      w="100%"
    >
      {/* 消息头部：角色信息 */}
      <HStack
        spacing={2}
        mb={2}
        flexDirection={isUser ? 'row-reverse' : 'row'}
      >
        <motion.div
          whileHover={{ scale: 1.1 }}
          transition={{ type: 'spring', stiffness: 400 }}
        >
          <Avatar
            size="sm"
            src={roleConfig.avatar}
            icon={getRoleIcon(roleConfig.roleType)}
            bg={roleConfig.color}
            boxShadow={`0 0 12px ${roleConfig.color}40`}
          />
        </motion.div>

        <VStack spacing={0} align={isUser ? 'flex-end' : 'flex-start'}>
          <HStack spacing={2}>
            <Text
              fontSize="sm"
              fontWeight="bold"
              color={roleConfig.color}
            >
              {roleConfig.name}
            </Text>
            {roleConfig.nickname !== roleConfig.name && (
              <Text fontSize="xs" color="gray.500">
                @{roleConfig.nickname}
              </Text>
            )}
            {isManager && (
              <Badge
                colorScheme="purple"
                size="sm"
                variant="subtle"
              >
                主持人
              </Badge>
            )}
            {isStreaming && (
              <Badge
                colorScheme="blue"
                size="sm"
                variant="subtle"
                display="flex"
                alignItems="center"
                gap={1}
              >
                <Spinner size="xs" />
                发言中
              </Badge>
            )}
            {isConclusion && (
              <Badge
                colorScheme="green"
                size="sm"
                variant="solid"
              >
                最终结论
              </Badge>
            )}
          </HStack>
          <Text fontSize="xs" color="gray.500">
            第 {message.round_number} 轮 ·{' '}
            {new Date(message.timestamp).toLocaleTimeString('zh-CN', {
              hour: '2-digit',
              minute: '2-digit',
            })}
          </Text>
        </VStack>
      </HStack>

      {/* 消息内容卡片 */}
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.2 }}
        style={{ maxWidth: isUser ? '70%' : '85%', width: '100%' }}
      >
        <Card
          bg={
            isUser
              ? `linear-gradient(135deg, ${roleConfig.color}20, ${roleConfig.color}10)`
              : isConclusion
              ? 'linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05))'
              : 'rgba(255, 255, 255, 0.05)'
          }
          border="1px solid"
          borderColor={
            isConclusion
              ? 'purple.500'
              : `${roleConfig.color}30`
          }
          borderRadius="xl"
          overflow="hidden"
          boxShadow={
            isConclusion
              ? '0 0 20px rgba(139, 92, 246, 0.3)'
              : isLatest
              ? `0 4px 20px ${roleConfig.color}20`
              : 'none'
          }
        >
          {/* 结论标题 */}
          {isConclusion && (
            <Box
              bgGradient="linear(to-r, purple.600, violet.600)"
              px={4}
              py={2}
            >
              <HStack>
                <Crown className="w-4 h-4" />
                <Text fontWeight="bold" fontSize="sm" color="white">
                  基金经理投资建议
                </Text>
              </HStack>
            </Box>
          )}

          <CardBody p={4}>
            {/* 工具调用列表 */}
            {hasToolCalls && (
              <ToolCallsList
                toolCalls={message.tool_calls}
                roleColor={roleConfig.color}
              />
            )}

            {/* 解析 deepmoney 格式的内容 */}
            {(() => {
              const parsedContent = parseDeepmoneyContent(message.content);
              return (
                <>
                  {/* 思考过程（可折叠） */}
                  <ThinkingBlock
                    thinking={parsedContent.thinking}
                    roleColor={roleConfig.color}
                  />

                  {/* 消息内容 */}
                  <Box
                    fontSize="sm"
                    color="gray.100"
                    lineHeight="tall"
                    sx={{
                      '& p': { mb: 2 },
                      '& h1, & h2, & h3': { color: 'gray.50', fontWeight: 'bold' },
                      '& ul, & ol': { pl: 4 },
                      '& li': { mb: 1 },
                      '& code': {
                        bg: 'rgba(255,255,255,0.1)',
                        px: 1,
                        borderRadius: 'sm',
                      },
                      '& blockquote': {
                        borderLeftWidth: '3px',
                        borderLeftColor: roleConfig.color,
                        pl: 3,
                        color: 'gray.300',
                        fontStyle: 'italic',
                      },
                      '& strong': { color: roleConfig.color },
                    }}
                  >
                    {parsedContent.answer ? (
                      <MarkdownWithCharts content={parsedContent.answer} variant="dark" />
                    ) : isStreaming ? (
                      <HStack spacing={2} color="gray.500">
                        <Spinner size="sm" />
                        <Text>正在思考...</Text>
                      </HStack>
                    ) : null}

                    {/* 流式输出时的光标 */}
                    {isStreaming && parsedContent.answer && (
                      <motion.span
                        animate={{ opacity: [1, 0, 1] }}
                        transition={{ duration: 0.8, repeat: Infinity }}
                        style={{ color: roleConfig.color }}
                      >
                        ▌
                      </motion.span>
                    )}
                  </Box>
                </>
              );
            })()}

            {/* 操作按钮 */}
            <Flex mt={3} pt={3} borderTop="1px solid" borderColor="whiteAlpha.100">
              <HStack spacing={2}>
                <Tooltip label="复制">
                  <IconButton
                    size="xs"
                    variant="ghost"
                    icon={<Copy className="w-3 h-3" />}
                    onClick={handleCopy}
                    color="gray.500"
                    _hover={{ color: 'white', bg: 'whiteAlpha.100' }}
                  />
                </Tooltip>
                <Tooltip label="有用">
                  <IconButton
                    size="xs"
                    variant="ghost"
                    icon={<ThumbsUp className="w-3 h-3" />}
                    color="gray.500"
                    _hover={{ color: 'green.400', bg: 'green.900' }}
                  />
                </Tooltip>
              </HStack>

              {/* 角色标签 */}
              <Box ml="auto">
                <Badge
                  bg={`${roleConfig.color}20`}
                  color={roleConfig.color}
                  fontSize="xs"
                  px={2}
                  py={0.5}
                  borderRadius="full"
                >
                  {roleConfig.roleType === 'bull' && '📈 看多'}
                  {roleConfig.roleType === 'bear' && '📉 看空'}
                  {roleConfig.roleType === 'quant' && '📊 量化'}
                  {roleConfig.roleType === 'retail' && '🌱 散户'}
                  {roleConfig.roleType === 'manager' && '👔 决策'}
                </Badge>
              </Box>
            </Flex>
          </CardBody>
        </Card>
      </motion.div>
    </Flex>
  );
};

export default MeetingMessageBubble;