// src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/ConceptStockItem.js
// 概念股票列表项组件

import React from 'react';
import {
  Box,
  HStack,
  Text,
  Badge,
  useColorModeValue,
} from '@chakra-ui/react';

/**
 * 概念股票列表项组件
 * @param {Object} props
 * @param {Object} props.stock - 股票对象
 *   - stock_name: 股票名称
 *   - stock_code: 股票代码
 *   - change_pct: 涨跌幅
 *   - reason: 关联原因
 */
const ConceptStockItem = ({ stock }) => {
  const sectionBg = useColorModeValue('gray.50', 'gray.750');
  const conceptNameColor = useColorModeValue('gray.800', 'gray.100');
  const stockCountColor = useColorModeValue('gray.500', 'gray.400');

  const stockChangePct = parseFloat(stock.change_pct);
  const stockChangeColor = stockChangePct > 0 ? 'red' : stockChangePct < 0 ? 'green' : 'gray';
  const stockChangeSymbol = stockChangePct > 0 ? '+' : '';

  // 处理股票详情跳转
  const handleStockClick = (e) => {
    e.stopPropagation(); // 阻止事件冒泡到概念卡片
    const cleanCode = stock.stock_code.replace(/\.(SZ|SH)$/i, '');
    window.open(`https://valuefrontier.cn/company?scode=${cleanCode}`, '_blank');
  };

  return (
    <Box
      p={2}
      borderRadius="md"
      bg={sectionBg}
      fontSize="xs"
      cursor="pointer"
      onClick={handleStockClick}
      _hover={{
        bg: useColorModeValue('gray.100', 'gray.700'),
        transform: 'translateX(4px)',
      }}
      transition="all 0.2s"
    >
      <HStack justify="space-between" mb={1}>
        <HStack spacing={2}>
          <Text fontWeight="semibold" color={conceptNameColor}>
            {stock.stock_name}
          </Text>
          <Badge size="sm" variant="outline">
            {stock.stock_code}
          </Badge>
        </HStack>
        {stock.change_pct && (
          <Badge
            colorScheme={stockChangeColor}
            fontSize="xs"
          >
            {stockChangeSymbol}{stockChangePct.toFixed(2)}%
          </Badge>
        )}
      </HStack>
      {stock.reason && (
        <Text fontSize="xs" color={stockCountColor} mt={1} noOfLines={2}>
          {stock.reason}
        </Text>
      )}
    </Box>
  );
};

export default ConceptStockItem;