import React from 'react';

interface BarSVGProps {
  variant: "asset-total" | "asset-net" | "profit-total" | "profit-net" | "income" | "debt-ratio";
  width?: number;
  height?: number;
  className?: string;
}

/**
 * 可重用的SVG柱子组件
 * 将主页面四个数据模块中的柱子SVG抽成组件重用
 */
export default function BarSVG({ variant, width = 36, height = 225, className }: BarSVGProps) {
  if (variant === "asset-total") {
    return (
      <svg width={width} height={height} viewBox="0 0 36 225" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
        <path d="M35.25 222H0.25L0.25 3L35.25 3L35.25 222Z" fill="url(#paint0_linear_asset_total)"/>
        <path d="M35.25 222H0.25L0.25 3L35.25 3L35.25 222Z" fill="url(#paint1_linear_asset_total)" fillOpacity="0.6"/>
        <ellipse cx="17.75" cy="221.5" rx="17.5" ry="2.5" fill="url(#paint2_linear_asset_total)"/>
        <ellipse cx="17.75" cy="221.5" rx="17.5" ry="2.5" fill="url(#paint3_linear_asset_total)" 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_asset_total)" strokeWidth="0.5"/>
        <ellipse cx="17.75" cy="2.5" rx="17.5" ry="2.5" fill="url(#paint5_linear_asset_total)"/>
        <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_asset_total)" strokeWidth="0.5"/>
        <defs>
          <linearGradient id="paint0_linear_asset_total" 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_asset_total" 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_asset_total" 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_asset_total" 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_asset_total" 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_asset_total" 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_asset_total" 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>
      </svg>
    );
  }

  if (variant === "asset-net") {
    return (
      <svg width={width} height={height} viewBox="0 0 36 135" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
        <rect width="35" height="132" transform="translate(0.25 3)" fill="url(#paint0_linear_asset_net)"/>
        <path d="M35.25 7L0.25 7L0.25 3L35.25 3V7Z" fill="url(#paint1_linear_asset_net)"/>
        <path d="M35.25 7L0.25 7L0.25 3L35.25 3V7Z" fill="url(#paint2_linear_asset_net)" fillOpacity="0.8"/>
        <ellipse cx="17.75" cy="6.5" rx="17.5" ry="2.5" fill="url(#paint3_linear_asset_net)"/>
        <ellipse cx="17.75" cy="6.5" rx="17.5" ry="2.5" fill="url(#paint4_linear_asset_net)" 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_asset_net)" strokeWidth="0.5"/>
        <ellipse cx="17.75" cy="2.5" rx="17.5" ry="2.5" fill="url(#paint6_linear_asset_net)"/>
        <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_asset_net)" strokeWidth="0.5"/>
        <defs>
          <linearGradient id="paint0_linear_asset_net" 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_asset_net" 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_asset_net" 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_asset_net" 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_asset_net" 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_asset_net" 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_asset_net" 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_asset_net" 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>
      </svg>
    );
  }

  if (variant === "profit-total") {
    return (
      <svg width={width} height={height} viewBox="0 0 50 165" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
        <path d="M24.5 163H0L0 3L24.5 3L24.5 163Z" fill="url(#paint0_linear_profit_total)"/>
        <rect x="24.5" y="3" width="1" height="160" fill="url(#paint1_linear_profit_total)"/>
        <path d="M50 163H25.5L25.5 3L50 3L50 163Z" fill="url(#paint2_linear_profit_total)"/>
        <path d="M0 162.998L25 165L50 162.998L25 160.667L0 162.998Z" fill="url(#paint3_linear_profit_total)" fillOpacity="0.6"/>
        <path d="M24.5 159.5H25.5V164.5H24.5V159.5Z" fill="url(#paint4_linear_profit_total)"/>
        <path d="M25 0L0 2.99636L25 6L50 2.99636L25 0Z" fill="url(#paint5_linear_profit_total)"/>
        <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_profit_total)"/>
        <defs>
          <linearGradient id="paint0_linear_profit_total" 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_profit_total" 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_profit_total" 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_profit_total" x1="25" y1="160.667" x2="25" y2="165" gradientUnits="userSpaceOnUse">
            <stop stopColor="#0A316C"/>
            <stop offset="1" stopColor="#1B659B"/>
          </linearGradient>
          <linearGradient id="paint4_linear_profit_total" 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_profit_total" 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_profit_total" 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>
      </svg>
    );
  }

  if (variant === "profit-net") {
    return (
      <svg width={width} height={height} viewBox="0 0 50 134" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
        <path d="M24.5 132H0L0 3L24.5 3L24.5 132Z" fill="url(#paint0_linear_profit_net)"/>
        <rect x="24.5" y="3" width="1" height="129" fill="url(#paint1_linear_profit_net)"/>
        <path d="M50 132H25.5L25.5 3L50 3V132Z" fill="url(#paint2_linear_profit_net)"/>
        <path d="M0 131.998L25 134L50 131.998L25 129.667L0 131.998Z" fill="url(#paint3_linear_profit_net)" fillOpacity="0.6"/>
        <path d="M24.5 128.5H25.5V133.5H24.5V128.5Z" fill="url(#paint4_linear_profit_net)"/>
        <path d="M25 0L0 2.99636L25 6L50 2.99636L25 0Z" fill="url(#paint5_linear_profit_net)"/>
        <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_profit_net)"/>
        <defs>
          <linearGradient id="paint0_linear_profit_net" 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_profit_net" 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_profit_net" 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_profit_net" x1="25" y1="129.667" x2="25" y2="134" gradientUnits="userSpaceOnUse">
            <stop stopColor="#493FB5"/>
            <stop offset="1" stopColor="#7454CF"/>
          </linearGradient>
          <linearGradient id="paint4_linear_profit_net" 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_profit_net" 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_profit_net" 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>
      </svg>
    );
  }

  if (variant === "income") {
    return (
      <svg width={width} height={height} viewBox="0 0 80 254" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
        <path d="M40.5 252H80L80 3L40.5 3L40.5 252Z" fill="url(#paint0_linear_income)"/>
        <rect width="1" height="249" transform="matrix(-1 0 0 1 40.5 3)" fill="url(#paint1_linear_income)"/>
        <path d="M0 252H39.5L39.5 3L0 3L0 252Z" fill="url(#paint2_linear_income)"/>
        <path d="M80 251.998L40 254L0 251.998L40 249.667L80 251.998Z" fill="url(#paint3_linear_income)" fillOpacity="0.6"/>
        <path d="M40.5 248.5H39.5V253.5H40.5V248.5Z" fill="url(#paint4_linear_income)"/>
        <path d="M40 0L80 2.99636L40 6L0 2.99636L40 0Z" fill="url(#paint5_linear_income)"/>
        <path d="M80 3C73.1703 3.36748 66.4401 3.78174 59.7099 4.20267C56.3282 4.40312 53.0128 4.63697 49.6643 4.85746L39.6187 5.52561H40.3813L30.3357 4.85746C26.9872 4.63697 23.6718 4.40312 20.2901 4.20267C13.5599 3.78174 6.82967 3.36748 0 3C6.49814 3.54788 13.0957 4.049 19.6933 4.54343C22.9755 4.79733 26.3241 5.0245 29.6395 5.25835L39.6187 5.96659L40.0166 6L40.3813 5.97327L50.3605 5.26503C53.6759 5.0245 57.0245 4.80401 60.3067 4.54343C66.9043 4.049 73.5019 3.54788 80 3Z" fill="url(#paint6_linear_income)"/>
        <defs>
          <linearGradient id="paint0_linear_income" x1="60.2589" y1="251.458" x2="60.2589" y2="3.00841" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FF8A00" stopOpacity="0.2"/>
            <stop offset="1" stopColor="#FFD600"/>
          </linearGradient>
          <linearGradient id="paint1_linear_income" x1="0.5" y1="0" x2="0.5" y2="249" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FEFFC2"/>
            <stop offset="1" stopColor="#FF9900" stopOpacity="0.3"/>
          </linearGradient>
          <linearGradient id="paint2_linear_income" x1="19.7589" y1="251.069" x2="19.7589" y2="3.00843" gradientUnits="userSpaceOnUse">
            <stop offset="0.00462963" stopColor="#FF8A00" stopOpacity="0.2"/>
            <stop offset="1" stopColor="#FFB800"/>
          </linearGradient>
          <linearGradient id="paint3_linear_income" x1="40" y1="249.667" x2="40" y2="254" gradientUnits="userSpaceOnUse">
            <stop stopColor="#58370F"/>
            <stop offset="1" stopColor="#A9600F"/>
          </linearGradient>
          <linearGradient id="paint4_linear_income" x1="39.5" y1="248.885" x2="39.5" y2="253.885" gradientUnits="userSpaceOnUse">
            <stop stopColor="#715120"/>
            <stop offset="1" stopColor="#8D7340" stopOpacity="0"/>
          </linearGradient>
          <linearGradient id="paint5_linear_income" x1="39.9937" y1="5.9965" x2="39.9937" y2="0" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FCFF6C"/>
            <stop offset="1" stopColor="#FF8A00"/>
          </linearGradient>
          <linearGradient id="paint6_linear_income" x1="40.0103" y1="5.99719" x2="40.0103" y2="2.5" gradientUnits="userSpaceOnUse">
            <stop stopColor="white"/>
            <stop offset="1" stopColor="white" stopOpacity="0.3"/>
          </linearGradient>
        </defs>
      </svg>
    );
  }

  if (variant === "debt-ratio") {
    return (
      <svg width={width} height={height} viewBox="0 0 96 240" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
        <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_debt_ratio)">
          <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_debt_ratio" 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_debt_ratio"/>
            <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_debt_ratio"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_debt_ratio" result="shape"/>
          </filter>
        </defs>
      </svg>
    );
  }

  return null;
}