import {
  X,
  MessageSquare,
  ScrollText,
  Activity,
  TrendingUp,
  ShieldAlert,
  Cpu,
  Zap,
} from "lucide-react";
import { useState, useRef, useEffect } from "react";

interface ZenWorkspaceProps {
  status: Record<string, unknown>;
  state: Record<string, unknown>;
  onExit: () => void;
}

export default function ZenWorkspace({ status, state, onExit }: ZenWorkspaceProps) {
  const [activePanel, setActivePanel] = useState<"chat" | "logs" | "whiteboard" | "server" | null>(
    null,
  );
  const [chatInput, setChatInput] = useState("");
  const [chatHistory, setChatHistory] = useState([
    { role: "lobster", text: "老板，欢迎来到您的私人量化工作室！今日行情已就绪，随时可以开始。" },
  ]);
  const chatEndRef = useRef<HTMLDivElement>(null);

  // 浮动粒子系统
  const [particles, setParticles] = useState<
    { id: number; x: number; y: number; text: string; color: string }[]
  >([]);

  const handleSendMessage = async () => {
    if (!chatInput.trim()) {
      return;
    }

    const userText = chatInput;
    const newHistory = [...chatHistory, { role: "user", text: userText }];
    setChatHistory(newHistory);
    setChatInput("");

    if (activePanel !== "chat") {
      setActivePanel("chat");
    }

    try {
      const apiUrl = import.meta.env.DEV ? "http://127.0.0.1:18790/api/chat" : "/api/chat";
      const res = await fetch(apiUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text: userText }),
      });
      const data = await res.json();
      if (data.success) {
        setChatHistory([...newHistory, { role: "lobster", text: data.reply }]);
      } else {
        setChatHistory([...newHistory, { role: "lobster", text: "终端信号干扰，连接中断..." }]);
      }
    } catch {
      setChatHistory([
        ...newHistory,
        { role: "lobster", text: "网络好像有点波动，老板请检查网关！" },
      ]);
    }
  };

  useEffect(() => {
    if (activePanel === "chat") {
      chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }
  }, [chatHistory, activePanel]);

  const isEngineRunning = Boolean(status?.isRunning);
  const riskLevel = String(state?.riskLevel || "平衡");
  const hasPosition = Boolean(state?.positionOpen);
  const positionSide = String(state?.positionSide || "");
  const hasReview = Number(status?.reviewPending || 0) > 0;
  const mt5Ok = Boolean(status?.mt5Online);
  const light = String(status?.light || "YELLOW");

  // 数据粒子动画效果（模拟服务器运算和数据流）
  useEffect(() => {
    if (isEngineRunning) {
      const interval = setInterval(() => {
        if (Math.random() > 0.6) {
          const newParticle = {
            id: Date.now(),
            x: 74 + Math.random() * 5, // 限制在右侧机柜区域内 (74% - 79%)
            y: 20 + Math.random() * 15, // 限制在机柜高度内 (20% - 35%)
            text: Math.random() > 0.5 ? "1" : "0",
            color: "text-cyan-400",
          };
          setParticles((p) => [...p.slice(-15), newParticle]);
        }
      }, 800);
      return () => clearInterval(interval);
    }
  }, [isEngineRunning]);

  // 决定龙虾的位置
  let lobsterPosition = "desk";
  let lobsterAction = "终端待命中…";

  if (isEngineRunning && !hasPosition) {
    lobsterPosition = "desk";
    lobsterAction = mt5Ok ? "正在全速监控数据流…" : "尝试重连 MT5 网关…";
  } else if (hasPosition) {
    lobsterPosition = "board";
    lobsterAction = `持仓管理中：${positionSide === "BUY" ? "多头护航" : "空头狙击"}`;
  } else if (!isEngineRunning) {
    lobsterPosition = "couch";
    lobsterAction = "Zzz… 算力休眠中";
  }

  if (hasReview) {
    lobsterPosition = "desk";
    lobsterAction = "老板，有紧急交易信号需要您复核！";
  }

  if (light === "RED") {
    lobsterAction = "警报！波动率异常，已切安全态…";
  } else if (light === "YELLOW" && isEngineRunning) {
    lobsterAction = "谨慎模式：正在评估市场点差…";
  }

  // 环境光效 (情绪价值映射)
  let ambientColor = "bg-transparent";
  if (!isEngineRunning) {
    ambientColor = "bg-blue-900/30"; // 休眠冷色调
  } else if (light === "RED") {
    ambientColor = "bg-red-900/20"; // 警报红色调
  } else if (hasPosition) {
    ambientColor = "bg-green-900/10"; // 持仓盈利暖色调
  } else {
    ambientColor = "bg-cyan-900/10"; // 正常运行科技蓝
  }

  // 与龙虾互动
  const handlePokeAgent = () => {
    const reactions = [
      "老板，别戳了，行情要跑了！",
      "算力引擎满载中，请指示！",
      "❤️ 收到老板的鼓励！",
      "需要为您调整风控参数吗？",
    ];
    const reply = reactions[Math.floor(Math.random() * reactions.length)];
    setChatHistory((prev) => [...prev, { role: "lobster", text: reply }]);
    if (activePanel !== "chat") {
      setActivePanel("chat");
    }

    // 互动粒子
    setParticles((p) => [
      ...p,
      { id: Date.now(), x: 52, y: 50, text: "❤️", color: "text-red-500 animate-ping" },
    ]);
  };

  return (
    <div
      className="fixed inset-0 z-50 bg-[#0A0E17] font-mono overflow-hidden"
      style={{ fontFamily: "'DotGothic16', monospace" }}
    >
      {/* 专业级 HUD 顶部状态栏 */}
      <div className="absolute top-0 left-0 right-0 h-10 bg-black/60 backdrop-blur-md border-b border-cyan-900/50 flex items-center px-6 justify-between text-xs text-cyan-500 z-50 shadow-[0_0_15px_rgba(6,182,212,0.1)]">
        <div className="flex items-center gap-6">
          <span className="flex items-center gap-2 font-bold text-cyan-300 tracking-widest">
            <Activity className="w-4 h-4" />
            OPENCLAW QUANT STUDIO
          </span>
          <div className="h-4 w-[1px] bg-cyan-900"></div>
          <span className="flex items-center gap-2">
            STATUS:
            <span className={isEngineRunning ? "text-green-400" : "text-slate-500"}>
              {isEngineRunning ? "ONLINE" : "OFFLINE"}
            </span>
          </span>
          <span className="flex items-center gap-2">
            RISK: <span className="text-yellow-400">{riskLevel.toUpperCase()}</span>
          </span>
        </div>
        <div className="flex items-center gap-6">
          {hasPosition && (
            <span
              className={`flex items-center gap-1 ${positionSide === "BUY" ? "text-green-400" : "text-red-400"} animate-pulse`}
            >
              {positionSide === "BUY" ? (
                <TrendingUp className="w-4 h-4" />
              ) : (
                <TrendingUp className="w-4 h-4 rotate-180" />
              )}
              ACTIVE {positionSide}
            </span>
          )}
          <span className="font-mono text-cyan-600">
            SYS_TIME: {new Date().toLocaleTimeString()}
          </span>
        </div>
      </div>

      {/* 核心场景区: 16:9 全图无损渲染 */}
      <div className="absolute inset-0 pt-10 flex justify-center items-center overflow-hidden">
        <div className="relative w-full h-full aspect-video max-h-screen max-w-[calc(100vh*16/9)] shadow-[0_0_50px_rgba(0,0,0,0.8)]">
          <img
            src="/trade-bg.png"
            alt="Workspace"
            className="w-full h-full object-contain block select-none pointer-events-none"
            draggable={false}
          />

          {/* 环境氛围光效蒙版 */}
          <div
            className={`absolute inset-0 pointer-events-none mix-blend-overlay transition-colors duration-1000 ${ambientColor}`}
          ></div>

          {/* ================= 动态场景元素 ================= */}

          {/* 电脑屏幕动态矩阵代码效 (左侧桌子) */}
          {isEngineRunning && (
            <div className="absolute top-[41%] left-[10.5%] w-[4.5%] h-[7%] pointer-events-none flex flex-col gap-1 opacity-80 transform skew-y-2">
              <div className="w-full h-full bg-cyan-900/30 border border-cyan-400/20 rounded overflow-hidden relative shadow-[0_0_10px_rgba(6,182,212,0.3)]">
                <div className="absolute top-0 w-full h-[2px] bg-cyan-300 shadow-[0_0_8px_#0ff] animate-[bounce_2s_infinite]"></div>
                <div className="text-[4px] text-cyan-400 leading-none opacity-50 font-mono mt-1 ml-0.5">
                  SYS.INIT
                  <br />
                  LOADING
                  <br />
                  DATA...
                </div>
              </div>
            </div>
          )}

          {/* 服务器动态呼吸灯 (右侧机柜) */}
          <div className="absolute top-[28%] left-[78%] w-[5%] h-[12%] pointer-events-none flex flex-col gap-1.5 opacity-90">
            <div className="flex justify-around px-1">
              <div
                className={`w-1.5 h-1.5 rounded-full ${isEngineRunning ? "bg-cyan-400 shadow-[0_0_5px_#0ff] animate-ping" : "bg-slate-700"}`}
              ></div>
              <div
                className={`w-1.5 h-1.5 rounded-full ${mt5Ok ? "bg-green-400 shadow-[0_0_5px_#0f0] animate-pulse" : "bg-red-500 shadow-[0_0_5px_#f00]"}`}
              ></div>
            </div>
            <div className="flex justify-around px-1 mt-1">
              <div
                className={`w-1.5 h-1.5 rounded-full ${light === "RED" ? "bg-red-500 shadow-[0_0_5px_#f00] animate-bounce" : "bg-slate-700"}`}
              ></div>
              <div className="w-1.5 h-1.5 rounded-full bg-yellow-400/50"></div>
            </div>
          </div>

          {/* 浮动数据粒子 */}
          {particles.map((p) => (
            <div
              key={p.id}
              className={`absolute font-bold text-sm pointer-events-none transition-all duration-1000 ease-out animate-in fade-in slide-in-from-bottom-4 ${p.color}`}
              style={{ left: `${p.x}%`, top: `${p.y}%`, textShadow: "0 0 5px currentColor" }}
            >
              {p.text}
            </div>
          ))}

          {/* ================= 热区：可点击的家具实体 ================= */}

          {/* 1. 策略白板热区 */}
          <div
            onClick={() => setActivePanel("whiteboard")}
            className="absolute top-[16%] left-[8%] w-[20%] h-[22%] cursor-pointer group z-30"
            title="查看交易策略白板"
          >
            <div className="absolute inset-0 border-2 border-cyan-400/0 group-hover:border-cyan-400/50 group-hover:bg-cyan-400/10 rounded-lg transition-all shadow-[0_0_15px_rgba(6,182,212,0)] group-hover:shadow-[0_0_15px_rgba(6,182,212,0.3)]"></div>
          </div>

          {/* 2. 沙发区热区 */}
          <div
            onClick={() => setActivePanel("logs")}
            className="absolute top-[58%] left-[44%] w-[18%] h-[20%] cursor-pointer group z-30"
            title="系统日志与复盘"
          >
            <div className="absolute inset-0 border-2 border-blue-400/0 group-hover:border-blue-400/50 group-hover:bg-blue-400/10 rounded-lg transition-all"></div>
          </div>

          {/* 3. 服务器机柜热区 */}
          <div
            onClick={() => setActivePanel("server")}
            className="absolute top-[14%] left-[72%] w-[20%] h-[32%] cursor-pointer group z-30"
            title="检查服务器与算力"
          >
            <div className="absolute inset-0 border-2 border-green-400/0 group-hover:border-green-400/50 group-hover:bg-green-400/10 rounded-lg transition-all"></div>
          </div>

          {/* ================= 虚拟坐标系统：精灵图动画实体 ================= */}
          <div className="absolute inset-0 pointer-events-none z-40">
            <div
              className={`absolute transition-all duration-1000 ease-in-out flex flex-col items-center ${
                lobsterPosition === "couch"
                  ? "top-[58%] left-[54%]" // 微调沙发上的位置
                  : lobsterPosition === "desk"
                    ? "top-[56%] left-[12%]"
                    : lobsterPosition === "board"
                      ? "top-[24%] left-[58%]"
                      : "top-[62%] left-[52%]"
              }`}
            >
              {/* 龙虾角色容器 - 采用游戏引擎级别的 Sprite Sheet 渲染 */}
              <div
                className="relative drop-shadow-[0_15px_25px_rgba(0,0,0,0.9)] cursor-pointer pointer-events-auto hover:scale-105 transition-all duration-300"
                onClick={handlePokeAgent}
                title="点击与 Agent 互动"
              >
                {/* 如果有用户提供的真实序列帧图片，则使用 SpriteAnimator 渲染 */}
                {/* 当前占位：您可以将真实的序列帧图命名为 lobster_idle_sheet.png 放到 public 目录下 */}
                <img
                  src={
                    lobsterPosition === "couch"
                      ? "/lobster_couch.png" // 使用用户提供的一只躺着的大龙虾抠图
                      : lobsterPosition === "desk"
                        ? "/lobster_work.svg"
                        : "/lobster_walk.svg"
                  }
                  alt="Lobster Agent"
                  className={`${lobsterPosition === "couch" ? "w-48 h-48 object-contain" : "w-24 h-24 object-contain"}`}
                  style={{
                    transform:
                      lobsterPosition === "desk" || lobsterPosition === "board"
                        ? "scaleX(-1)"
                        : "none",
                    transition: "transform 0.3s ease",
                  }}
                />
              </div>

              {/* 状态气泡 - 升级为复古 RPG 游戏对话框风格 */}
              <div
                className="absolute -top-16 bg-[#F4EBE1] text-[#5C4A3D] text-[14px] px-4 py-3 rounded-md shadow-[0_5px_0_#D4C3A3,0_10px_20px_rgba(0,0,0,0.5)] border-4 border-[#8B4513] whitespace-nowrap opacity-100 font-bold z-50 pointer-events-auto cursor-pointer flex flex-col items-center"
                style={{ fontFamily: "'DotGothic16', monospace", imageRendering: "pixelated" }}
                onClick={() => setActivePanel("chat")}
              >
                <span className="flex items-center gap-2">
                  <div
                    className={`w-2 h-2 rounded-sm ${isEngineRunning ? "bg-green-500 animate-pulse" : "bg-slate-500"}`}
                  ></div>
                  {lobsterAction}
                </span>
                {/* 游戏风格的对话框尾巴 */}
                <div className="absolute -bottom-[14px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[10px] border-t-[#8B4513]"></div>
                <div className="absolute -bottom-[8px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[6px] border-t-[#F4EBE1]"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 顶部右侧：全局功能按钮 (科技风重构) */}
      <div className="absolute top-16 right-6 z-50 flex gap-3">
        <button
          onClick={() => setActivePanel(activePanel === "chat" ? null : "chat")}
          className={`w-10 h-10 bg-[#0A0E17]/80 backdrop-blur-md border border-cyan-900 rounded-lg flex items-center justify-center transition-all hover:border-cyan-400 hover:shadow-[0_0_10px_rgba(6,182,212,0.3)] ${activePanel === "chat" ? "border-cyan-400 text-cyan-300" : "text-cyan-600"}`}
          title="神经通讯"
        >
          <MessageSquare className="w-5 h-5" />
        </button>

        <button
          onClick={() => setActivePanel(activePanel === "logs" ? null : "logs")}
          className={`w-10 h-10 bg-[#0A0E17]/80 backdrop-blur-md border border-cyan-900 rounded-lg flex items-center justify-center transition-all hover:border-cyan-400 hover:shadow-[0_0_10px_rgba(6,182,212,0.3)] ${activePanel === "logs" ? "border-cyan-400 text-cyan-300" : "text-cyan-600"}`}
          title="系统追踪"
        >
          <ScrollText className="w-5 h-5" />
        </button>

        <button
          onClick={onExit}
          className="w-10 h-10 bg-[#0A0E17]/80 backdrop-blur-md border border-red-900/50 rounded-lg flex items-center justify-center transition-all hover:border-red-500 hover:shadow-[0_0_10px_rgba(239,68,68,0.3)] text-red-500/70 hover:text-red-400"
          title="断开连接"
        >
          <X className="w-5 h-5" />
        </button>
      </div>

      {/* 展开的右侧面板 (全息投影风格重构) */}
      <div className="absolute top-32 right-6 z-[60] flex flex-col items-end pointer-events-none">
        {activePanel === "chat" && (
          <div className="w-[380px] max-h-[60vh] bg-[#0A0E17]/85 backdrop-blur-xl border border-cyan-500/30 rounded-xl shadow-[0_0_30px_rgba(6,182,212,0.15)] flex flex-col overflow-hidden animate-in fade-in slide-in-from-right-8 relative pointer-events-auto">
            <button
              onClick={() => setActivePanel(null)}
              className="absolute top-2.5 right-3 text-cyan-600 hover:text-cyan-300 transition-colors z-10"
            >
              <X className="w-4 h-4" />
            </button>
            <div className="bg-cyan-950/40 text-cyan-400 px-4 py-2.5 font-bold border-b border-cyan-500/30 text-xs flex justify-between items-center tracking-widest">
              <span className="flex items-center gap-2">
                <MessageSquare className="w-3 h-3" /> TERMINAL_LINK
              </span>
            </div>
            <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-3 custom-scrollbar">
              {chatHistory.map((msg, idx) => (
                <div
                  key={idx}
                  className={`flex flex-col ${msg.role === "user" ? "items-end" : "items-start"}`}
                >
                  <div
                    className={`max-w-[85%] p-3 rounded-lg text-[13px] leading-relaxed border backdrop-blur-md ${
                      msg.role === "user"
                        ? "bg-cyan-900/30 text-cyan-100 border-cyan-500/40 rounded-tr-none shadow-[0_0_10px_rgba(6,182,212,0.1)]"
                        : "bg-slate-900/50 text-slate-300 border-slate-700 rounded-tl-none"
                    }`}
                  >
                    {msg.text}
                  </div>
                </div>
              ))}
              <div ref={chatEndRef} />
            </div>
            <div className="p-3 bg-black/40 border-t border-cyan-900/50">
              <div className="flex items-center gap-2 bg-[#0A0E17] border border-cyan-900 rounded-lg px-2 h-10 focus-within:border-cyan-500/50 transition-colors">
                <span className="text-cyan-600 font-bold ml-1">{">"}</span>
                <input
                  type="text"
                  value={chatInput}
                  onChange={(e) => setChatInput(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
                  placeholder="输入指令..."
                  className="flex-1 bg-transparent border-none outline-none text-cyan-300 placeholder-cyan-800/50 text-[13px] px-2"
                />
              </div>
            </div>
          </div>
        )}

        {activePanel === "logs" && (
          <div className="w-[450px] h-[50vh] bg-[#0A0E17]/90 backdrop-blur-xl border border-blue-500/30 rounded-xl shadow-[0_0_30px_rgba(59,130,246,0.15)] flex flex-col overflow-hidden animate-in fade-in slide-in-from-right-8 text-left relative pointer-events-auto">
            <button
              onClick={() => setActivePanel(null)}
              className="absolute top-2.5 right-3 text-blue-600 hover:text-blue-300 transition-colors z-10"
            >
              <X className="w-4 h-4" />
            </button>
            <div className="bg-blue-950/40 text-blue-400 px-4 py-2.5 font-bold border-b border-blue-500/30 text-xs flex justify-between items-center tracking-widest pr-10">
              <span className="flex items-center gap-2">
                <ScrollText className="w-3 h-3" /> SYS.DAEMON.LOG
              </span>
              <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse shadow-[0_0_8px_#3b82f6]"></div>
            </div>
            <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-2 custom-scrollbar text-[11px] text-blue-300/80 font-mono">
              <p>[INFO] Engine started. Quantum core initialized.</p>
              <p>
                [INFO] Risk Level: <span className="text-yellow-400">{riskLevel}</span>
              </p>
              <p>
                [INFO] MT5 Bridge:{" "}
                <span className={mt5Ok ? "text-green-400" : "text-red-400"}>
                  {mt5Ok ? "CONNECTED" : "DISCONNECTED"}
                </span>
              </p>
              <p>[INFO] Latency to broker: 12ms</p>
              {hasPosition && (
                <p className="text-yellow-400 bg-yellow-400/10 p-1 rounded border border-yellow-400/20">
                  [WARN] Active Market Exposure: {positionSide}
                </p>
              )}
              <p className="text-blue-500 animate-pulse mt-2">_</p>
            </div>
          </div>
        )}

        {activePanel === "whiteboard" && (
          <div className="w-[400px] bg-[#0A0E17]/90 backdrop-blur-xl border border-yellow-500/30 rounded-xl shadow-[0_0_30px_rgba(234,179,8,0.15)] flex flex-col overflow-hidden animate-in fade-in slide-in-from-right-8 text-left p-6 relative pointer-events-auto">
            <button
              onClick={() => setActivePanel(null)}
              className="absolute top-4 right-4 text-yellow-600 hover:text-yellow-300 transition-colors z-10"
            >
              <X className="w-4 h-4" />
            </button>
            <h3 className="text-sm font-bold text-yellow-400 mb-4 border-b border-yellow-500/30 pb-2 pr-8 flex items-center gap-2 tracking-widest">
              <ShieldAlert className="w-4 h-4" /> RISK_PROTOCOL
            </h3>
            <div className="space-y-4 text-slate-300 text-xs font-mono">
              <div className="flex justify-between border-b border-slate-800 pb-2">
                <span className="text-slate-500">MODE</span>
                <span className="text-yellow-400">{riskLevel}</span>
              </div>
              <div className="flex justify-between border-b border-slate-800 pb-2">
                <span className="text-slate-500">MAX_LOT</span>
                <span className="text-cyan-400">0.05%</span>
              </div>
              <div className="flex justify-between border-b border-slate-800 pb-2">
                <span className="text-slate-500">KILL_SWITCH</span>
                <span className="text-green-400">STANDBY</span>
              </div>
              <div className="flex justify-between border-b border-slate-800 pb-2">
                <span className="text-slate-500">SESSION_PNL</span>
                <span className="text-green-400 drop-shadow-[0_0_5px_#4ade80]">+$124.50</span>
              </div>
              <div className="mt-6 p-3 bg-yellow-950/20 border border-yellow-500/20 rounded text-[10px] text-yellow-500/70 italic text-center">
                "Plan the trade, trade the plan."
              </div>
            </div>
          </div>
        )}

        {activePanel === "server" && (
          <div className="w-[350px] bg-[#0A0E17]/90 backdrop-blur-xl border border-green-500/30 rounded-xl shadow-[0_0_30px_rgba(34,197,94,0.15)] flex flex-col overflow-hidden animate-in fade-in slide-in-from-right-8 text-left p-6 relative pointer-events-auto">
            <button
              onClick={() => setActivePanel(null)}
              className="absolute top-4 right-4 text-green-600 hover:text-green-300 transition-colors z-10"
            >
              <X className="w-4 h-4" />
            </button>
            <h3 className="text-sm font-bold text-green-400 mb-4 border-b border-green-500/30 pb-2 pr-8 flex items-center gap-2 tracking-widest">
              <Cpu className="w-4 h-4" /> NODE_METRICS
            </h3>
            <div className="space-y-4 text-xs font-mono text-slate-300">
              <div className="flex items-center gap-3">
                <div className="w-8 text-slate-500">CPU</div>
                <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                  <div className="h-full bg-green-400 w-[24%] shadow-[0_0_5px_#4ade80]"></div>
                </div>
                <div className="w-8 text-right text-green-400">24%</div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-8 text-slate-500">RAM</div>
                <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                  <div className="h-full bg-cyan-400 w-[42%] shadow-[0_0_5px_#22d3ee]"></div>
                </div>
                <div className="w-8 text-right text-cyan-400">1.2G</div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-8 text-slate-500">NET</div>
                <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                  <div className="h-full bg-blue-400 w-[12%] shadow-[0_0_5px_#60a5fa]"></div>
                </div>
                <div className="w-8 text-right text-blue-400">12ms</div>
              </div>
              <div className="mt-4 pt-4 border-t border-slate-800 flex justify-between items-center">
                <span className="text-slate-500">ZeroMQ Socket</span>
                <span className="text-green-400 flex items-center gap-1">
                  <Zap className="w-3 h-3" /> PUB/SUB READY
                </span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
