/**
 * StockQuoteCard - 股票行情卡片组件
 *
 * 展示股票的实时行情、关键指标和主力动态
 */

import React from 'react';
import {
  Box,
  Card,
  CardBody,
  Flex,
  HStack,
  VStack,
  Text,
  Badge,
  Progress,
  Skeleton,
  IconButton,
  Tooltip,
} from '@chakra-ui/react';
import { Share2 } from 'lucide-react';

import FavoriteButton from '@components/FavoriteButton';
import type { StockQuoteCardProps } from './types';
import { mockStockQuoteData } from './mockData';

/**
 * 格式化价格显示
 */
const formatPrice = (price: number): string => {
  return price.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

/**
 * 格式化涨跌幅显示
 */
const formatChangePercent = (percent: number): string => {
  const sign = percent >= 0 ? '+' : '';
  return `${sign}${percent.toFixed(2)}%`;
};

/**
 * 格式化主力净流入显示
 */
const formatNetInflow = (value: number): string => {
  const sign = value >= 0 ? '+' : '';
  return `${sign}${value.toFixed(2)}亿`;
};

const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
  data = mockStockQuoteData,
  isLoading = false,
  isInWatchlist = false,
  isWatchlistLoading = false,
  onWatchlistToggle,
  onShare,
}) => {
  // 处理分享点击
  const handleShare = () => {
    onShare?.();
  };

  // 黑金主题颜色配置
  const cardBg = '#1A202C';
  const borderColor = '#C9A961';
  const labelColor = '#C9A961';
  const valueColor = '#F4D03F';
  const sectionTitleColor = '#F4D03F';

  // 涨跌颜色（红涨绿跌）
  const upColor = '#F44336';    // 涨 - 红色
  const downColor = '#4CAF50';  // 跌 - 绿色
  const priceColor = data.changePercent >= 0 ? upColor : downColor;
  const inflowColor = data.mainNetInflow >= 0 ? upColor : downColor;

  if (isLoading) {
    return (
      <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
        <CardBody>
          <Skeleton height="120px" />
        </CardBody>
      </Card>
    );
  }

  return (
    <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
      <CardBody>
        {/* 顶部：股票名称 + 关注/分享按钮 + 更新时间 */}
        <Flex justify="space-between" align="center" mb={4}>
          {/* 左侧：名称（代码） | 指数标签 */}
          <HStack spacing={2}>
            <Text fontSize="22px" fontWeight="bold" color={valueColor}>
              {data.name}（{data.code}）
            </Text>
            {data.indexTags.length > 0 && (
              <>
                <Text color={labelColor} fontSize="22px" fontWeight="light">|</Text>
                <Text fontSize="16px" color={labelColor}>
                  {data.indexTags.join('、')}
                </Text>
              </>
            )}
          </HStack>

          {/* 右侧：关注 + 分享 + 时间 */}
          <HStack spacing={3}>
            <FavoriteButton
              isFavorite={isInWatchlist}
              isLoading={isWatchlistLoading}
              onClick={onWatchlistToggle || (() => {})}
              colorScheme="gold"
              size="sm"
            />
            <Tooltip label="分享" placement="top">
              <IconButton
                aria-label="分享"
                icon={<Share2 size={18} />}
                variant="ghost"
                color={labelColor}
                size="sm"
                onClick={handleShare}
                _hover={{ bg: 'whiteAlpha.100' }}
              />
            </Tooltip>
            <Text fontSize="14px" color={labelColor}>
              {data.updateTime.split(' ')[1]}
            </Text>
          </HStack>
        </Flex>

        {/* 三栏布局 */}
        <Flex gap={8}>
          {/* 左栏：价格信息 */}
          <Box flex="1">
            <HStack align="baseline" spacing={3} mb={3}>
              <Text fontSize="48px" fontWeight="bold" color={priceColor}>
                {formatPrice(data.currentPrice)}
              </Text>
              <Badge
                bg={data.changePercent >= 0 ? upColor : downColor}
                color="#FFFFFF"
                fontSize="20px"
                fontWeight="bold"
                px={3}
                py={1}
                borderRadius="md"
              >
                {formatChangePercent(data.changePercent)}
              </Badge>
            </HStack>
            {/* 次要行情：今开 | 昨收 | 最高 | 最低 */}
            <HStack spacing={4} fontSize="14px" flexWrap="wrap">
              <Text color={labelColor}>
                今开：
                <Text as="span" color={valueColor} fontWeight="bold">
                  {formatPrice(data.todayOpen)}
                </Text>
              </Text>
              <Text color={borderColor}>|</Text>
              <Text color={labelColor}>
                昨收：
                <Text as="span" color={valueColor} fontWeight="bold">
                  {formatPrice(data.yesterdayClose)}
                </Text>
              </Text>
              <Text color={borderColor}>|</Text>
              <Text color={labelColor}>
                最高：
                <Text as="span" color={upColor} fontWeight="bold">
                  {formatPrice(data.todayHigh)}
                </Text>
              </Text>
              <Text color={borderColor}>|</Text>
              <Text color={labelColor}>
                最低：
                <Text as="span" color={downColor} fontWeight="bold">
                  {formatPrice(data.todayLow)}
                </Text>
              </Text>
            </HStack>
          </Box>

          {/* 中栏：关键指标 */}
          <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
            <Text
              fontSize="14px"
              fontWeight="bold"
              color={sectionTitleColor}
              mb={3}
            >
              关键指标
            </Text>
            <VStack align="stretch" spacing={2} fontSize="14px">
              <HStack justify="space-between">
                <Text color={labelColor}>市盈率(PE)：</Text>
                <Text color={valueColor} fontWeight="bold" fontSize="16px">
                  {data.pe.toFixed(2)}
                </Text>
              </HStack>
              <HStack justify="space-between">
                <Text color={labelColor}>市净率(PB)：</Text>
                <Text color={valueColor} fontWeight="bold" fontSize="16px">
                  {data.pb.toFixed(2)}
                </Text>
              </HStack>
              <HStack justify="space-between">
                <Text color={labelColor}>流通市值：</Text>
                <Text color={valueColor} fontWeight="bold" fontSize="16px">
                  {data.marketCap}
                </Text>
              </HStack>
              <HStack justify="space-between">
                <Text color={labelColor}>52周波动：</Text>
                <Text color={valueColor} fontWeight="bold" fontSize="16px">
                  {formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
                </Text>
              </HStack>
            </VStack>
          </Box>

          {/* 右栏：主力动态 */}
          <Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
            <Text
              fontSize="14px"
              fontWeight="bold"
              color={sectionTitleColor}
              mb={3}
            >
              主力动态
            </Text>
            <VStack align="stretch" spacing={2} fontSize="14px">
              <HStack justify="space-between">
                <Text color={labelColor}>主力净流入：</Text>
                <Text color={inflowColor} fontWeight="bold" fontSize="16px">
                  {formatNetInflow(data.mainNetInflow)}
                </Text>
              </HStack>
              <HStack justify="space-between">
                <Text color={labelColor}>机构持仓：</Text>
                <Text color={valueColor} fontWeight="bold" fontSize="16px">
                  {data.institutionHolding.toFixed(2)}%
                </Text>
              </HStack>
              {/* 买卖比例条 */}
              <Box mt={1}>
                <Progress
                  value={data.buyRatio}
                  size="sm"
                  sx={{
                    '& > div': { bg: upColor },
                  }}
                  bg={downColor}
                  borderRadius="full"
                />
                <HStack justify="space-between" mt={1} fontSize="14px">
                  <Text color={upColor}>买入{data.buyRatio}%</Text>
                  <Text color={downColor}>卖出{data.sellRatio}%</Text>
                </HStack>
              </Box>
            </VStack>
          </Box>
        </Flex>
      </CardBody>
    </Card>
  );
};

export default StockQuoteCard;