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

interface ProfitMetricsProps {
  className?: string;
}

const profitData = [
  { year: '2021年', profitTotal: -1.5, profitNet: -1.7 },
  { year: '2022年', profitTotal: 0.8, profitNet: 0.59 },
  { year: '2023年', profitTotal: 1.28, profitNet: 0.6 },
  { year: '2024年', profitTotal: 1.65, profitNet: 1.22 },
  { year: '2025年', profitTotal: 1.34, profitNet: 1.00 }
];

const maxPositiveValue = Math.max(...profitData.map(d => Math.max(d.profitTotal, d.profitNet)));
const minNegativeValue = Math.min(...profitData.map(d => Math.min(d.profitTotal, d.profitNet)));

const calculateHeight = (value: number) => {
  const maxHeight = 100; // 最大柱形高度
  if (value >= 0) {
    return (value / maxPositiveValue) * maxHeight;
  } else {
    return (Math.abs(value) / Math.abs(minNegativeValue)) * maxHeight;
  }
};

export function ProfitMetrics({ className }: ProfitMetricsProps) {
  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="profit-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="profit-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">
              {profitData.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]">
            {profitData.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.profitTotal}
                  </p>
                  <div className="flex items-center justify-center relative shrink-0">
                    <div className="flex-none rotate-[180deg]">
                      <BarElement
                        variant="profit-total"
                        className={`w-[35px]`}
                        style={{ height: `${calculateHeight(data.profitTotal)}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.profitNet}
                  </p>
                  <div className="flex items-center justify-center relative shrink-0">
                    <div className="flex-none rotate-[180deg]">
                      <BarElement
                        variant="profit-net"
                        className={`w-[35px] rounded-[2px]`}
                        style={{ height: `${calculateHeight(data.profitNet)}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>
  );
}