import React, { useState } from 'react';
import SupplyChainMap from './components/SupplyChainMap';
import SupplyChainModel from './components/SupplyChainModel';
import KeyMetrics from './components/KeyMetrics';

// 定义组件接口
interface GrainOilDashboardProps {
  // 可以添加props如果需要
}

// 图标组件 - 粮食图标
const GrainIcon: React.FC<{ className?: string }> = ({ className }) => {
  return (
    <div className={className}>
      <div className="absolute inset-[13%_21.7%]">
        <img
          alt="粮食图标"
          className="block max-w-none size-full"
          src="https://www.figma.com/api/mcp/asset/74aa7038-2d6c-44fa-8671-4472845f5469"
        />
      </div>
    </div>
  );
};

// 图标组件 - 油脂图标
const OilIcon: React.FC<{ className?: string }> = ({ className }) => {
  return (
    <div className={className}>
      <div className="absolute inset-[13%_26.2%]">
        <img
          alt="油脂图标"
          className="block max-w-none size-full"
          src="https://www.figma.com/api/mcp/asset/0df5dc87-b48b-4b8d-a3ee-7721d3185ddc"
        />
      </div>
    </div>
  );
};

// 产业链图标组件
const IndustryChainIcon: React.FC<{ className?: string }> = ({ className }) => {
  return (
    <div className={className}>
      <div className="absolute inset-[5.36%_10.72%]">
        <img
          alt="产业链图标"
          className="block max-w-none size-full"
          src="https://www.figma.com/api/mcp/asset/2388ddbc-149e-4662-89ae-e9df0ed9c546"
        />
      </div>
    </div>
  );
};

// 导航组件
const Navigation: React.FC<{
  activeTab: 'grain' | 'oil';
  onTabChange: (tab: 'grain' | 'oil') => void
}> = ({ activeTab, onTabChange }) => {
  return (
    <div className="absolute h-[1078.893px] left-[40px] top-0 w-[150.879px]">
      <div className="absolute content-stretch flex flex-col gap-[40px] h-[944px] items-center justify-center left-0 right-[37.7%] top-1/2 translate-y-[-50%]">
        {/* 粮食导航项 */}
        <div
          className={`box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px] cursor-pointer transition-all ${
            activeTab === 'grain'
              ? 'bg-[rgba(255,255,255,0.05)]'
              : 'hover:bg-[rgba(255,255,255,0.02)]'
          }`}
          onClick={() => onTabChange('grain')}
        >
          <GrainIcon className="overflow-clip relative shrink-0 size-[50px]" />
          <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
            <div className="flex flex-col font-bold justify-center leading-[32px] not-italic relative shrink-0 text-[26px] whitespace-nowrap">
              <p className="mb-0 text-white">粮</p>
              <p className="mb-0">&nbsp;</p>
              <p className="text-white">食</p>
            </div>
          </div>
        </div>

        {/* 油脂导航项 */}
        <div
          className={`box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px] cursor-pointer transition-all ${
            activeTab === 'oil'
              ? 'bg-[rgba(255,255,255,0.05)]'
              : 'hover:bg-[rgba(255,255,255,0.02)]'
          }`}
          onClick={() => onTabChange('oil')}
        >
          <OilIcon className="overflow-clip relative shrink-0 size-[50px]" />
          <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
            <div className="flex flex-col font-bold justify-center leading-[32px] not-italic relative shrink-0 text-[26px] whitespace-nowrap">
              <p className="mb-0 text-[rgba(255,255,255,0.5)]">油</p>
              <p className="mb-0">&nbsp;</p>
              <p className="text-[rgba(255,255,255,0.5)]">脂</p>
            </div>
          </div>
        </div>
      </div>

      {/* 导航光标 */}
      <div className="absolute bottom-0 flex items-center justify-center left-[25.05%] right-0 top-0">
        <div className="flex-none h-[1078.893px] rotate-[180deg] scale-y-[-100%] w-[113.088px]">
          <div className="relative size-full">
            <div className="absolute bottom-[-0.04%] left-0 right-0 top-[-0.04%]">
              <img
                alt="导航光标"
                className="block max-w-none size-full"
                src="https://www.figma.com/api/mcp/asset/800cef2d-f019-4e81-aea2-643efa15258e"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};


// 主组件
const GrainOilDashboard: React.FC<GrainOilDashboardProps> = () => {
  const [activeTab, setActiveTab] = useState<'grain' | 'oil'>('grain');


  return (
    <div className="h-[1080px] w-[1920px] bg-[#0a1a3a] relative overflow-hidden">
      {/* 背景 */}
      <div className="absolute contents left-0 top-0">
        <div className="absolute h-[1080px] left-0 overflow-clip top-0 w-[1920px]">
          <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
            <img
              alt="背景"
              className="absolute max-w-none object-50%-50% object-cover size-full"
              src="https://www.figma.com/api/mcp/asset/d046358a-9a3b-42e0-89cb-4a2b2a843ced"
            />
            <div className="absolute bg-[rgba(0,79,154,0.1)] inset-0" />
          </div>
        </div>

        {/* 底部网格 */}
        <div className="absolute h-[1080px] left-0 top-0 w-[1920px]">
          <div className="absolute bottom-[-71.42%] content-stretch flex flex-col items-start left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px_175.624px] mask-size-[1920px_1080px] right-0 top-[-16.26%]">
            <div className="h-[1013.464px] relative shrink-0 w-[1920px]">
              <img
                alt="网格"
                className="block max-w-none size-full"
                src="https://www.figma.com/api/mcp/asset/597ea7a4-6131-4e5c-b0c3-955a775a85b0"
              />
            </div>
          </div>
        </div>

        {/* 顶部标题栏 */}
        <div className="absolute h-[71.119px] left-[526.95px] top-[40px] w-[866.265px]">
          <div className="absolute bottom-[18.95%] left-0 right-0 top-0">
            <div className="absolute inset-[-181.3%_-19.68%_-413.77%_-19.68%]">
              <img
                alt="标题栏背景"
                className="block max-w-none size-full"
                src="https://www.figma.com/api/mcp/asset/e595857a-5eff-4590-b426-0a8ae38539f6"
              />
            </div>
          </div>
          <div className="absolute bottom-0 left-[27.44%] right-[27.44%] top-[62.9%]">
            <div className="absolute inset-[-257.75%_-17.4%]">
              <img
                alt="标题栏装饰"
                className="block max-w-none size-full"
                src="https://www.figma.com/api/mcp/asset/5ad5a4ea-c56a-4b77-9b93-7aa1afb09e71"
              />
            </div>
          </div>
        </div>

        {/* 主标题 */}
        <div className="absolute box-border content-stretch flex gap-[10px] items-center justify-center left-1/2 px-0 py-[4px] top-[40px] translate-x-[-50%]">
          <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-center text-white tracking-[10.2px] whitespace-nowrap">
            <p className="leading-[32px]">粮食•油脂</p>
          </div>
        </div>
      </div>

      {/* 左侧导航 */}
      <Navigation activeTab={activeTab} onTabChange={setActiveTab} />

      {/* 中间地图区域 */}
      <SupplyChainMap
        onPointClick={(point) => {
          console.log('点击定位点:', point);
          // 这里可以添加点击定位点的处理逻辑
        }}
      />

      {/* 右侧供应链合作模式 */}
      <SupplyChainModel />

      {/* 左侧数据展示 */}
      <KeyMetrics
        title="优质稻米"
        subtitle="产业链联合体"
      />
    </div>
  );
};

export default GrainOilDashboard;