import React from 'react';
import { motion } from 'framer-motion';

interface BarElementProps {
  className?: string;
  value: number;
  maxValue: number;
  type: 'asset-total' | 'asset-net' | 'profit-total' | 'profit-net' | 'income' | 'debt-ratio';
  label: string;
}

const BarElement: React.FC<BarElementProps> = ({
  className,
  value,
  maxValue,
  type,
  label
}) => {
  // 计算柱形高度比例 (0-100%)
  const heightPercentage = maxValue > 0 ? (value / maxValue) * 100 : 0;

  // 根据类型设置颜色
  const getBarColor = () => {
    switch (type) {
      case 'asset-total':
        return 'from-[#c2e6ff] to-[rgba(0,68,170,0.3)]';
      case 'asset-net':
        return 'from-[#ffd700] to-[rgba(255,215,0,0.3)]';
      case 'profit-total':
        return 'from-[#ff6b6b] to-[rgba(255,107,107,0.3)]';
      case 'profit-net':
        return 'from-[#4ecdc4] to-[rgba(78,205,196,0.3)]';
      case 'income':
        return 'from-[#45b7d1] to-[rgba(69,183,209,0.3)]';
      case 'debt-ratio':
        return 'from-[#96ceb4] to-[rgba(150,206,180,0.3)]';
      default:
        return 'from-[#c2e6ff] to-[rgba(0,68,170,0.3)]';
    }
  };

  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: 0.1 }}
    >
      {/* 柱形图主体 */}
      <div className="flex flex-col items-center h-48">
        {/* 柱形图 */}
        <motion.div
          className={`w-12 bg-gradient-to-b ${getBarColor()} rounded-t-lg`}
          style={{ height: `${Math.max(heightPercentage, 10)}%` }}
          initial={{ height: '10%' }}
          animate={{ height: `${Math.max(heightPercentage, 10)}%` }}
          transition={{
            duration: 1.2,
            ease: "easeOut",
            delay: 0.3
          }}
        />

        {/* 标签 */}
        <motion.div
          className="mt-2 text-white text-sm font-medium"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.8 }}
        >
          {label}
        </motion.div>

        {/* 数值显示 */}
        <motion.div
          className="mt-1 text-white/70 text-xs"
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.4, delay: 1.0 }}
        >
          {type === 'debt-ratio' ? `${value.toFixed(1)}%` :
           value >= 100000000 ? `${(value / 100000000).toFixed(1)}亿` :
           value >= 10000 ? `${(value / 10000).toFixed(1)}万` :
           value.toLocaleString()}
        </motion.div>
      </div>
    </motion.div>
  );
};

export default BarElement;