import React from 'react';

export default function Industry({ 
  onPortClick = () => {}, 
  onPortHover = () => {}, 
  selectedPort = null, 
  targetPort = null, 
  connections = {} 
}) {
  // 获取端口的连接状态样式
  const getPortStyle = (portId) => {
    if (selectedPort === portId) {
      return 'bg-blue-300';
    }
    if (targetPort === portId) {
      return 'bg-green-300';
    }
    if (connections && connections[portId]) {
      return 'bg-[#00ff7f]';
    }
    return 'bg-gray-300';
  };

  return (
    <div className="h-full w-full bg-black text-white flex">
      {/* 工业设备区域 - 左侧45% */}
      <div className="w-[45%] p-2">
        <div className="grid grid-cols-2 gap-4 h-full">
          {/* 设备1 */}
          <div className="bg-gray-900 rounded-lg p-2 flex flex-col">
            <div className="text-center mb-2">Device1</div>
            <div className="flex items-center justify-center flex-1">
              <div className="bg-gray-800 p-4 rounded-lg">
                <div className="flex space-x-4">
                  <div 
                    className={` rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device1-1')}`}
                    jstype="testport-m12-d" 
                    id="Device1-1"
                    onClick={() => onPortClick('Device1-1')}
                    onMouseEnter={() => onPortHover('Device1-1')}
                  >
                    <div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                  <div 
                    className={` rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device1-2')}`}
                    jstype="testport-m12-d" 
                    id="Device1-2"
                    onClick={() => onPortClick('Device1-2')}
                    onMouseEnter={() => onPortHover('Device1-2')}
                  >
                    <div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 设备2 */}
          <div className="bg-gray-900 rounded-lg p-2 flex flex-col">
            <div className="text-center mb-2">Device2</div>
            <div className="flex items-center justify-center flex-1">
              <div className="bg-gray-800 p-4 rounded-lg">
                <div className="flex space-x-4">
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device2-1')}`}
                    jstype="testport-m12-d" 
                    id="Device2-1"
                    onClick={() => onPortClick('Device2-1')}
                    onMouseEnter={() => onPortHover('Device2-1')}
                  >
                    <div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device2-2')}`}
                    jstype="testport-m12-d" 
                    id="Device2-2"
                    onClick={() => onPortClick('Device2-2')}
                    onMouseEnter={() => onPortHover('Device2-2')}
                  >
                    <div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 设备3 */}
          <div className="bg-gray-900 rounded-lg p-2 flex flex-col">
            <div className="text-center mb-2">Device3</div>
            <div className="flex items-center justify-center flex-1">
              <div className="bg-gray-800 p-4 rounded-lg">
                <div className="flex space-x-4">
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device3-1')}`}
                    jstype="testport-copper" 
                    id="Device3-1"
                    onClick={() => onPortClick('Device3-1')}
                    onMouseEnter={() => onPortHover('Device3-1')}
                  >
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device3-2')}`}
                    jstype="testport-copper" 
                    id="Device3-2"
                    onClick={() => onPortClick('Device3-2')}
                    onMouseEnter={() => onPortHover('Device3-2')}
                  >
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 设备4 */}
          <div className="bg-gray-900 rounded-lg p-2 flex flex-col">
            <div className="text-center mb-2">Device4</div>
            <div className="flex items-center justify-center flex-1">
              <div className="bg-gray-800 p-4 rounded-lg">
                <div className="flex space-x-4">
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device4-1')}`}
                    jstype="testport-copper" 
                    id="Device4-1"
                    onClick={() => onPortClick('Device4-1')}
                    onMouseEnter={() => onPortHover('Device4-1')}
                  >
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Device4-2')}`}
                    jstype="testport-copper" 
                    id="Device4-2"
                    onClick={() => onPortClick('Device4-2')}
                    onMouseEnter={() => onPortHover('Device4-2')}
                  >
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 工业控制柜 - 右侧55% */}
      <div className="w-[55%] p-2">
        <div className="text-center mb-2">Cabinet</div>
        <div className="bg-gray-800 rounded-lg p-4 h-[calc(100%-2rem)]">
          <div className="h-full flex flex-col space-y-4">
            {/* 上层端口组 */}
            <div className="flex-1 flex items-center justify-center">
              <div className="grid grid-cols-4 gap-8">
                {[...Array(4)].map((_, i) => (
                  <div key={i} className="flex flex-col items-center">
                    <div 
                      className={`w-12 h-12 mb-2 flex items-center justify-center transition-colors ${getPortStyle(`Cabinet-A${i + 1}`)}`}
                      jstype="testport-m12-d" 
                      id={`Cabinet-A${i + 1}`}
                      onClick={() => onPortClick(`Cabinet-A${i + 1}`)}
                      onMouseEnter={() => onPortHover(`Cabinet-A${i + 1}`)}
                    >
                    <div className={`w-8 h-8 bg-[url('/m12-d.png')] bg-contain bg-no-repeat bg-center`}></div>
                    </div>
                    <span className="text-xs">A{i + 1}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* 下层端口组 */}
            <div className="flex-1 flex items-center justify-center">
              <div className="grid grid-cols-4 gap-8">
                {[...Array(4)].map((_, i) => (
                  <div key={i} className="flex flex-col items-center">
                    <div 
                      className={`w-12 h-12 mb-2 flex items-center justify-center transition-colors ${getPortStyle(`Cabinet-R${i + 1}`)}`}
                      jstype="testport-copper" 
                      id={`Cabinet-R${i + 1}`}
                      onClick={() => onPortClick(`Cabinet-R${i + 1}`)}
                      onMouseEnter={() => onPortHover(`Cabinet-R${i + 1}`)}>
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                    </div>
                    <span className="text-xs">R{i + 1}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}