import React from 'react';
import BasePointIcon from './icons/BasePointIcon';
import SupplyChainIcons from './icons/SupplyChainIcons';
import SupplyChainNetwork from './icons/SupplyChainNetwork';
import { useSupplyChain } from '../context/SupplyChainContext';

// 定义定位点类型 - 与SupplyChainContext保持一致
interface LocationPoint {
  id: string;
  type: 'base' | 'chain';
  x: number;
  y: number;
  industry: string;
  name?: string;
  data?: Record<string, any>;
}

// 定义连接线类型
interface ConnectionLine {
  id: string;
  from: string;
  to: string;
}

interface SupplyChainMapProps {
  points?: LocationPoint[];
  connections?: ConnectionLine[];
  onPointClick?: (point: LocationPoint) => void;
}

// 基地定位点组件
const BasePoint: React.FC<{
  point: LocationPoint;
  onClick?: (point: LocationPoint) => void;
}> = ({ point, onClick }) => {
  return (
    <div
      className="absolute cursor-pointer transition-transform hover:scale-110"
      style={{
        left: `${point.x}px`,
        top: `${point.y}px`,
        width: '40px',
        height: '48px'
      }}
      onClick={() => onClick?.(point)}
    >
      <div className="absolute inset-0">
        <BasePointIcon className="size-full" />
      </div>
      {point.name && (
        <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-white text-sm font-bold whitespace-nowrap">
          {point.name}
        </div>
      )}
    </div>
  );
};

// 产业链定位点组件
const IndustryChainPoint: React.FC<{
  point: LocationPoint;
  onClick?: (point: LocationPoint) => void;
}> = ({ point, onClick }) => {
  return (
    <div
      className="absolute cursor-pointer transition-transform hover:scale-110"
      style={{
        left: `${point.x}px`,
        top: `${point.y}px`,
        width: '40px',
        height: '48px'
      }}
      onClick={() => onClick?.(point)}
    >
      <div className="absolute inset-0">
        <SupplyChainIcons className="size-full" />
      </div>
      {point.name && (
        <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-white text-sm font-bold whitespace-nowrap">
          {point.name}
        </div>
      )}
    </div>
  );
};

// 连接线组件
const ConnectionLine: React.FC<{
  fromPoint: LocationPoint;
  toPoint: LocationPoint;
}> = ({ fromPoint, toPoint }) => {
  // 计算连接线的位置和角度
  const dx = toPoint.x - fromPoint.x;
  const dy = toPoint.y - fromPoint.y;
  const length = Math.sqrt(dx * dx + dy * dy);
  const angle = Math.atan2(dy, dx) * 180 / Math.PI;

  return (
    <div
      className="absolute pointer-events-none"
      style={{
        left: `${fromPoint.x + 20}px`,
        top: `${fromPoint.y + 24}px`,
        width: `${length}px`,
        height: '2px',
        transform: `rotate(${angle}deg)`,
        transformOrigin: '0 0'
      }}
    >
      <div className="w-full h-full bg-gradient-to-r from-blue-400 to-cyan-400 shadow-[0_0_4px_0_rgba(0,255,255,0.6)]" />
    </div>
  );
};

// 地图图例组件
const MapLegend: React.FC = () => {
  return (
    <div className="absolute bottom-[80px] content-stretch flex items-center left-[calc(50%+224.94px)] translate-x-[-50%]">
      {/* 基地图例 */}
      <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]">
        <div className="h-[50px] relative shrink-0 w-[41.667px]">
          <div className="absolute inset-0">
            <BasePointIcon className="size-full" />
          </div>
        </div>
        <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-[0] not-italic relative shrink-0 text-[26px] text-white whitespace-nowrap">
            <p className="leading-[32px]">基地</p>
          </div>
        </div>
      </div>

      {/* 产业链图例 */}
      <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]">
        <div className="h-[50px] relative shrink-0 w-[41.667px]">
          <div className="absolute inset-0">
            <SupplyChainIcons className="size-full" />
          </div>
        </div>
        <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-[0] not-italic relative shrink-0 text-[26px] text-white whitespace-nowrap">
            <p className="leading-[32px]">产业链</p>
          </div>
        </div>
      </div>
    </div>
  );
};

const SupplyChainMap: React.FC<SupplyChainMapProps> = ({
  points = [],
  onPointClick
}) => {
  // 使用SupplyChainContext获取动态数据
  const { currentData, currentIndustry } = useSupplyChain();

  // 从context获取当前产业的定位点数据
  const dynamicPoints = currentData?.mapPoints[currentIndustry] || [];

  // 优先使用传入的points，否则使用动态数据
  const displayPoints = points.length > 0 ? points : dynamicPoints;

  // 处理定位点点击
  const handlePointClick = (point: LocationPoint) => {
    onPointClick?.(point);
  };

  return (
    <div className="absolute contents left-[529.88px] top-[calc(50%+64.03px)] translate-y-[-50%]">
      <div className="absolute contents left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]">
        {/* 地图边框 */}
        <div className="absolute h-[731.454px] left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]">
          <div className="absolute inset-0">
            <img
              alt="地图边框"
              className="block max-w-none size-full"
              src="/supply-chain/img7.svg"
            />
          </div>
        </div>

        {/* 供应链网络线 */}
        <div className="absolute inset-[19.27%_4.17%_13.01%_27.6%]">
          <SupplyChainNetwork className="block max-w-none size-full" />
        </div>



        {/* 定位点 */}
        {displayPoints.map(point => {
          if (point.type === 'base') {
            return (
              <BasePoint
                key={point.id}
                point={point}
                onClick={() => handlePointClick(point)}
              />
            );
          } else if (point.type === 'chain') {
            return (
              <IndustryChainPoint
                key={point.id}
                point={point}
                onClick={() => handlePointClick(point)}
              />
            );
          }
          return null;
        })}

        {/* 图例 */}
        <MapLegend />
      </div>
    </div>
  );
};

export default SupplyChainMap;