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

// Recharts格式的数据
const chartData = profitData.map(item => ({
  year: item.year,
  '利润总额': item.profitTotal,
  '净利润': item.profitNet
}));

// 自定义 3D 柱状图组件 - 利润总额
const ProfitTotalBar = (props: any) => {
  const { x, y, width, height } = props;

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

  return (
    <g transform={`translate(${x},${y}) scale(${scaleX},${scaleY})`}>
      <path d="M24.5 163H0L0 3L24.5 3L24.5 163Z" fill="url(#paint0_linear_1977_58918)"/>
      <rect x="24.5" y="3" width="1" height="160" fill="url(#paint1_linear_1977_58918)"/>
      <path d="M50 163H25.5L25.5 3L50 3L50 163Z" fill="url(#paint2_linear_1977_58918)"/>
      <path d="M0 162.998L25 165L50 162.998L25 160.667L0 162.998Z" fill="url(#paint3_linear_1977_58918)" fillOpacity="0.6"/>
      <path d="M24.5 159.5H25.5V164.5H24.5V159.5Z" fill="url(#paint4_linear_1977_58918)"/>
      <path d="M25 0L0 2.99636L25 6L50 2.99636L25 0Z" fill="url(#paint5_linear_1977_58918)"/>
      <path d="M0 3C4.26855 3.36748 8.47493 3.78174 12.6813 4.20267C14.7949 4.40312 16.867 4.63697 18.9598 4.85746L25.2383 5.52561H24.7617L31.0402 4.85746C33.133 4.63697 35.2051 4.40312 37.3187 4.20267C41.5251 3.78174 45.7315 3.36748 50 3C45.9387 3.54788 41.8152 4.049 37.6917 4.54343C35.6403 4.79733 33.5475 5.0245 31.4753 5.25835L25.2383 5.96659L24.9896 6L24.7617 5.97327L18.5247 5.26503C16.4525 5.0245 14.3597 4.80401 12.3083 4.54343C8.18483 4.049 4.06133 3.54788 0 3Z" fill="url(#paint6_linear_1977_58918)"/>
      <defs>
        <linearGradient id="paint0_linear_1977_58918" x1="12.2445" y1="162.179" x2="12.2445" y2="3.00425" gradientUnits="userSpaceOnUse">
          <stop stopColor="#0058FF" stopOpacity="0.2"/>
          <stop offset="1" stopColor="#0093DD"/>
        </linearGradient>
        <linearGradient id="paint1_linear_1977_58918" x1="25" y1="3" x2="25" y2="163" gradientUnits="userSpaceOnUse">
          <stop stopColor="#C2E6FF"/>
          <stop offset="1" stopColor="#0044AA" stopOpacity="0.3"/>
        </linearGradient>
        <linearGradient id="paint2_linear_1977_58918" x1="37.7445" y1="165.002" x2="37.7445" y2="1.63682" gradientUnits="userSpaceOnUse">
          <stop offset="0.00462963" stopColor="#0138DE" stopOpacity="0.2"/>
          <stop offset="1" stopColor="#006BBC"/>
        </linearGradient>
        <linearGradient id="paint3_linear_1977_58918" x1="25" y1="160.667" x2="25" y2="165" gradientUnits="userSpaceOnUse">
          <stop stopColor="#0A316C"/>
          <stop offset="1" stopColor="#1B659B"/>
        </linearGradient>
        <linearGradient id="paint4_linear_1977_58918" x1="25.5" y1="159.885" x2="25.5" y2="164.885" gradientUnits="userSpaceOnUse">
          <stop stopColor="#1F3453"/>
          <stop offset="1" stopColor="#40558D" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="paint5_linear_1977_58918" x1="25.0039" y1="5.9965" x2="25.0039" y2="0" gradientUnits="userSpaceOnUse">
          <stop stopColor="#81E4FF"/>
          <stop offset="1" stopColor="#0072DD"/>
        </linearGradient>
        <linearGradient id="paint6_linear_1977_58918" x1="24.9936" y1="5.99719" x2="24.9936" y2="2.5" gradientUnits="userSpaceOnUse">
          <stop stopColor="white"/>
          <stop offset="1" stopColor="white" stopOpacity="0.3"/>
        </linearGradient>
      </defs>
    </g>
  );
};

// 自定义 3D 柱状图组件 - 净利润
const ProfitNetBar = (props: any) => {
  const { x, y, width, height } = props;

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

  return (
    <g transform={`translate(${x},${y}) scale(${scaleX},${scaleY})`}>
      <path d="M24.5 132H0L0 3L24.5 3L24.5 132Z" fill="url(#paint0_linear_1977_58932)"/>
      <rect x="24.5" y="3" width="1" height="129" fill="url(#paint1_linear_1977_58932)"/>
      <path d="M50 132H25.5L25.5 3L50 3V132Z" fill="url(#paint2_linear_1977_58932)"/>
      <path d="M0 131.998L25 134L50 131.998L25 129.667L0 131.998Z" fill="url(#paint3_linear_1977_58932)" fillOpacity="0.6"/>
      <path d="M24.5 128.5H25.5V133.5H24.5V128.5Z" fill="url(#paint4_linear_1977_58932)"/>
      <path d="M25 0L0 2.99636L25 6L50 2.99636L25 0Z" fill="url(#paint5_linear_1977_58932)"/>
      <path d="M0 3C4.26855 3.36748 8.47493 3.78174 12.6813 4.20267C14.7949 4.40312 16.867 4.63697 18.9598 4.85746L25.2383 5.52561H24.7617L31.0402 4.85746C33.133 4.63697 35.2051 4.40312 37.3187 4.20267C41.5251 3.78174 45.7315 3.36748 50 3C45.9387 3.54788 41.8152 4.049 37.6917 4.54343C35.6403 4.79733 33.5475 5.0245 31.4753 5.25835L25.2383 5.96659L24.9896 6L24.7617 5.97327L18.5247 5.26503C16.4525 5.0245 14.3597 4.80401 12.3083 4.54343C8.18483 4.049 4.06133 3.54788 0 3Z" fill="url(#paint6_linear_1977_58932)"/>
      <defs>
        <linearGradient id="paint0_linear_1977_58932" x1="12.2445" y1="131.719" x2="12.2445" y2="3.00436" gradientUnits="userSpaceOnUse">
          <stop stopColor="#907EFF" stopOpacity="0.2"/>
          <stop offset="1" stopColor="#7B65FF"/>
        </linearGradient>
        <linearGradient id="paint1_linear_1977_58932" x1="25" y1="3" x2="25" y2="132" gradientUnits="userSpaceOnUse">
          <stop stopColor="#DCCFFF"/>
          <stop offset="1" stopColor="#7E52FA" stopOpacity="0.3"/>
        </linearGradient>
        <linearGradient id="paint2_linear_1977_58932" x1="37.7445" y1="131.719" x2="37.7445" y2="3.00436" gradientUnits="userSpaceOnUse">
          <stop stopColor="#826DFF" stopOpacity="0.2"/>
          <stop offset="1" stopColor="#6E3AFF"/>
        </linearGradient>
        <linearGradient id="paint3_linear_1977_58932" x1="25" y1="129.667" x2="25" y2="134" gradientUnits="userSpaceOnUse">
          <stop stopColor="#493FB5"/>
          <stop offset="1" stopColor="#7454CF"/>
        </linearGradient>
        <linearGradient id="paint4_linear_1977_58932" x1="25.5" y1="128.885" x2="25.5" y2="133.885" gradientUnits="userSpaceOnUse">
          <stop stopColor="#4A3C72"/>
          <stop offset="1" stopColor="#5351B8"/>
        </linearGradient>
        <linearGradient id="paint5_linear_1977_58932" x1="25.0039" y1="5.9965" x2="25.0039" y2="0" gradientUnits="userSpaceOnUse">
          <stop stopColor="#CDC7FF"/>
          <stop offset="1" stopColor="#5A25F0"/>
        </linearGradient>
        <linearGradient id="paint6_linear_1977_58932" x1="24.9936" y1="5.99719" x2="24.9936" y2="2.5" gradientUnits="userSpaceOnUse">
          <stop stopColor="white"/>
          <stop offset="1" stopColor="white" stopOpacity="0.3"/>
        </linearGradient>
      </defs>
    </g>
  );
};

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 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="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>

          {/* 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={<ProfitTotalBar />}
                  barSize={35}
                />
                <Bar
                  dataKey="净利润"
                  shape={<ProfitNetBar />}
                  barSize={35}
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

      {/* 模块标题 */}
      <ModuleHeaderBackground className="absolute h-[38px] left-0 top-0 w-[594.001px]" />
      <ModuleHeader className="absolute h-[38px] overflow-clip right-0 top-0 w-[594px]" title="利润总额与净利润" />
    </div>
  );
}