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


export default function WorldSkill({ 
  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();



  // 从localStorage加载清洁状态
  const loadCleanState = () => {
    if (!seatUUID) return;
    
    const lccleanStates = JSON.parse(localStorage.getItem(`cleanState_${seatUUID}_lc`) || '{}');
    
    // 恢复LC端口状态
    document.querySelectorAll('[lcclean]').forEach(el => {
      const elementId = el.id;
      if (elementId && lccleanStates[elementId] !== undefined) {
        el.setAttribute('lcclean', lccleanStates[elementId].toString());
      }
    });
  };
  
  // 监听seatUUID变化
  useEffect(() => {
    if (seatUUID) {
      // 使用setTimeout确保DOM元素已加载
      setTimeout(loadCleanState, 500);
    }
  }, [seatUUID]);

  return (
    <div>
    {/* 办公区域  */}
    <div className="h-full w-full bg-black text-white flex z-index-100">


      {/* Room */}
      <div className="w-[12%] p-1 flex flex-col">
        {/* Room 1 - 上半部分 */}
        <div className="flex-1 flex flex-col">
          <div className="text-center mb-1">Room1</div>
          <div className="flex-1 bg-gray-900 flex items-center justify-center">
            <div className="bg-gray-300 w-24 h-24 flex items-center justify-center">
              <div className="flex space-x-2">
                <div className="flex flex-col items-center">
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Room1-TO-1')}`}
                    jstype="testport-copper" 
                    id="Room1-TO-1"
                    onClick={() => onPortClick('Room1-TO-1')}
                    onMouseEnter={() => onPortHover('Room1-TO-1')}
                  >
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                  <span className="text-xs mt-1 text-black">TO-1</span>
                </div>
                <div className="flex flex-col items-center">
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Room1-TO-2')}`}
                    jstype="testport-copper" 
                    id="Room1-TO-2"
                    onClick={() => onPortClick('Room1-TO-2')}
                    onMouseEnter={() => onPortHover('Room1-TO-2')}
                  >
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                  <span className="text-xs mt-1 text-black">TO-2</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        {/* Room 3 - 下半部分 */}
        <div className="flex-1 flex flex-col">
          <div className="text-center mb-1">Room3</div>
          <div className="flex-1 bg-gray-900 flex items-center justify-center">
            <div className="bg-gray-300 w-24 h-24 flex items-center justify-center">
              <div className="flex space-x-2">
                <div className="flex flex-col items-center">
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Room3-TO-1')}`}
                    jstype="testport-copper" 
                    id="Room3-TO-1"
                    onClick={() => onPortClick('Room3A-TO-1')}
                    onMouseEnter={() => onPortHover('Room3-TO-1')}
                  >
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                  <span className="text-xs mt-1 text-black">TO-1</span>
                </div>
                <div className="flex flex-col items-center">
                  <div 
                    className={`rounded-full flex items-center justify-center transition-colors ${getPortStyle('Room3-TO-2')}`}
                    jstype="testport-copper" 
                    id="Room3-TO-2"
                    onClick={() => onPortClick('Room3-TO-2')}
                    onMouseEnter={() => onPortHover('Room3-TO-2')}
                  >
                    <div className={`w-8 h-8 bg-[url('/rj45.png')] bg-contain bg-no-repeat bg-center`}></div>
                  </div>
                  <span className="text-xs mt-1 text-black">TO-2</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Room 4 */}
      <div className="w-[12%] p-1 flex flex-col">
        {/* Room 1A - 上半部分 */}
        <div className="flex-1 flex flex-col">
          
          <div className="text-center mb-1">Room4</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-cam" 
              id="Room4-CAM"
              onClick={() => onPortClick('Room4-CAM')}
              onMouseEnter={() => onPortHover('Room4-CAM')}
            >
              
            </div>
            <div className={`w-full h-full bg-[url('/cam.png')] bg-contain bg-no-repeat bg-center`}></div>
              
            </div>
        </div>
      </div>
      {/* 2F配线架 */}
      <div className="w-[24%] p-1 flex flex-col">
      <div className="text-center mb-1">2F-RackA</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-6">
                {[...Array(3)].map((_, groupIndex) => (
                  <div key={groupIndex} className="flex">
                    {[0, 1].map((portIndex) => {
                      const portId = `2F-RackA-1A-${groupIndex * 2 + portIndex + 1}`;
                      const portNumber = groupIndex * 2 + portIndex + 1;
                      return (
                        <div key={portIndex} className="flex flex-col items-center">
                          <div 
                            className={`mb-1 transition-colors flex items-center justify-center`}
                          >
                            <div 
                              className={`w-8 h-8 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center cursor-pointer`}
                              jstype="testport-fiber" 
                              lcclean="false"
                              id={portId}
                              onClick={() => onPortClick(portId)}
                              onMouseEnter={() => onPortHover(portId)}
                            ></div>
                          </div>
                          <span className="text-xs">{portNumber}</span>
                        </div>
                      );
                    })}
                  </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-6">
                {[...Array(3)].map((_, groupIndex) => (
                  <div key={groupIndex} className="flex">
                    {[0, 1].map((portIndex) => {
                      const portId = `2F-RackA-1B-${groupIndex * 2 + portIndex + 1}`;
                      const portNumber = groupIndex * 2 + portIndex + 1;
                      return (
                        <div key={portIndex} className="flex flex-col items-center">
                          <div 
                            className={`mb-1 transition-colors flex items-center justify-center`}
                          >
                            <div 
                              className={`w-8 h-8 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center cursor-pointer`}
                              jstype="testport-fiber" 
                              lcclean="false"
                              id={portId}
                              onClick={() => onPortClick(portId)}
                              onMouseEnter={() => onPortHover(portId)}
                            ></div>
                          </div>
                          <span className="text-xs">{portNumber}</span>
                        </div>
                      );
                    })}
                  </div>
                ))}
              </div>
              </div>
          </div>

        </div>
      </div>

      {/* 1F DataCenter */}
      <div className="w-[50%] p-1 flex flex-col">
        <div className="text-center mb-1">1F-RackA</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/3 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(12)].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>

          {/* 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-6">
                {[...Array(6)].map((_, groupIndex) => (
                  <div key={groupIndex} className="flex">
                    {[0, 1].map((portIndex) => {
                      const portId = `1F-RackA-1B-${groupIndex * 2 + portIndex + 1}`;
                      const portNumber = groupIndex * 2 + portIndex + 1;
                      return (
                        <div key={portIndex} className="flex flex-col items-center">
                          <div 
                            className={`mb-1 transition-colors flex items-center justify-center`}
                          >
                            <div 
                              className={`w-8 h-8 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center cursor-pointer`}
                              jstype="testport-fiber" 
                              lcclean="false"
                              id={portId}
                              onClick={() => onPortClick(portId)}
                              onMouseEnter={() => onPortHover(portId)}
                            ></div>
                          </div>
                          <span className="text-xs">{portNumber}</span>
                        </div>
                      );
                    })}
                  </div>
                ))}
              </div>
            </div>
          </div>
          {/* Row 1C - 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">1C</span>
              <div className="flex-1 flex items-center justify-center space-x-6">
                {[...Array(6)].map((_, groupIndex) => (
                  <div key={groupIndex} className="flex">
                    {[0, 1].map((portIndex) => {
                      const portId = `1F-RackA-1C-${groupIndex * 2 + portIndex + 1}`;
                      const portNumber = groupIndex * 2 + portIndex + 1;
                      return (
                        <div key={portIndex} className="flex flex-col items-center">
                          <div 
                            className={`mb-1 transition-colors flex items-center justify-center`}
                          >
                            <div 
                              className={`w-8 h-8 bg-[url('/lc.png')] bg-contain bg-no-repeat bg-center cursor-pointer`}
                              jstype="testport-fiber" 
                              lcclean="false"
                              id={portId}
                              onClick={() => onPortClick(portId)}
                              onMouseEnter={() => onPortHover(portId)}
                            ></div>
                          </div>
                          <span className="text-xs">{portNumber}</span>
                        </div>
                      );
                    })}
                  </div>
                ))}
              </div>
            </div>
          </div>

        </div>
      </div>
      
      {/* 竞技模式场景切换 */}
          
          <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-101 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('WORKSHOP')}
            >
              <div className="text-xs leading-tight text-center">
                前往<br/>车间
              </div>
            </button>
          </div>
    </div>
    
    </div>
  );
}