import BarElement from './BarElement';
import BaseContainer from './BaseContainer';
import ModuleHeader from './ModuleHeader';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

interface DebtRatioMetricsProps {
  className?: string;
}

const debtRatioData = [
  { year: '2021年', ratio: 73.37 },
  { year: '2022年', ratio: 76.37 },
  { year: '2023年', ratio: 51.42 },
  { year: '2024年', ratio: 47.24 },
  { year: '2025年', ratio: 49.82 }
];

// Recharts格式的数据 - 包含三个数据系列
const chartData = debtRatioData.map(item => ({
  year: item.year,
  '资产负债率': item.ratio, // 绿色柱子，实际负债率
  '分隔线': 2, // 白色分隔线，固定高度2%
  '剩余部分': 98 - item.ratio // 蓝色柱子，剩余部分（减去分隔线高度）
}));


export function DebtRatioMetrics({ className }: DebtRatioMetricsProps) {
  return (
    <div className={`h-[480px] overflow-clip relative shrink-0 w-full ${className || ''}`}>
      {/* 底部容器 - 使用BaseContainer作为背景 */}
      <BaseContainer className="absolute h-[490px] left-0 overflow-clip top-0 w-[930px]" />
        {/* 表格区域 */}
        <div className="absolute content-stretch flex flex-col gap-[20px] h-[388px] items-start left-[41.4px] top-[79px] w-[847.191px]">
          {/* 顶部标题和说明 */}
          <div className="content-stretch flex items-start justify-between relative shrink-0 w-[847px]">
            <div className="content-stretch flex gap-[20px] items-center relative shrink-0 w-[93px]">
              <div className="content-stretch flex gap-[10px] h-[26px] items-center relative shrink-0">
                <div className="flex items-center justify-center relative shrink-0">
                  <div className="flex-none rotate-[180deg]">
                    <BarElement variant="debt-ratio" className="size-[14px]" />
                  </div>
                </div>
                <div className="flex flex-col justify-center leading-[0] relative shrink-0 text-[18px] text-white w-[83px]">
                  <p className="leading-[25.2px] whitespace-nowrap">资产负债率</p>
                </div>
              </div>
            </div>
            <p className="leading-[25.2px] relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)]">
              *数据截止至2025年9月
            </p>
          </div>

          <p className="leading-[25.2px] relative shrink-0 text-[14px] text-[rgba(255,255,255,0.8)]">
            单位：%
          </p>

          {/* Recharts图表区域 */}
          <div className="w-full h-[300px] mt-4">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={chartData}
                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid
                  strokeDasharray="3 3"
                  stroke="rgba(255,255,255,0.1)"
                  horizontal={true}
                  vertical={false}
                />
                <XAxis
                  dataKey="year"
                  axisLine={false}
                  tickLine={false}
                  tick={{ fill: 'rgba(255,255,255,0.8)', fontSize: 14 }}
                />
                <YAxis
                  axisLine={false}
                  tickLine={false}
                  tick={{ fill: 'rgba(255,255,255,0.8)', fontSize: 12 }}
                  domain={[0, 100]}
                />
                <Tooltip
                  contentStyle={{
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    border: '1px solid rgba(255,255,255,0.2)',
                    color: 'white'
                  }}
                  formatter={(value, name) => {
                    // 只显示资产负债率的tooltip，不显示剩余部分和分隔线
                    if (name === '资产负债率') {
                      return [`${value} %`, '资产负债率'];
                    }
                    return null;
                  }}
                />
                <Bar
                  dataKey="资产负债率"
                  fill="#46BDBD"
                  barSize={60}
                  stackId="debtRatio"
                />
                <Bar
                  dataKey="分隔线"
                  fill="white"
                  barSize={60}
                  stackId="debtRatio"
                />
                <Bar
                  dataKey="剩余部分"
                  fill="#297AD8"
                  barSize={60}
                  stackId="debtRatio"
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

      {/* 模块标题 */}
      <ModuleHeader className="absolute h-[38px] left-[calc(50%+-0.25px)] overflow-clip top-0 translate-x-[-50%] w-[594px]" title="资产负债率" />
    </div>
  );
}