import React, { useState } from 'react';
import classNames from 'classnames';
import CountUp from 'react-countup';
import styles from './index.less';

export type StatusType = 'ideal' | 'standard' | 'warning' | 'emergency'  ;

// 状态颜色映射
export const STATUS_COLORS = {
  ideal: 'rgb(41, 215, 119)',
  standard: 'rgb(68, 127, 240)',
  warning: 'rgb(255, 162, 80)',
  emergency: 'rgb(255, 46, 46)',
};
// 状态颜色映射+不透明度
export const STATUS_COLORS_OPACITY = {
  ideal: 'rgba(41, 215, 119, 0.2)',
  standard: 'rgba(68, 127, 240, 0.2)',
  warning: 'rgba(255, 162, 80, 0.2)',
  emergency: 'rgba(255, 46, 46, 0.2)',
};

// 根据分数判断状态；可能期望展示--，使用>100的数字表示
export const getStatusByScore = (score: number ): StatusType => {
  if (score > 100) return 'ideal';  // 使用>100的数字，默认用理想状态的背景
  if (score > 95) return 'ideal';
  if (score > 85) return 'standard';
  if (score > 60) return 'warning';
  return 'emergency';
};

export interface DimensionCardProps {
  iconSrc: string;
  title: string;
  score: number ;
  iconStyle?: React.CSSProperties;
  active?: boolean;
  onClick?: () => void;
}

const DimensionCard: React.FC<DimensionCardProps> = ({
  iconSrc,
  title,
  score,
  iconStyle,
  active = false,
  onClick,
}) => {
  // 根据分数确定状态和颜色
  const status = getStatusByScore(score);
  const statusColor = STATUS_COLORS[status] ;
  const [isHovered, setIsHovered] = useState(false);
  
  // 背景渐变样式
  const gradientStyle = {    
    background: `linear-gradient(180deg, rgba(${statusColor.split('rgb(')[1].split(')')[0]}, ${isHovered ? '0.5' : '0.2'}), rgba(${statusColor.split('rgb(')[1].split(')')[0]}, ${isHovered ? '0.05' : '0.02'}) 100%)`,
  };

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <div 
      className={classNames(styles.cardContainer)}
      // className={classNames(styles.cardContainer, { [styles.active]: active })}
      onClick={onClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className={styles.background} style={gradientStyle}>
        <div className={styles.smallRectangle} style={gradientStyle}>
          <img 
            src={iconSrc} 
            alt={title}
            className={styles.icon}
            style={iconStyle}
          />
        </div>
        
        <div className={styles.content}>
          <div className={styles.title}>{title}</div>
          <div className={styles.score} style={{ color: statusColor }}>
            {(score > 100) ? '--' : (
              <CountUp 
                end={score} 
                decimals={2} 
                duration={1}
                preserveValue 
              />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default DimensionCard; 