import BarElement from './BarElement';
import BaseContainer from './BaseContainer';

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

const maxValue = Math.max(...assetData.map(d => Math.max(d.assetTotal, d.assetNet)));

const calculateHeight = (value: number) => {
  const maxHeight = 224; // 最大柱形高度
  return (value / maxValue) * maxHeight;
};

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]" />

      {/* 表格区域 */}
      <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">
              <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>

          {/* 年份标签 */}
          <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid justify-items-start leading-[0] relative shrink-0">
            <div className="col-[1] grid-cols-[max-content] grid-rows-[max-content] inline-grid justify-items-start leading-[21.504px] ml-[93px] mt-[calc(50%+125.72px)] relative row-[1] text-[15px] text-[rgba(255,255,255,0.8)] whitespace-pre-wrap">
              {assetData.map((data, index) => (
                <p
                  key={data.year}
                  className={`col-[1] mt-0 relative row-[1] ${
                    index === 0 ? 'ml-0 w-[49.92px]' :
                    index === 1 ? 'ml-[207.76px] text-right translate-x-[-100%] w-[53.76px]' :
                    index === 2 ? 'ml-[376.68px] text-right translate-x-[-100%] w-[55.68px]' :
                    index === 3 ? 'ml-[490px] w-[52.48px]' :
                    'ml-[656px] mt-px w-[58px]'
                  }`}
                >
                  {data.year}
                </p>
              ))}
            </div>
          </div>

          {/* 柱形图数据 */}
          <div className="box-border col-[1] content-stretch flex items-end justify-between ml-[69px] mt-[3.44px] relative row-[1] w-[753px]">
            {assetData.map((data) => (
              <div key={data.year} className="content-stretch flex gap-[10px] items-end relative shrink-0">
                {/* 资产总额 */}
                <div className="content-stretch flex flex-col gap-[10px] items-center relative shrink-0 w-[43px]">
                  <p className="leading-[21.504px] min-w-full not-italic relative shrink-0 text-[13px] text-white w-[min-content] whitespace-pre-wrap">
                    {data.assetTotal}
                  </p>
                  <div className="flex items-center justify-center relative shrink-0">
                    <div className="flex-none rotate-[180deg]">
                      <BarElement
                        variant="asset-total"
                        className={`w-[35px]`}
                        style={{ height: `${calculateHeight(data.assetTotal)}px` }}
                      />
                    </div>
                  </div>
                </div>

                {/* 资产净额 */}
                <div className="content-stretch flex flex-col gap-[10px] items-center relative shrink-0 w-[35px]">
                  <p className="leading-[21.504px] min-w-full not-italic relative shrink-0 text-[13px] text-white w-[min-content] whitespace-pre-wrap">
                    {data.assetNet}
                  </p>
                  <div className="flex items-center justify-center relative shrink-0">
                    <div className="flex-none rotate-[180deg]">
                      <BarElement
                        variant="asset-net"
                        className={`w-[35px] rounded-[2px]`}
                        style={{ height: `${calculateHeight(data.assetNet)}px` }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

      {/* 模块标题 */}
      <div className="absolute top-4 left-4">
        <p className="text-[20px] font-medium text-white">资产负债率</p>
      </div>
    </div>
  );
}