// src/views/Community/components/DynamicNewsDetail/StockListItem.js
// 股票卡片组件（融合表格功能的卡片样式）

import React, { useState } from 'react';
import {
  Box,
  Flex,
  VStack,
  HStack,
  Text,
  Button,
  IconButton,
  Collapse,
  Tooltip,
  useColorModeValue,
} from '@chakra-ui/react';
import { StarIcon } from '@chakra-ui/icons';
import MiniTimelineChart from '../StockDetailPanel/components/MiniTimelineChart';
import MiniKLineChart from './MiniKLineChart';
import StockChartModal from '../../../../components/StockChart/StockChartModal';

/**
 * 股票卡片组件
 * @param {Object} props
 * @param {Object} props.stock - 股票对象
 * @param {string} props.stock.stock_name - 股票名称
 * @param {string} props.stock.stock_code - 股票代码
 * @param {string} props.stock.relation_desc - 关联描述
 * @param {Object} props.quote - 股票行情数据（可选）
 * @param {number} props.quote.change - 涨跌幅
 * @param {string} props.eventTime - 事件时间（可选）
 * @param {boolean} props.isInWatchlist - 是否在自选股中
 * @param {Function} props.onWatchlistToggle - 切换自选股回调
 */
const StockListItem = ({
  stock,
  quote = null,
  eventTime = null,
  isInWatchlist = false,
  onWatchlistToggle
}) => {
  const cardBg = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const codeColor = useColorModeValue('blue.600', 'blue.300');
  const nameColor = useColorModeValue('gray.700', 'gray.300');
  const descColor = useColorModeValue('gray.600', 'gray.400');
  const dividerColor = useColorModeValue('gray.200', 'gray.600');

  const [isDescExpanded, setIsDescExpanded] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleViewDetail = () => {
    const stockCode = stock.stock_code.split('.')[0];
    window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
  };

  const handleWatchlistClick = (e) => {
    e.stopPropagation();
    onWatchlistToggle?.(stock.stock_code, isInWatchlist);
  };

  // 格式化涨跌幅显示
  const formatChange = (value) => {
    if (value === null || value === undefined || isNaN(value)) return '--';
    const prefix = value > 0 ? '+' : '';
    return `${prefix}${parseFloat(value).toFixed(2)}%`;
  };

  // 获取涨跌幅颜色
  const getChangeColor = (value) => {
    const num = parseFloat(value);
    if (isNaN(num) || num === 0) return 'gray.500';
    return num > 0 ? 'red.500' : 'green.500';
  };

  // 获取涨跌幅数据（优先使用 quote，fallback 到 stock）
  const change = quote?.change ?? stock.daily_change ?? null;

  // 处理关联描述
  const getRelationDesc = () => {
    const relationDesc = stock.relation_desc;

    if (!relationDesc) return '--';

    if (typeof relationDesc === 'string') {
      return relationDesc;
    } else if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
      // 新格式：{data: [{query_part: "...", sentences: "..."}]}
      return relationDesc.data
        .map(item => item.query_part || item.sentences || '')
        .filter(s => s)
        .join('；') || '--';
    }

    return '--';
  };

  const relationText = getRelationDesc();
  const maxLength = 50; // 收缩时显示的最大字符数
  const needTruncate = relationText && relationText !== '--' && relationText.length > maxLength;

  return (
    <>
    <Box
      bg={cardBg}
      borderWidth="1px"
      borderColor={borderColor}
      borderRadius="lg"
      p={3}
      position="relative"
      overflow="hidden"
      _before={{
        content: '""',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: '3px',
        bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
      }}
      _hover={{
        boxShadow: 'lg',
        borderColor: 'blue.300',
      }}
      transition="all 0.2s"
    >
      {/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
      <HStack spacing={3} align="stretch">
        {/* 左侧：股票名称 + 涨跌幅（垂直排列） */}
        <VStack
          align="stretch"
          spacing={1}
          minW="140px"
          maxW="160px"
          justify="center"
        >
          <Tooltip
            label="点击查看股票详情"
            placement="top"
            hasArrow
            bg="blue.600"
            color="white"
            fontSize="xs"
          >
            <Text
              fontSize="md"
              fontWeight="bold"
              color={codeColor}
              noOfLines={1}
              cursor="pointer"
              onClick={handleViewDetail}
              _hover={{ textDecoration: 'underline' }}
            >
              {stock.stock_name}
            </Text>
          </Tooltip>
          <HStack spacing={2} align="center">
            <Text
              fontSize="xl"
              fontWeight="bold"
              color={getChangeColor(change)}
            >
              {formatChange(change)}
            </Text>
            {onWatchlistToggle && (
              <IconButton
                size="xs"
                variant={isInWatchlist ? 'solid' : 'ghost'}
                colorScheme={isInWatchlist ? 'yellow' : 'gray'}
                icon={<StarIcon />}
                onClick={handleWatchlistClick}
                aria-label={isInWatchlist ? '已关注' : '加自选'}
                borderRadius="full"
              />
            )}
          </HStack>
        </VStack>

        {/* 分时图 */}
        <Box
          w="180px"
          borderWidth="1px"
          borderColor={useColorModeValue('blue.100', 'blue.700')}
          borderRadius="md"
          p={2}
          bg={useColorModeValue('blue.50', 'blue.900')}
          onClick={(e) => {
            e.stopPropagation();
            setIsModalOpen(true);
          }}
          cursor="pointer"
          _hover={{
            borderColor: useColorModeValue('blue.300', 'blue.500'),
            boxShadow: 'sm'
          }}
          transition="all 0.2s"
        >
          <Text
            fontSize="xs"
            color={useColorModeValue('blue.700', 'blue.200')}
            mb={1}
            fontWeight="semibold"
          >
            📈 分时
          </Text>
          <MiniTimelineChart
            stockCode={stock.stock_code}
            eventTime={eventTime}
          />
        </Box>

        {/* K线图 */}
        <Box
          w="180px"
          borderWidth="1px"
          borderColor={useColorModeValue('purple.100', 'purple.700')}
          borderRadius="md"
          p={2}
          bg={useColorModeValue('purple.50', 'purple.900')}
          onClick={(e) => {
            e.stopPropagation();
            setIsModalOpen(true);
          }}
          cursor="pointer"
          _hover={{
            borderColor: useColorModeValue('purple.300', 'purple.500'),
            boxShadow: 'sm'
          }}
          transition="all 0.2s"
        >
          <Text
            fontSize="xs"
            color={useColorModeValue('purple.700', 'purple.200')}
            mb={1}
            fontWeight="semibold"
          >
            📊 日线
          </Text>
          <MiniKLineChart
            stockCode={stock.stock_code}
            eventTime={eventTime}
          />
        </Box>

        {/* 关联描述（单行显示，点击展开） */}
        {relationText && relationText !== '--' && (
          <Tooltip
            label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
            placement="top"
            hasArrow
            bg="gray.600"
            color="white"
            fontSize="xs"
          >
            <Box
              flex={1}
              minW={0}
              onClick={(e) => {
                e.stopPropagation();
                setIsDescExpanded(!isDescExpanded);
              }}
              cursor="pointer"
              px={3}
              py={2}
              bg={useColorModeValue('gray.50', 'gray.700')}
              borderRadius="md"
              _hover={{
                bg: useColorModeValue('gray.100', 'gray.600'),
              }}
              transition="background 0.2s"
            >
              <Text fontSize="xs" color={descColor} fontWeight="semibold" mb={1}>
                关联描述
              </Text>
              <Collapse in={isDescExpanded} startingHeight={20}>
                <Text
                  fontSize="sm"
                  color={nameColor}
                  lineHeight="1.6"
                >
                  {relationText}
                </Text>
              </Collapse>
              {isDescExpanded && (
                <Text
                  fontSize="xs"
                  color="gray.500"
                  mt={2}
                  fontStyle="italic"
                >
                  ⚠️ AI生成，仅供参考
                </Text>
              )}
            </Box>
          </Tooltip>
        )}
      </HStack>
    </Box>

    {/* 股票详情弹窗 - 未打开时不渲染 */}
    {isModalOpen && (
      <StockChartModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        stock={stock}
        eventTime={eventTime}
        size="6xl"
      />
    )}
    </>
  );
};

export default StockListItem;