// src/components/StockChangeIndicators.js
// 股票涨跌幅指标组件（通用）

import React from 'react';
import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
import { TriangleUpIcon, TriangleDownIcon } from '@chakra-ui/icons';
import { getChangeColor } from '../utils/colorUtils';

/**
 * 股票涨跌幅指标组件（3个指标：平均超额、最大超额、超预期得分）
 * @param {Object} props
 * @param {number} props.avgChange - 平均超额涨幅
 * @param {number} props.maxChange - 最大超额涨幅
 * @param {number} props.expectationScore - 超预期得分（0-100）
 * @param {'default'|'comfortable'|'large'} props.size - 尺寸模式：default=紧凑，comfortable=舒适（事件列表），large=大卡片（详情面板）
 */
const StockChangeIndicators = ({
    avgChange,
    maxChange,
    expectationScore,
    size = 'default',
}) => {
    const isLarge = size === 'large';
    const isComfortable = size === 'comfortable';
    const isDefault = size === 'default';

    // 根据涨跌幅获取数字颜色（动态深浅）
    const getNumberColor = (value) => {
        if (value == null) {
            return useColorModeValue('gray.700', 'gray.400');
        }

        // 使用动态颜色函数
        return getChangeColor(value);
    };

    // 根据涨跌幅获取背景色（永远比文字色浅）
    const getBgColor = (value) => {
        if (value == null) {
            return useColorModeValue('gray.50', 'gray.800');
        }

        // 0值使用中性灰色背景
        if (value === 0) {
            return useColorModeValue('gray.50', 'gray.800');
        }

        // 统一背景色：上涨红色系，下跌绿色系
        return value > 0
            ? useColorModeValue('red.50', 'red.900')
            : useColorModeValue('green.50', 'green.900');
    };

    // 根据涨跌幅获取边框色（比背景深，比文字浅）
    const getBorderColor = (value) => {
        if (value == null) {
            return useColorModeValue('gray.200', 'gray.700');
        }

        // 0值使用中性灰色边框
        if (value === 0) {
            return useColorModeValue('gray.200', 'gray.700');
        }

        // 统一边框色：上涨红色系，下跌绿色系
        return value > 0
            ? useColorModeValue('red.200', 'red.700')
            : useColorModeValue('green.200', 'green.700');
    };

    // 渲染单个指标
    const renderIndicator = (label, value) => {
        if (value == null) return null;

        const sign = value > 0 ? '+' : '-';
        // 0值显示为 "0"，其他值显示两位小数
        const numStr = value === 0 ? '0' : Math.abs(value).toFixed(2);
        const numberColor = getNumberColor(value);
        const bgColor = getBgColor(value);
        const borderColor = getBorderColor(value);
        const labelColor = useColorModeValue('gray.600', 'gray.400');

        return (
            <Box
                bg={bgColor}
                borderWidth={isLarge ? "2px" : "1px"}
                borderColor={borderColor}
                borderRadius="md"
                px={isLarge ? 4 : (isDefault ? 1.5 : (isComfortable ? 3 : 2))}
                py={isLarge ? 3 : (isDefault ? 1.5 : (isComfortable ? 2 : 1))}
                display="flex"
                flexDirection={(isLarge || isDefault) ? "column" : "row"}
                alignItems={(isLarge || isDefault) ? "flex-start" : "center"}
                gap={(isLarge || isDefault) ? (isLarge ? 2 : 1) : 1}
                maxW={isLarge ? "200px" : "none"}
                flex="0 1 auto"
                minW="0"
            >
                {/* Large 和 Default 模式：标签单独一行 */}
                {(isLarge || isDefault) && (
                    <Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
                        {label}
                    </Text>
                )}

                {/* 数值 + 图标 */}
                <Flex align="center" gap={isLarge ? 2 : (isDefault ? 1 : 1)}>
                    {/* 三角形图标 */}
                    {value !== 0 && (
                        value > 0 ? (
                            <TriangleUpIcon
                                w={2}
                                h={2}
                                color={numberColor}
                            />
                        ) : (
                            <TriangleDownIcon
                                w={2}
                                h={2}
                                color={numberColor}
                            />
                        )
                    )}

                    {/* 数字 */}
                    <Text
                        fontSize={isLarge ? "2xl" : (isDefault ? "md" : "lg")}
                        fontWeight="bold"
                        color={numberColor}
                        lineHeight="1.2"
                        whiteSpace="nowrap"
                        overflow="hidden"
                        textOverflow="ellipsis"
                    >
                        {/* Comfortable 模式：标签和数字在同一行 */}
                        {!isLarge && !isDefault && (
                            <Text as="span" color={labelColor} fontWeight="medium" fontSize="sm">
                                {label}{' '}
                            </Text>
                        )}
                        {sign}{numStr}
                        <Text as="span" fontWeight="medium" fontSize="sm">%</Text>
                    </Text>
                </Flex>
            </Box>
        );
    };

    // 渲染超预期得分指标（特殊样式，分数而非百分比）
    const renderScoreIndicator = (label, score) => {
        if (score == null) return null;

        const labelColor = useColorModeValue('gray.600', 'gray.400');

        // 根据分数确定颜色：>=60红色，>=40橙色，>=20蓝色，其他灰色
        const getScoreColor = (s) => {
            if (s >= 60) return useColorModeValue('red.600', 'red.400');
            if (s >= 40) return useColorModeValue('orange.600', 'orange.400');
            if (s >= 20) return useColorModeValue('blue.600', 'blue.400');
            return useColorModeValue('gray.600', 'gray.400');
        };

        const getScoreBgColor = (s) => {
            if (s >= 60) return useColorModeValue('red.50', 'red.900');
            if (s >= 40) return useColorModeValue('orange.50', 'orange.900');
            if (s >= 20) return useColorModeValue('blue.50', 'blue.900');
            return useColorModeValue('gray.50', 'gray.800');
        };

        const getScoreBorderColor = (s) => {
            if (s >= 60) return useColorModeValue('red.200', 'red.700');
            if (s >= 40) return useColorModeValue('orange.200', 'orange.700');
            if (s >= 20) return useColorModeValue('blue.200', 'blue.700');
            return useColorModeValue('gray.200', 'gray.700');
        };

        const scoreColor = getScoreColor(score);
        const bgColor = getScoreBgColor(score);
        const borderColor = getScoreBorderColor(score);

        return (
            <Box
                bg={bgColor}
                borderWidth={isLarge ? "2px" : "1px"}
                borderColor={borderColor}
                borderRadius="md"
                px={isLarge ? 4 : (isDefault ? 1.5 : (isComfortable ? 3 : 2))}
                py={isLarge ? 3 : (isDefault ? 1.5 : (isComfortable ? 2 : 1))}
                display="flex"
                flexDirection={(isLarge || isDefault) ? "column" : "row"}
                alignItems={(isLarge || isDefault) ? "flex-start" : "center"}
                gap={(isLarge || isDefault) ? (isLarge ? 2 : 1) : 1}
                maxW={isLarge ? "200px" : "none"}
                flex="0 1 auto"
                minW={isDefault ? "58px" : "0"}
            >
                {/* Large 和 Default 模式：标签单独一行 */}
                {(isLarge || isDefault) && (
                    <Text fontSize={isLarge ? "sm" : "xs"} color={labelColor} fontWeight="medium">
                        {label}
                    </Text>
                )}

                {/* 数值 */}
                <Text
                    fontSize={isLarge ? "2xl" : (isDefault ? "md" : "lg")}
                    fontWeight="bold"
                    color={scoreColor}
                    lineHeight="1.2"
                    whiteSpace="nowrap"
                >
                    {/* Comfortable 模式：标签和数字在同一行 */}
                    {!isLarge && !isDefault && (
                        <Text as="span" color={labelColor} fontWeight="medium" fontSize="sm">
                            {label}
                        </Text>
                    )}
                    {Math.round(score)}
                    <Text as="span" fontWeight="medium" fontSize="sm">分</Text>
                </Text>
            </Box>
        );
    };

    // 如果没有任何数据，不渲染
    if (avgChange == null && maxChange == null && expectationScore == null) {
        return null;
    }

    return (
        <Flex width="100%" justify="flex-start" align="center" gap={isLarge ? 4 : (isDefault ? 2 : 1)}>
            {renderIndicator('平均超额', avgChange)}
            {renderIndicator('最大超额', maxChange)}
            {renderScoreIndicator('超预期', expectationScore)}
        </Flex>
    );
};

export default StockChangeIndicators;