// src/utils/priceFormatters.js
// 价格相关的工具函数 - 中国A股配色：红涨绿跌

import React from 'react';
import { TriangleUpIcon, TriangleDownIcon } from '@chakra-ui/icons';

/**
 * 获取价格变化的文字颜色
 * @param {number|null|undefined} value - 涨跌幅百分比
 * @returns {string} Chakra UI 颜色值
 */
export const getPriceChangeColor = (value) => {
    if (value === null || value === undefined) return 'gray.500';

    const absValue = Math.abs(value);

    if (value > 0) {
        // 上涨用红色，根据涨幅大小使用不同深浅
        if (absValue >= 3) return 'red.600';      // 深红色：3%以上
        if (absValue >= 1) return 'red.500';      // 中红色：1-3%
        return 'red.400';                         // 浅红色：0-1%
    } else if (value < 0) {
        // 下跌用绿色，根据跌幅大小使用不同深浅
        if (absValue >= 3) return 'green.600';    // 深绿色：3%以上
        if (absValue >= 1) return 'green.500';    // 中绿色：1-3%
        return 'green.400';                       // 浅绿色：0-1%
    }
    return 'gray.500';
};

/**
 * 获取价格变化的背景颜色
 * @param {number|null|undefined} value - 涨跌幅百分比
 * @returns {string} Chakra UI 颜色值
 */
export const getPriceChangeBg = (value) => {
    if (value === null || value === undefined) return 'gray.50';

    const absValue = Math.abs(value);

    if (value > 0) {
        // 上涨背景色
        if (absValue >= 3) return 'red.100';      // 深色背景：3%以上
        if (absValue >= 1) return 'red.50';       // 中色背景：1-3%
        return 'red.50';                          // 浅色背景：0-1%
    } else if (value < 0) {
        // 下跌背景色
        if (absValue >= 3) return 'green.100';    // 深色背景：3%以上
        if (absValue >= 1) return 'green.50';     // 中色背景：1-3%
        return 'green.50';                        // 浅色背景：0-1%
    }
    return 'gray.50';
};

/**
 * 获取价格变化的边框颜色
 * @param {number|null|undefined} value - 涨跌幅百分比
 * @returns {string} Chakra UI 颜色值
 */
export const getPriceChangeBorderColor = (value) => {
    if (value === null || value === undefined) return 'gray.300';

    const absValue = Math.abs(value);

    if (value > 0) {
        // 上涨边框色
        if (absValue >= 3) return 'red.500';      // 深边框：3%以上
        if (absValue >= 1) return 'red.400';      // 中边框：1-3%
        return 'red.300';                         // 浅边框：0-1%
    } else if (value < 0) {
        // 下跌边框色
        if (absValue >= 3) return 'green.500';    // 深边框：3%以上
        if (absValue >= 1) return 'green.400';    // 中边框：1-3%
        return 'green.300';                       // 浅边框：0-1%
    }
    return 'gray.300';
};

/**
 * 格式化价格变化为字符串
 * @param {number|null|undefined} value - 涨跌幅百分比
 * @param {number} decimals - 小数位数，默认2位
 * @returns {string} 格式化后的字符串，例如 "+5.23%" 或 "-2.10%"
 */
export const formatPriceChange = (value, decimals = 2) => {
    if (value === null || value === undefined) return '--%';

    const sign = value > 0 ? '+' : '';
    return `${sign}${value.toFixed(decimals)}%`;
};

/**
 * 价格涨跌箭头组件
 * @param {Object} props
 * @param {number|null|undefined} props.value - 涨跌幅百分比
 * @returns {JSX.Element|null}
 */
export const PriceArrow = ({ value }) => {
    if (value === null || value === undefined) return null;

    const Icon = value > 0 ? TriangleUpIcon : TriangleDownIcon;
    const color = value > 0 ? 'red.500' : 'green.500';

    return <Icon color={color} boxSize="16px" />;
};