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
}));

// 自定义 3D 柱状图组件 - 资产负债率
const DebtRatioBar = (props: any) => {
  const { x, y, width, height } = props;

  // 将Recharts的坐标系转换为SVG的坐标系
  const svgWidth = 96;
  const svgHeight = 240;
  const scaleX = width / svgWidth;
  const scaleY = height / svgHeight;

  return (
    <g transform={`translate(${x},${y}) scale(${scaleX},${scaleY})`}>
      <rect width="90" height="240" transform="translate(3)" fill="#297AD8"/>
      <rect width="90" height="175" transform="translate(3 65)" fill="#46BDBD"/>
      <rect x="3.25" y="65.25" width="89.5" height="1.5" stroke="white" strokeWidth="0.5"/>
      <g filter="url(#filter0_d_1977_59052)">
        <rect x="3" y="65" width="90" height="2" fill="white"/>
        <rect x="2.5" y="64.5" width="91" height="3" stroke="white"/>
      </g>
      <defs>
        <filter id="filter0_d_1977_59052" x="0" y="62" width="96" height="8" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
          <feFlood floodOpacity="0" result="BackgroundImageFix"/>
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
          <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_1977_59052"/>
          <feOffset/>
          <feGaussianBlur stdDeviation="0.5"/>
          <feComposite in2="hardAlpha" operator="out"/>
          <feColorMatrix type="matrix" values="0 0 0 0 0.116736 0 0 0 0 0.144867 0 0 0 0 0.170833 0 0 0 0.2 0"/>
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1977_59052"/>
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1977_59052" result="shape"/>
        </filter>
      </defs>
    </g>
  );
};

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-pre-wrap">资产负债率</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 }}
                />
                <Tooltip
                  contentStyle={{
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    border: '1px solid rgba(255,255,255,0.2)',
                    color: 'white'
                  }}
                  formatter={(value) => [`${value} %`, '']}
                />
                <Bar
                  dataKey="资产负债率"
                  shape={<DebtRatioBar />}
                  barSize={35}
                />
              </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>
  );
}