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

// 导入新的组件库
import Navigation from './components/layout/Navigation';
import SupplyChainBackground from './components/layout/SupplyChainBackground';
import BackgroundGrid from './components/layout/BackgroundGrid';
import HeaderBar from './components/layout/HeaderBar';
import { IndustryType } from './components/icons/IndustryIcon';

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


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


  return (
    <div className="h-[1080px] w-[1920px] bg-[#0a1a3a] relative overflow-hidden">
      {/* 背景 */}
      <div className="absolute contents left-0 top-0">
        <SupplyChainBackground />
        <BackgroundGrid />
        <HeaderBar title="粮食•油脂" />
      </div>

      {/* 左侧导航 */}
      <Navigation
        activeTab={activeTab}
        onTabChange={setActiveTab}
        availableIndustries={["粮食", "油脂"]}
      />

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


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

export default GrainOilDashboard;