import React,{useState} from 'react';
import useDeviceStore from '@/store/deviceStore';
import Image from 'next/image';

export default function WorldSkillWORKSHOP({ 
  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';
  };
  
const {faultScenarios,seatUUID,seatNumber,updateWorldSkillScenarios} = useDeviceStore();


  return (
    <div>
    {/* 办公区域  */}
    <div className="h-full w-full bg-black text-white flex z-index-100">
    
    {/* 车间Button */}
      <div className="w-[2%] p-1 flex flex-col">
        <button 
          className="bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white font-bold py-3 px-2 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-200 text-sm flex flex-col items-center justify-center h-full min-h-[120px] border border-blue-400 hover:border-blue-300"
          onClick={() => updateWorldSkillScenarios('OFFICE')}
        >
          <div className="text-xs leading-tight text-center">
            前往<br/>办公楼
          </div>
        </button>
      </div>

      {/* R-M-A  */}
      <div className="w-[12%] p-1 flex flex-col">
        <div className="flex-1 flex flex-col">
          
          <div className="text-center mb-1">R-M-A-1</div>
            <div className="relative  flex-1 bg-gray-900 flex items-center justify-center">
            <div
              className={`absolute top-[55%] left-[66%] w-6 h-6  z-100`}
              jstype="testport-arm" 
              id="RMA-1"
              onClick={() => onPortClick('RMA-1')}
              onMouseEnter={() => onPortHover('RMA-1')}
            >
              
            </div>
            <div className={`w-full h-full bg-[url('/MechanicalArm.png')] bg-contain bg-no-repeat bg-center`}></div>
              
            </div>
        </div>
      </div>

      {/* R-M-A  */}
      <div className="w-[12%] p-1 flex flex-col">
        {/* R-M-A  */}
        <div className="flex-1 flex flex-col">
          
          <div className="text-center mb-1">R-M-A-2</div>
            <div className="relative  flex-1 bg-gray-900 flex items-center justify-center">
            <div
              className={`absolute top-[55%] left-[66%] w-6 h-6  z-100`}
              jstype="testport-arm" 
              id="RMA-2"
              onClick={() => onPortClick('RMA-2')}
              onMouseEnter={() => onPortHover('RMA-2')}
            >
              
            </div>
            <div className={`w-full h-full bg-[url('/MechanicalArm.png')] bg-contain bg-no-repeat bg-center`}></div>
              
            </div>
        </div>
      </div>
      {/* 2F配线架 */}
      <div className="w-[30%] p-1 flex flex-col">
      <div className="text-center mb-1">PLC-Rack</div>
        <div className="h-[calc(100%-1.5rem)] rounded-md p-2 flex flex-col space-y-2">
           {/* Row 1A - taking 1/2 of rack height */}
          <div className="flex flex-col h-1/2 bg-gray-800 rounded-md p-2 relative">
            <div className="absolute top-0 left-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute top-0 right-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute bottom-0 left-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute bottom-0 right-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="flex-1 flex items-center">
              <span className="text-xs mr-4">1A</span>
              <div className="flex-1 flex items-center justify-center space-x-8">
                {[...Array(2)].map((_, i) => (
                  <div key={i} className="flex flex-col items-center">
                    <div 
                      className={`w-10 h-10    transition-colors flex items-center justify-center`}
                      jstype="testport-m12-d" 
                      id={`PLC-Rack-1A-${i + 1}`}
                      onClick={() => onPortClick(`PLC-Rack-1A-${i + 1}`)}
                      onMouseEnter={() => onPortHover(`PLC-Rack-1A-${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">{i + 1}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Row 1B - taking 1/2 of rack height */}
          <div className="flex flex-col h-1/2 bg-gray-800 rounded-md p-2 relative">
            <div className="absolute top-0 left-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute top-0 right-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute bottom-0 left-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute bottom-0 right-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="flex-1 flex items-center">
              <span className="text-xs mr-4">1B</span>
              <div className="flex-1 flex items-center justify-center space-x-8">
                {[...Array(2)].map((_, i) => (
                  <div key={i} className="flex flex-col items-center">
                    <div 
                      className={`w-10 h-10    transition-colors flex items-center justify-center ${getPortStyle(`PLC-Rack-1B-${i + 1}`)}`}
                      jstype="testport-copper" 
                      id={`PLC-Rack-1B-${i + 1}`}
                      onClick={() => onPortClick(`PLC-Rack-1B-${i + 1}`)}
                      onMouseEnter={() => onPortHover(`PLC-Rack-1B-${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">{i + 1}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

        </div>
      </div>

      {/* Data-Rack */}
      <div className="w-[48%] p-1 flex flex-col">
        <div className="text-center mb-1">Data-Rack</div>
        <div className="h-[calc(100%-1.5rem)] rounded-md p-2 flex flex-col space-y-2">
          {/* Row 1A - taking 1/2 of rack height */}
          <div className="flex flex-col h-1/2 bg-gray-800 rounded-md p-2 relative">
            <div className="absolute top-0 left-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute top-0 right-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute bottom-0 left-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="absolute bottom-0 right-0 bg-white w-3 h-3 rounded-full"></div>
            <div className="flex-1 flex items-center">
              <span className="text-xs mr-4">1A</span>
              <div className="flex-1 flex items-center justify-center space-x-4">
                {[...Array(8)].map((_, i) => (
                  <div key={i} className="flex flex-col items-center">
                    <div 
                      className={`w-10 h-10    transition-colors flex items-center justify-center ${getPortStyle(`1F-RackA-1A-${i + 1}`)}`}
                      jstype="testport-copper" 
                      id={`1F-RackA-1A-${i + 1}`}
                      onClick={() => onPortClick(`1F-RackA-1A-${i + 1}`)}
                      onMouseEnter={() => onPortHover(`1F-RackA-1A-${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">{i + 1}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

           {/* Network Switch */}
          <div className="flex flex-col h-1/2 bg-gray-900 rounded-md p-2 relative border border-gray-700">
                            {/* Switch Top Area - Brand and Status LEDs */}
                            <div className="h-8 flex items-center justify-between px-2 border-b border-gray-700">
                              <div className="text-blue-500 font-bold text-sm">SWITCH</div>
                              <div className="flex space-x-2">
                                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                                <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
                                <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                                <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
                              </div>
                            </div>
                            
                            {/* Switch Port Area */}
                            <div className="flex-1 flex flex-row">
                              {/* Left Side - RJ45 Ports (80%) */}
                              <div className="w-4/6 flex flex-col">
                                {/* Port Labels */}
                                <div className="flex justify-between px-4 text-xs text-gray-400">
                                  <span>10/100/1000 Base-T</span>
                                  <span>1-20</span>
                                </div>
                                
                                {/* Top Row Ports (1-10) - RJ45 */}
                                <div className="flex-1 flex items-center justify-center">
                                  <div className="grid grid-cols-10 gap-0.5 w-full">
                                    {[...Array(10)].map((_, i) => (
                                      <div key={i} className="flex flex-col items-center">
                                        <div 
                                          className="w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center transition-colors"
                                          jstype="" 
                                          id={`SW-TOP-${i + 1}`}
                                        >
                                          <div className="w-4 h-4 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center"></div>
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                </div>
                                
                                {/* Bottom Row Ports (11-20) - RJ45 */}
                                <div className="flex-1 flex items-center justify-center">
                                  <div className="grid grid-cols-10 gap-0.5 w-full">
                                    {[...Array(10)].map((_, i) => (
                                      <div key={i} className="flex flex-col items-center">
                                        <div 
                                          className="w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center transition-colors"
                                          jstype="" 
                                          id={`SW-BOT-${i + 1}`}
                                        >
                                          <div className="w-4 h-4 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center"></div>
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                </div>
                              </div>
                              
                              {/* Right Side - Fiber Ports (20%) */}
                              <div className="w-2/6 flex flex-col">
                                {/* Fiber Port Labels */}
                                <div className="flex justify-between px-1 text-xs text-gray-400">
                                  <span>SFP+</span>
                                  <span>21-24</span>
                                </div>
                                
                                {/* Top Row Fiber Ports (21-22) */}
                                <div className="flex-1 flex items-center justify-center">
                                <div className="flex space-x-4"> {/* 使用 space-x-4 添加水平间距 */}
                                  {[...Array(2)].map((_, i) => (
                                    <div key={i} className="flex justify-center">
                                      <div 
                                        className="w-10 h-5 border border-gray-600 rounded-sm flex items-center justify-center transition-colors"
                                      >
                                        <div className="flex">
                                          <div className="w-4 h-4 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center"></div>
                                          <div className="w-4 h-4 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center"></div>
                                        </div>
                                      </div>
                                    </div>
                                  ))}
                                </div>
                              </div>
                                
                                {/* Bottom Row Fiber Ports (23-24) */}
                                <div className="flex-1 flex items-center justify-center">
                                <div className="flex space-x-4"> {/* 使用 space-x-4 添加水平间距 */}
                                  {[...Array(2)].map((_, i) => (
                                    <div key={i} className="flex justify-center">
                                      <div 
                                        className="w-10 h-5 border border-gray-600 rounded-sm flex items-center justify-center transition-colors"
                                      >
                                        <div className="flex">
                                          <div className="w-4 h-4 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center"
                                          ></div>
                                          <div className="w-4 h-4 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center"
                                          ></div>
                                        </div>
                                      </div>
                                    </div>
                                  ))}
                                </div>
                              </div>


                              </div>
                            </div>
                            
                            {/* Switch Bottom Area - Console and Power */}
                            <div className="h-6 flex items-center justify-between px-2 border-t border-gray-700">
                              <div className="flex items-center space-x-2">
                                <div className="text-xs text-gray-400">Console</div>
                                <div className="w-4 h-2 bg-gray-600 rounded-sm"></div>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="text-xs text-gray-400">Power</div>
                                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                              </div>
                            </div>

          </div>

        </div>
      </div>
      

    </div>
    
    </div>
  );
}