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

import React from 'react';
import { useSelector } from 'react-redux';
import {
  Box,
  Text,
  Tooltip,
  useColorModeValue,
} from '@chakra-ui/react';
import { selectIsMobile } from '@store/slices/deviceSlice';
import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } from '@utils/colorUtils';

/**
 * 精简模式股票卡片组件
 * @param {Object} props
 * @param {Object} props.stock - 股票对象
 * @param {Object} props.quote - 股票行情数据（可选）
 */
const CompactStockItem = ({ stock, quote = null }) => {
  const isMobile = useSelector(selectIsMobile);
  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)}%`;
  };

  // 获取涨跌幅数据（优先使用 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={getChangeBackgroundGradient(change)}
        borderWidth="1px"
        borderColor={getChangeBorderColor(change)}
        borderRadius="xl"
        p={2}
        onClick={handleViewDetail}
        cursor="pointer"
        boxShadow="lg"
        position="relative"
        overflow="hidden"
        _before={{
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '4px',
          bg: getChangeBorderColor(change),
        }}
        _hover={{
          boxShadow: '2xl',
          transform: 'translateY(-4px) scale(1.02)',
        }}
        transition="all 0.3s ease-in-out"
        display="inline-block"
        minW="100px"
      >
        {/* 股票代码 */}
        <Text
          fontSize={isMobile ? "sm" : "md"}
          fontWeight="bold"
          color={getChangeColor(change)}
          mb={isMobile ? 1 : 2}
          textAlign="center"
        >
          {stock.stock_code}
        </Text>

        {/* 涨跌幅 - 超大号显示 */}
        <Text
          fontSize={isMobile ? "xl" : "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={isMobile ? "2xs" : "xs"}
          color={nameColor}
          mt={isMobile ? 1 : 2}
          textAlign="center"
          noOfLines={1}
          fontWeight="medium"
        >
          {stock.stock_name}
        </Text>
      </Box>
    </Tooltip>
  );
};

export default CompactStockItem;