import { useState } from 'react';
import { AssetMetrics } from './components/AssetMetrics';
import { ProfitMetrics } from './components/ProfitMetrics';
import { IncomeMetrics } from './components/IncomeMetrics';
import { DebtRatioMetrics } from './components/DebtRatioMetrics';
import GridBackground from './components/GridBackground';
import BackgroundOverlay from './components/BackgroundOverlay';
import Icon from './components/Icon';
import VariationModal from './components/VariationModal';

export default function FinancialDashboard() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleFloatButtonClick = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="relative w-[1920px] h-[1080px] bg-gray-900 text-white overflow-hidden">
      {/* 背景图片和遮罩 */}
      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
        <img
          alt=""
          className="absolute max-w-none object-center object-cover w-full h-full"
          src="/financial-dashboard/background-property1.png"
        />
        <div className="absolute bg-[rgba(33,33,33,0.6)] inset-0" />
      </div>

      {/* 底部网格和背景 */}
      <div className="absolute inset-0">
        <BackgroundOverlay />
        <GridBackground />
      </div>

      {/* 头部区域 */}
      <div className="absolute h-[74px] left-0 top-px w-[1920px] z-10" data-name="头部">
        {/* 右侧装饰 */}
        <div className="absolute contents left-[1269px] top-[-3.98px]">
          <div className="absolute flex h-[65px] items-center justify-center left-[calc(50%+638px)] top-[calc(50%+-5.48px)] translate-x-[-50%] translate-y-[-50%] w-[658px]">
            <div className="flex-none rotate-[180deg] scale-y-[-100%]">
              <div className="h-[65px] relative w-[658px]" data-name="装饰_左">
                <div className="absolute h-[64.5px] left-0 top-0 w-[663px]">
                  <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-6.svg" />
                </div>
                <div className="absolute h-[8px] left-[124.5px] top-[27px] w-[301px]">
                  <div className="absolute bottom-[-12.5%] left-0 right-0 top-[-12.5%]">
                    <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-7.svg" />
                  </div>
                </div>
                <div className="absolute h-0 left-0 top-[22px] w-[162px]">
                  <div className="absolute bottom-[-1px] left-0 right-0 top-[-1px]">
                    <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-8.svg" />
                  </div>
                </div>
                <div className="absolute content-stretch flex gap-[4px] items-start left-[438px] top-[27px]">
                  <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] shrink-0 w-[10px]" />
                  <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-80 shrink-0 w-[6px]" />
                  <div className="bg-[#a2beff] blur-[0.25px] filter opacity-60 shrink-0 size-[5px]" />
                  <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-40 shrink-0 w-[4px]" />
                  <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-20 shrink-0 w-[3px]" />
                </div>
                <div className="absolute h-[22.5px] left-0 top-[42px] w-[661px]">
                  <div className="absolute bottom-[-2.22%] left-0 right-0 top-[-2.22%]">
                    <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-9.svg" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="absolute flex inset-[-5.37%_30.52%_22.94%_66.51%] items-center justify-center">
            <div className="flex-none h-[61px] rotate-[180deg] scale-y-[-100%] w-[57px]">
              <div className="relative size-full" data-name="Union">
                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-10.svg" />
              </div>
            </div>
          </div>
        </div>

        

        {/* 左侧装饰镜像 */}
        <div className="absolute bottom-[13.48%] contents left-0 right-[65.73%] top-[-5.37%]">
          <div className="absolute bottom-[13.48%] left-0 right-[65.73%] top-[-1.32%]" data-name="装饰_左">
            <div className="absolute h-[64.5px] left-0 top-0 w-[663px]">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-6.svg" />
            </div>
            <div className="absolute h-[8px] left-[124.5px] top-[27px] w-[301px]">
              <div className="absolute bottom-[-12.5%] left-0 right-0 top-[-12.5%]">
                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-7.svg" />
              </div>
            </div>
            <div className="absolute h-0 left-0 top-[22px] w-[162px]">
              <div className="absolute bottom-[-1px] left-0 right-0 top-[-1px]">
                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-8.svg" />
              </div>
            </div>
            <div className="absolute content-stretch flex gap-[4px] items-start left-[438px] top-[27px]">
              <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] shrink-0 w-[10px]" />
              <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-80 shrink-0 w-[6px]" />
              <div className="bg-[#a2beff] blur-[0.25px] filter opacity-60 shrink-0 size-[5px]" />
              <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-40 shrink-0 w-[4px]" />
              <div className="bg-[#a2beff] blur-[0.25px] filter h-[5px] opacity-20 shrink-0 w-[3px]" />
            </div>
            <div className="absolute h-[22.5px] left-0 top-[42px] w-[661px]">
              <div className="absolute bottom-[-2.22%] left-0 right-0 top-[-2.22%]">
                <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-9.svg" />
              </div>
            </div>
          </div>
          <div className="absolute inset-[-5.37%_66.15%_22.94%_30.89%]" data-name="Union">
            <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-decoration-10.svg" />
          </div>
        </div>

        {/* 标题区域 */}
        <div className="absolute h-[74px] left-[calc(50%+4px)] top-[calc(50%+-8px)] translate-x-[-50%] translate-y-[-50%] w-[690px]" data-name="标题">
          <div className="absolute bottom-[-12.16%] left-[9.13%] right-[9.13%] top-full" data-name="发光边_下模糊掉的">
            <div className="absolute inset-[-22.22%_-0.35%]">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-glow-border.svg" />
            </div>
          </div>
          <div className="absolute bottom-0 left-[0.14%] right-0 top-0" data-name="标题背景">
            <div className="absolute inset-[-10.81%_-3.48%_-16.22%_-3.48%]">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-title-bg.svg" />
            </div>
          </div>
          <p className="[text-shadow:0px_0px_20px_#041441] absolute bg-clip-text bg-gradient-to-t font-['HarmonyOS_Sans_SC:Regular',sans-serif] from-[#cbced1] inset-[27.03%_36.23%_29.73%_35.94%] leading-[32px] not-italic text-[36px] text-center to-[#ffffff] to-[37.5%] tracking-[3px]" style={{ WebkitTextFillColor: "transparent" }}>
            战 略 部 署
          </p>
          <div className="absolute bottom-0 left-[18.55%] right-[18.26%] top-full" data-name="顶部导航">
            <div className="absolute bottom-[-2px] left-0 right-0 top-[-2px]">
              <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-top-nav.svg" />
            </div>
          </div>
        </div>
      </div>

      {/* 四个数据模块容器 - 两行两列网格布局 */}
      <div className="absolute content-stretch flex gap-[20px] items-center left-1/2 top-[79.5px] translate-x-[-50%]">
        <div className="content-stretch flex gap-[20px] items-start relative shrink-0 w-[1880px]">
          {/* 左侧列 */}
          <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[930px]">
            {/* 资产负债率模块 */}
            <AssetMetrics />

            {/* 收入模块 */}
            <IncomeMetrics />
          </div>

          {/* 右侧列 */}
          <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-[930px]">
            {/* 利润总额与净利润模块 */}
            <ProfitMetrics />

            {/* 资产负债率（百分比）模块 */}
            <DebtRatioMetrics />
          </div>
        </div>
      </div>

      {/* 右下角浮动按钮 */}
      <div className="absolute contents left-[1765px] top-[923px]" data-name="浮动icon">
        <div className="absolute contents left-[1765px] top-[923px]">
          <div
            className="absolute flex items-center justify-center left-[1765px] top-[923px] cursor-pointer hover:opacity-80 transition-opacity"
            onClick={handleFloatButtonClick}
          >
            {/* 使用浮动按钮状态的Icon组件 - 包含图标和文字 */}
            <Icon variant="float" className="size-[108px]" />
          </div>
        </div>
      </div>

      {/* 变化幅度弹窗 */}
      <VariationModal isOpen={isModalOpen} onClose={handleCloseModal} />
    </div>
  );
}