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

import React, { useState } from 'react';
import {
  Box,
  Flex,
  VStack,
  SimpleGrid,
  Text,
  Button,
  IconButton,
  Collapse,
  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="md"
      p={4}
      onClick={handleViewDetail}
      cursor="pointer"
      _hover={{
        boxShadow: 'md',
        borderColor: 'blue.300',
      }}
      transition="all 0.2s"
    >
      <VStack align="stretch" spacing={3}>
        {/* 顶部：股票代码 + 名称 + 操作按钮（上下两行布局） */}
        <VStack align="stretch" spacing={2}>
          {/* 第一行：股票代码 + 涨跌幅 + 操作按钮 */}
          <Flex justify="space-between" align="center">
            {/* 左侧：代码 + 涨跌幅 */}
            <Flex align="baseline" gap={2}>
              <Text
                fontSize="md"
                fontWeight="bold"
                color={codeColor}
                cursor="pointer"
                onClick={handleViewDetail}
                _hover={{ textDecoration: 'underline' }}
              >
                {stock.stock_code}
              </Text>
              <Text
                fontSize="sm"
                fontWeight="semibold"
                color={getChangeColor(change)}
              >
                {formatChange(change)}
              </Text>
            </Flex>

            {/* 右侧：操作按钮 */}
            <Flex gap={2}>
              {onWatchlistToggle && (
                <IconButton
                  size="sm"
                  variant={isInWatchlist ? 'solid' : 'outline'}
                  colorScheme={isInWatchlist ? 'yellow' : 'gray'}
                  icon={<StarIcon />}
                  onClick={handleWatchlistClick}
                  aria-label={isInWatchlist ? '已关注' : '加自选'}
                  title={isInWatchlist ? '已关注' : '加自选'}
                />
              )}
              <Button
                size="sm"
                colorScheme="blue"
                onClick={(e) => {
                  e.stopPropagation();
                  handleViewDetail();
                }}
                display={{ base: 'inline-flex', lg: 'none' }}
              >
                查看
              </Button>
            </Flex>
          </Flex>

          {/* 第二行：公司名称（彩色高亮） */}
          <Text
            fontSize="sm"
            fontWeight="medium"
            color={codeColor}
            bg={useColorModeValue('blue.50', 'blue.900')}
            px={2}
            py={0.5}
            borderRadius="sm"
            width="fit-content"
          >
            {stock.stock_name}
          </Text>
        </VStack>

        {/* 分隔线 */}
        <Box borderTop="1px solid" borderColor={dividerColor} />

        {/* 分时图 & K线图 - 左右布局 */}
        <Box>
          <SimpleGrid columns={2} spacing={3}>
            {/* 左侧：分时图 */}
            <Box onClick={(e) => e.stopPropagation()}>
              <Text fontSize="xs" color={descColor} mb={1} textAlign="center">
                分时图
              </Text>
              <MiniTimelineChart
                stockCode={stock.stock_code}
                eventTime={eventTime}
                onClick={() => setIsModalOpen(true)}
              />
            </Box>

            {/* 右侧：K线图 */}
            <Box onClick={(e) => e.stopPropagation()}>
              <Text fontSize="xs" color={descColor} mb={1} textAlign="center">
                日K线
              </Text>
              <MiniKLineChart
                stockCode={stock.stock_code}
                eventTime={eventTime}
                onClick={() => setIsModalOpen(true)}
              />
            </Box>
          </SimpleGrid>
        </Box>

        {/* 分隔线 */}
        <Box borderTop="1px solid" borderColor={dividerColor} />

        {/* 关联描述 */}
        {relationText && relationText !== '--' && (
          <Box>
            <Text fontSize="xs" color={descColor} mb={1}>
              关联描述：
            </Text>
            <Collapse in={isDescExpanded} startingHeight={40}>
              <Text
                fontSize="sm"
                color={nameColor}
                lineHeight="1.6"
                cursor={needTruncate ? "pointer" : "default"}
                onClick={(e) => {
                  if (needTruncate) {
                    e.stopPropagation();
                    setIsDescExpanded(!isDescExpanded);
                  }
                }}
                _hover={needTruncate ? { opacity: 0.8 } : {}}
              >
                {relationText}
              </Text>
            </Collapse>
            {needTruncate && (
              <Button
                size="xs"
                variant="link"
                colorScheme="blue"
                onClick={(e) => {
                  e.stopPropagation();
                  setIsDescExpanded(!isDescExpanded);
                }}
                mt={1}
              >
                {isDescExpanded ? '收起' : '展开'}
              </Button>
            )}

            {/* 合规提示 */}
            <Text
              fontSize="xs"
              color="gray.500"
              mt={2}
              fontStyle="italic"
            >
              ⚠️ 以上关联描述由AI生成，仅供参考，不构成投资建议
            </Text>
          </Box>
        )}
      </VStack>
    </Box>

    {/* 股票详情弹窗 */}
    <StockChartModal
      isOpen={isModalOpen}
      onClose={() => setIsModalOpen(false)}
      stock={stock}
      eventTime={eventTime}
      size="6xl"
    />
    </>
  );
};

export default StockListItem;