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

export default function IndustryTask() {
    const { faultScenarios } = useDeviceStore();
    const [connections, setConnections] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchConnectionMap = async () => {
            try {
                setLoading(true);
                setError(null);
                const response = await fetch(API_URLS.CONNECTION.MAP_WITH_SCENE(faultScenarios));
                if (!response.ok) {
                    throw new Error('获取连接配置失败');
                }
                const data = await response.json();
                const formattedConnections = Object.entries(data || {})
                    .filter(([portId]) => (
                        !portId.includes('main-permanent') && 
                        !portId.includes('main-channel') &&
                        !portId.includes('remote-channel') &&
                        !portId.includes('main-cfp-sm-out') &&
                        !portId.includes('main-cfp-mm-out') &&
                        !portId.includes('main-cfp-in') &&
                        !portId.includes('remote-cfp-sm-out') &&
                        !portId.includes('remote-cfp-mm-out') &&
                        !portId.includes('remote-cfp-in')
                    ))
                    .map(([source, connection]) => ({
                    room: source,
                    rack: connection.connectedTo
                }));
                setConnections(formattedConnections);
            } catch (err) {
                setError(err.message);
                console.error('获取连接配置错误:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchConnectionMap();
    }, [faultScenarios?.currentScene]);

  return (
    <div className="bg-gradient-to-br from-[#1E293B] to-[#0F172A] p-6 rounded-lg w-[full] h-[80vh] overflow-y-auto flex flex-col gap-6 shadow-2xl border border-[#334155] animate-fadeIn scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-slate-800">

      {/* 任务标题 */}
      <div className="border-b border-cyan-700 pb-3 mb-3">
        <p className="text-sm font-semibold text-cyan-400 uppercase tracking-wider">新任务单</p>
        <h1 className="text-2xl md:text-3xl font-bold text-gray-100 mt-1">任务要求：工业网络链路认证</h1>
        <p className="text-xs text-gray-400">任务编号: SIM-IND-NTW-007 </p>
        <p className="text-xs text-gray-400">地点: 智能制造产业园 - 自动化生产线</p>
      </div>

      {/* 情况说明 */}
      <div className="space-y-3">
        <h2 className="text-xl font-semibold text-cyan-300">情况说明</h2>

        <p className="text-gray-300 leading-relaxed">
          智能制造产业园正在进行<span className="font-medium text-yellow-300">自动化生产线网络升级</span>工程。新的工业以太网基础设施已完成安装，连接了<span className="font-medium text-yellow-300">4个关键控制设备（Device X）</span>与中央控制室的<span className="font-medium text-yellow-300">工业网络机柜（Cabinet）</span>。
        </p>
        <div className=" h-100 relative">
          <Image src="/Industry.png" alt="industry" fill className="object-contain"/>
        </div>
        <p className="text-gray-300 leading-relaxed">
          为确保生产线的稳定运行，需要对所有工业网络链路进行<span className="font-semibold text-red-400">严格的物理层认证测试</span>。这些链路必须满足<span className="font-medium text-yellow-300">Cat 6 F/UTP</span>标准，以支持高速数据传输和抗干扰要求。任何链路故障都可能导致生产线停机。
        </p>
      </div>

      {/* 任务目标 */}
      <div className="space-y-3">
        <h2 className="text-xl font-semibold text-cyan-300">任务目标</h2>
        <ul className="list-disc list-inside text-gray-300 space-y-2 pl-4">
          <li>
            <strong className="text-gray-100">环境评估：</strong> 识别<span className="font-medium text-yellow-300">4条工业网络链路</span>（连接 Device X-Y 与Cabinet 的配线架）。
          </li>
          <li>
            <strong className="text-gray-100">测试准备：</strong> 使用<span className="font-medium text-yellow-300">DSX 网络认证分析仪</span>，确保测试参数符合工业环境要求。
          </li>
          <li>
            <strong className="text-gray-100">认证测试：</strong> 执行<span className="font-medium text-yellow-300">TIA 1005 </span>标准测试，重点关注<span className="font-medium text-yellow-300">串扰(Crosstalk)</span>和<span className="font-medium text-yellow-300">电磁干扰(EMI)抗性，至少需要保证E2等级</span>。
          </li>
          <li>
            <strong className="text-gray-100">数据分析：</strong> 评估测试结果，确认链路状态为<span className="font-semibold text-green-400">合格(PASS)</span>或<span className="font-semibold text-red-400">不合格(FAIL*)</span>。
          </li>
          <li>
            <strong className="text-gray-100">故障诊断：</strong> 对于不合格链路，使用<span className="font-medium text-yellow-300">高级诊断工具</span>定位故障点，特别注意工业环境特有的干扰源。
          </li>
          <li>
            <strong className="text-gray-100">报告记录：</strong> 按指定格式保存测试结果：<code className="bg-gray-700 px-1.5 py-0.5 rounded text-xs text-yellow-300">[主机连接端口]-[远端连接端口]</code> (示例：<code className="bg-gray-700 px-1.5 py-0.5 rounded text-xs text-yellow-300">Device1-1-Cabinet-A1</code>)。
          </li>
        </ul>
      </div>

      {/* 链路概览 */}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-cyan-300">工业链路概览</h3>
        <p className="text-gray-300">需要测试的工业网络链路包括各控制区域与中央控制室之间的连接。每条链路都配备了工业级屏蔽接头。</p>
        <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-gray-400 pl-4">
          {loading ? (
            <p>加载中...</p>
          ) : error ? (
            <p className="text-red-400">{error}</p>
          ) : (
            connections.map(link => (
              <p key={link.rack}>
                <code className="text-yellow-400">{link.room}</code> &lt;--&gt; 
                <code className="text-yellow-400">{link.rack}</code>
              </p>
            ))
          )}
        </div>
      </div>

      {/* 最终指示 */}
      <div className="mt-4 border-t border-cyan-700 pt-4">
        <p className="text-lg font-semibold text-gray-100">开始工业网络测试</p>
        <p className="text-gray-300">请严格按照工业标准进行测试。记住，这些网络链路的可靠性直接关系到生产线的正常运转。</p>
        <p className="mt-2 text-cyan-400 font-medium">确保安全，祝你测试顺利！</p>
      </div>

    </div>
  );
}