// src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
// 精简模式股票卡片组件（浮动卡片样式）

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

/**
 * 精简模式股票卡片组件
 * @param {Object} props
 * @param {Object} props.stock - 股票对象
 * @param {Object} props.quote - 股票行情数据（可选）
 */
const CompactStockItem = ({ stock, quote = null }) => {
  const nameColor = useColorModeValue('gray.700', 'gray.300');

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

  // 格式化涨跌幅显示
  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';
  };

  // 获取背景渐变色（涨红跌绿）
  const getBackgroundGradient = (value) => {
    const num = parseFloat(value);
    if (isNaN(num) || num === 0) {
      return 'linear(to-br, gray.50, gray.100)';
    }
    return num > 0
      ? 'linear(to-br, red.50, red.100)'
      : 'linear(to-br, green.50, green.100)';
  };

  // 获取边框颜色
  const getBorderColor = (value) => {
    const num = parseFloat(value);
    if (isNaN(num) || num === 0) return 'gray.300';
    return num > 0 ? 'red.300' : 'green.300';
  };

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

  return (
    <Tooltip
      label={`${stock.stock_name} - 点击查看详情`}
      placement="top"
      hasArrow
      bg="gray.700"
      color="white"
      fontSize="xs"
    >
      <Box
        bgGradient={getBackgroundGradient(change)}
        borderWidth="3px"
        borderColor={getBorderColor(change)}
        borderRadius="2xl"
        p={4}
        onClick={handleViewDetail}
        cursor="pointer"
        boxShadow="lg"
        position="relative"
        overflow="hidden"
        _before={{
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '4px',
          bg: getBorderColor(change),
        }}
        _hover={{
          boxShadow: '2xl',
          transform: 'translateY(-4px) scale(1.02)',
        }}
        transition="all 0.3s ease-in-out"
        display="inline-block"
        minW="150px"
      >
        {/* 股票代码 */}
        <Text
          fontSize="md"
          fontWeight="bold"
          color={getChangeColor(change)}
          mb={2}
          textAlign="center"
        >
          {stock.stock_code}
        </Text>

        {/* 涨跌幅 - 超大号显示 */}
        <Text
          fontSize="3xl"
          fontWeight="black"
          color={getChangeColor(change)}
          textAlign="center"
          lineHeight="1"
          textShadow="0 1px 2px rgba(0,0,0,0.1)"
        >
          {formatChange(change)}
        </Text>

        {/* 股票名称（小字） */}
        <Text
          fontSize="xs"
          color={nameColor}
          mt={2}
          textAlign="center"
          noOfLines={1}
          fontWeight="medium"
        >
          {stock.stock_name}
        </Text>
      </Box>
    </Tooltip>
  );
};

export default CompactStockItem;