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

interface AssetMetricsProps {
  className?: string;
}

const assetData = [
  { year: '2021年', assetTotal: 200.46, assetNet: 55.40 },
  { year: '2022年', assetTotal: 243.27, assetNet: 57.49 },
  { year: '2023年', assetTotal: 509.08, assetNet: 247.29 },
  { year: '2024年', assetTotal: 772.66, assetNet: 407.68 },
  { year: '2025年', assetTotal: 840.12, assetNet: 421.55 }
];

// Recharts格式的数据
const chartData = assetData.map(item => ({
  year: item.year,
  '资产总额': item.assetTotal,
  '资产净额': item.assetNet
}));

// 自定义 3D 柱状图组件 - 资产总额（高版本）
const AssetTotalBar = (props: any) => {
  const { x, y, width, height } = props;

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

  return (
    <g transform={`translate(${x},${y}) scale(${scaleX},${scaleY})`}>
      <path d="M35.25 222H0.25L0.25 3L35.25 3L35.25 222Z" fill="url(#paint0_linear_1977_58501)"/>
      <path d="M35.25 222H0.25L0.25 3L35.25 3L35.25 222Z" fill="url(#paint1_linear_1977_58501)" fillOpacity="0.6"/>
      <ellipse cx="17.75" cy="221.5" rx="17.5" ry="2.5" fill="url(#paint2_linear_1977_58501)"/>
      <ellipse cx="17.75" cy="221.5" rx="17.5" ry="2.5" fill="url(#paint3_linear_1977_58501)" fillOpacity="0.6"/>
      <path d="M35.25 221.5C35.25 222.881 27.415 224 17.75 224C8.08502 224 0.25 222.881 0.25 221.5" stroke="url(#paint4_linear_1977_58501)" strokeWidth="0.5"/>
      <ellipse cx="17.75" cy="2.5" rx="17.5" ry="2.5" fill="url(#paint5_linear_1977_58501)"/>
      <path d="M35.25 2.5C35.25 3.88071 27.415 5 17.75 5C8.08502 5 0.25 3.88071 0.25 2.5" stroke="url(#paint6_linear_1977_58501)" strokeWidth="0.5"/>
      <defs>
        <linearGradient id="paint0_linear_1977_58501" x1="17.7421" y1="220.876" x2="17.7421" y2="3.00582" gradientUnits="userSpaceOnUse">
          <stop stopColor="#4DBBBA" stopOpacity="0"/>
          <stop offset="1" stopColor="#4DBBBA" stopOpacity="0.5"/>
        </linearGradient>
        <linearGradient id="paint1_linear_1977_58501" x1="0.25" y1="112.5" x2="35.25" y2="112.5" gradientUnits="userSpaceOnUse">
          <stop offset="0.125" stopColor="#4DBBBA"/>
          <stop offset="0.497375" stopColor="#9FFFFE"/>
          <stop offset="0.911458" stopColor="#4DBBBA"/>
        </linearGradient>
        <linearGradient id="paint2_linear_1977_58501" x1="17.7528" y1="223.997" x2="17.7528" y2="219" gradientUnits="userSpaceOnUse">
          <stop stopColor="#4DBBBA"/>
          <stop offset="1" stopColor="#0F918F"/>
        </linearGradient>
        <linearGradient id="paint3_linear_1977_58501" x1="0.25" y1="221.5" x2="35.25" y2="221.5" gradientUnits="userSpaceOnUse">
          <stop offset="0.125" stopColor="#4DBBBA"/>
          <stop offset="0.497375" stopColor="#9FFFFE"/>
          <stop offset="0.911458" stopColor="#4DBBBA"/>
        </linearGradient>
        <linearGradient id="paint4_linear_1977_58501" x1="17.75" y1="221.5" x2="17.75" y2="224" gradientUnits="userSpaceOnUse">
          <stop stopColor="white" stopOpacity="0"/>
          <stop offset="1" stopColor="white"/>
        </linearGradient>
        <linearGradient id="paint5_linear_1977_58501" x1="17.7528" y1="4.99708" x2="17.7528" y2="0" gradientUnits="userSpaceOnUse">
          <stop stopColor="#4DBBBA"/>
          <stop offset="1" stopColor="#0F918F"/>
        </linearGradient>
        <linearGradient id="paint6_linear_1977_58501" x1="17.75" y1="2.5" x2="17.75" y2="5" gradientUnits="userSpaceOnUse">
          <stop stopColor="white" stopOpacity="0"/>
          <stop offset="1" stopColor="white"/>
        </linearGradient>
      </defs>
    </g>
  );
};

// 自定义 3D 柱状图组件 - 资产净额（高版本）
const AssetNetBar = (props: any) => {
  const { x, y, width, height } = props;

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

  return (
    <g transform={`translate(${x},${y}) scale(${scaleX},${scaleY})`}>
      <rect width="35" height="132" transform="translate(0.25 3)" fill="url(#paint0_linear_1977_58512)"/>
      <path d="M35.25 7L0.25 7L0.25 3L35.25 3V7Z" fill="url(#paint1_linear_1977_58512)"/>
      <path d="M35.25 7L0.25 7L0.25 3L35.25 3V7Z" fill="url(#paint2_linear_1977_58512)" fillOpacity="0.8"/>
      <ellipse cx="17.75" cy="6.5" rx="17.5" ry="2.5" fill="url(#paint3_linear_1977_58512)"/>
      <ellipse cx="17.75" cy="6.5" rx="17.5" ry="2.5" fill="url(#paint4_linear_1977_58512)" fillOpacity="0.6"/>
      <path d="M35.25 6.5C35.25 7.88071 27.415 9 17.75 9C8.08502 9 0.25 7.88071 0.25 6.5" stroke="url(#paint5_linear_1977_58512)" strokeWidth="0.5"/>
      <ellipse cx="17.75" cy="2.5" rx="17.5" ry="2.5" fill="url(#paint6_linear_1977_58512)"/>
      <path d="M35.25 2.5C35.25 3.88071 27.415 5 17.75 5C8.08502 5 0.25 3.88071 0.25 2.5" stroke="url(#paint7_linear_1977_58512)" strokeWidth="0.5"/>
      <defs>
        <linearGradient id="paint0_linear_1977_58512" x1="17.5" y1="0" x2="17.5" y2="132" gradientUnits="userSpaceOnUse">
          <stop stopColor="#EDCE59" stopOpacity="0.807843"/>
          <stop offset="1" stopColor="#EDCE59" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="paint1_linear_1977_58512" x1="17.7421" y1="6.97946" x2="17.7421" y2="3.00011" gradientUnits="userSpaceOnUse">
          <stop offset="0.177083" stopColor="#EDCE59" stopOpacity="0"/>
          <stop offset="1" stopColor="#EDCE59" stopOpacity="0.6"/>
        </linearGradient>
        <linearGradient id="paint2_linear_1977_58512" x1="0.25" y1="5" x2="35.25" y2="5.00003" gradientUnits="userSpaceOnUse">
          <stop offset="0.1875" stopColor="#EDCE59"/>
          <stop offset="0.497375" stopColor="white"/>
          <stop offset="0.875" stopColor="#EDCE59"/>
        </linearGradient>
        <linearGradient id="paint3_linear_1977_58512" x1="17.7528" y1="8.99708" x2="17.7528" y2="4" gradientUnits="userSpaceOnUse">
          <stop stopColor="#EDCE59"/>
          <stop offset="1" stopColor="#B4910E"/>
        </linearGradient>
        <linearGradient id="paint4_linear_1977_58512" x1="0.25" y1="6.5" x2="35.25" y2="6.50002" gradientUnits="userSpaceOnUse">
          <stop offset="0.1875" stopColor="#EDCE59"/>
          <stop offset="0.497375" stopColor="#FFF3C5"/>
          <stop offset="0.875" stopColor="#EDCE59"/>
        </linearGradient>
        <linearGradient id="paint5_linear_1977_58512" x1="17.75" y1="6.5" x2="17.75" y2="9" gradientUnits="userSpaceOnUse">
          <stop stopColor="#EDCE59" stopOpacity="0"/>
          <stop offset="1" stopColor="white"/>
        </linearGradient>
        <linearGradient id="paint6_linear_1977_58512" x1="17.7528" y1="4.99708" x2="17.7528" y2="0" gradientUnits="userSpaceOnUse">
          <stop stopColor="#EDCE59"/>
          <stop offset="1" stopColor="#B4910E" stopOpacity="0.807843"/>
        </linearGradient>
        <linearGradient id="paint7_linear_1977_58512" x1="17.75" y1="2.5" x2="17.75" y2="5" gradientUnits="userSpaceOnUse">
          <stop stopColor="#EDCE59" stopOpacity="0"/>
          <stop offset="1" stopColor="white"/>
        </linearGradient>
      </defs>
    </g>
  );
};

export function AssetMetrics({ className }: AssetMetricsProps) {
  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]" />

      {/* 表格区域 - 使用Recharts实现 */}
      <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="asset-total" 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 className="content-stretch flex gap-[20px] 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="asset-net" className="h-[10.769px] w-[14px] rounded-[2px]" />
                  </div>
                </div>
                <div className="flex flex-col h-[26px] justify-center leading-[0] relative shrink-0 text-[18px] text-white w-[80px]">
                  <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={<AssetTotalBar />}
                  barSize={35}
                />
                <Bar
                  dataKey="资产净额"
                  shape={<AssetNetBar />}
                  barSize={35}
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

      {/* 模块标题 */}
      <ModuleHeaderBackground className="absolute h-[38px] left-0 top-0 w-[594.001px]" />
      <ModuleHeader className="absolute h-[38px] left-0 overflow-clip top-0 w-[594px]" title="资产负债率" />
    </div>
  );
}