// src/utils/colorUtils.js
// 颜色工具函数 - 根据涨跌幅动态计算颜色深浅

/**
 * 根据涨跌幅获取颜色（深浅动态变化）
 * @param {number} change - 涨跌幅百分比
 * @returns {string} Chakra UI 颜色值
 */
export const getChangeColor = (change) => {
  if (change === null || change === undefined || isNaN(change)) {
    return 'gray.500';
  }

  const absChange = Math.abs(change);

  if (change > 0) {
    // 涨：红色系，根据涨幅深浅
    if (absChange >= 9) return 'red.900';      // 涨停或接近涨停
    if (absChange >= 7) return 'red.800';
    if (absChange >= 5) return 'red.700';
    if (absChange >= 3) return 'red.600';
    if (absChange >= 2) return 'red.500';
    if (absChange >= 1) return 'red.400';
    return 'red.300';                           // 微涨
  } else if (change < 0) {
    // 跌：绿色系，根据跌幅深浅
    if (absChange >= 9) return 'green.900';    // 跌停或接近跌停
    if (absChange >= 7) return 'green.800';
    if (absChange >= 5) return 'green.700';
    if (absChange >= 3) return 'green.600';
    if (absChange >= 2) return 'green.500';
    if (absChange >= 1) return 'green.400';
    return 'green.300';                         // 微跌
  }

  return 'gray.500'; // 平盘
};

/**
 * 获取涨跌幅背景渐变色（用于精简模式卡片）
 * @param {number} change - 涨跌幅百分比
 * @param {boolean} useDark - 是否使用深色模式
 * @returns {string} Chakra UI bgGradient 值
 */
export const getChangeBackgroundGradient = (change, useDark = false) => {
  if (change === null || change === undefined || isNaN(change)) {
    return 'linear(to-br, gray.50, gray.100)';
  }

  const absChange = Math.abs(change);

  if (change > 0) {
    // 涨：红色渐变背景
    if (absChange >= 9) return 'linear(to-br, red.100, red.200)';
    if (absChange >= 7) return 'linear(to-br, red.50, red.150)';
    if (absChange >= 5) return 'linear(to-br, red.50, red.100)';
    if (absChange >= 3) return 'linear(to-br, red.50, red.100)';
    return 'linear(to-br, red.50, red.50)';
  } else if (change < 0) {
    // 跌：绿色渐变背景
    if (absChange >= 9) return 'linear(to-br, green.100, green.200)';
    if (absChange >= 7) return 'linear(to-br, green.50, green.150)';
    if (absChange >= 5) return 'linear(to-br, green.50, green.100)';
    if (absChange >= 3) return 'linear(to-br, green.50, green.100)';
    return 'linear(to-br, green.50, green.50)';
  }

  return 'linear(to-br, gray.50, gray.100)';
};

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

  const absChange = Math.abs(change);

  if (change > 0) {
    if (absChange >= 9) return 'red.700';
    if (absChange >= 7) return 'red.600';
    if (absChange >= 5) return 'red.500';
    if (absChange >= 3) return 'red.400';
    return 'red.300';
  } else if (change < 0) {
    if (absChange >= 9) return 'green.700';
    if (absChange >= 7) return 'green.600';
    if (absChange >= 5) return 'green.500';
    if (absChange >= 3) return 'green.400';
    return 'green.300';
  }

  return 'gray.300';
};