import React from 'react';
import { motion } from 'framer-motion';
import BarElement from './BarElement';
import DataLabel from './DataLabel';

interface FinancialDataItem {
  id: number;
  year: number;
  assetLiabilityRatio?: number; // 资产负债率（单位：%）
  dataDeadline: string;
  createTime: string;
  updateTime: string;
}

interface DebtRatioMetricsProps {
  data?: FinancialDataItem[];
}

const DebtRatioMetrics: React.FC<DebtRatioMetricsProps> = ({ data }) => {
  // 从数组数据中提取2023和2024年的数据
  const data2023 = data?.find(item => item.year === 2023);
  const data2024 = data?.find(item => item.year === 2024);

  // 计算最大值用于图表比例
  const maxValue = data ? Math.max(
    data2023?.assetLiabilityRatio || 0,
    data2024?.assetLiabilityRatio || 0
  ) : 0;

  return (
    <motion.div
      className="h-full flex flex-col"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.6, delay: 0.3 }}
    >
      {/* 模块标题 */}
      <motion.div
        className="text-center mb-4"
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.4 }}
      >
        <h3 className="text-xl font-bold text-white">资产负债率（百分比）</h3>
        <p className="text-sm text-white/70">资产负债率对比</p>
      </motion.div>

      {/* 数据图表区域 */}
      <div className="flex-1 flex items-end justify-center space-x-8">
        {data ? (
          <>
            {/* 2023年数据 */}
            <motion.div
              className="flex flex-col items-center"
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.5 }}
            >
              <BarElement
                value={data2023?.assetLiabilityRatio || 0}
                maxValue={maxValue}
                type="debt-ratio"
                label="2023"
              />
              <DataLabel
                value={data2023?.assetLiabilityRatio || 0}
                label="资产负债率"
                unit="%"
                className="mt-4"
              />
            </motion.div>

            {/* 2024年数据 */}
            <motion.div
              className="flex flex-col items-center"
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.7 }}
            >
              <BarElement
                value={data2024?.assetLiabilityRatio || 0}
                maxValue={maxValue}
                type="debt-ratio"
                label="2024"
              />
              <DataLabel
                value={data2024?.assetLiabilityRatio || 0}
                label="资产负债率"
                unit="%"
                className="mt-4"
              />
            </motion.div>
          </>
        ) : (
          <motion.div
            className="text-white/50 text-center"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
          >
            数据加载中...
          </motion.div>
        )}
      </div>

      {/* 图例说明 */}
      <motion.div
        className="flex justify-center space-x-6 mt-4 text-xs text-white/60"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.9 }}
      >
        <div className="flex items-center">
          <div className="w-3 h-3 bg-blue-500 rounded mr-1" />
          <span>2023年负债率</span>
        </div>
        <div className="flex items-center">
          <div className="w-3 h-3 bg-blue-700 rounded mr-1" />
          <span>2024年负债率</span>
        </div>
      </motion.div>
    </motion.div>
  );
};

export default DebtRatioMetrics;