'use client'

/**
 * NemoNodeAnimation - NemoClaw 截圖風格節點動畫
 * ================================================
 * 72×72 SVG，白底圓形 + 漸層藍球（orb-pulse）
 * 4 主臂 + 4 斜臂 + 白色端點節點
 * 虛線旋轉軌道環（ring-spin 12s）
 * ❌ 禁止使用 openclaw-panel.tsx 的龍蝦臂 SVG
 */

export function NemoNodeAnimation({ size = 72 }: { size?: number }) {
  const id = 'nemo-node'
  return (
    <>
      <style>{`
        @keyframes orb-pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50%       { transform: scale(1.12); opacity: 0.85; }
        }
        @keyframes ring-spin {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }
        .orb-pulse-anim {
          animation: orb-pulse 2s ease-in-out infinite;
          transform-origin: 36px 36px;
        }
        .ring-spin-anim {
          animation: ring-spin 12s linear infinite;
          transform-origin: 36px 36px;
        }
      `}</style>
      <svg
        width={size}
        height={size}
        viewBox="0 0 72 72"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <radialGradient id={`${id}-orbGrad`} cx="40%" cy="35%" r="60%">
            <stop offset="0%" stopColor="#7AB8F5" />
            <stop offset="100%" stopColor="#2B6CB0" />
          </radialGradient>
        </defs>

        {/* 白底圓形背景 */}
        <circle cx="36" cy="36" r="34" fill="white" stroke="#c8dcf5" strokeWidth="0.8" />

        {/* 4 主臂（solid #4A90D9，opacity 0.7）*/}
        <line x1="36" y1="36" x2="36" y2="8"  stroke="#4A90D9" strokeWidth="1.5" opacity="0.7" />
        <line x1="36" y1="36" x2="64" y2="36" stroke="#4A90D9" strokeWidth="1.5" opacity="0.7" />
        <line x1="36" y1="36" x2="36" y2="64" stroke="#4A90D9" strokeWidth="1.5" opacity="0.7" />
        <line x1="36" y1="36" x2="8"  y2="36" stroke="#4A90D9" strokeWidth="1.5" opacity="0.7" />

        {/* 4 斜臂（細，opacity 0.35）*/}
        <line x1="36" y1="36" x2="56" y2="16" stroke="#4A90D9" strokeWidth="1" opacity="0.35" />
        <line x1="36" y1="36" x2="56" y2="56" stroke="#4A90D9" strokeWidth="1" opacity="0.35" />
        <line x1="36" y1="36" x2="16" y2="56" stroke="#4A90D9" strokeWidth="1" opacity="0.35" />
        <line x1="36" y1="36" x2="16" y2="16" stroke="#4A90D9" strokeWidth="1" opacity="0.35" />

        {/* 虛線旋轉軌道環 */}
        <circle
          cx="36" cy="36" r="20"
          fill="none"
          stroke="#4A90D9"
          strokeWidth="0.8"
          strokeDasharray="3,2.5"
          opacity="0.5"
          className="ring-spin-anim"
        />

        {/* 主臂端點節點（r=3，白底+藍邊）*/}
        <circle cx="36" cy="8"  r="3" fill="white" stroke="#4A90D9" strokeWidth="1.2" />
        <circle cx="64" cy="36" r="3" fill="white" stroke="#4A90D9" strokeWidth="1.2" />
        <circle cx="36" cy="64" r="3" fill="white" stroke="#4A90D9" strokeWidth="1.2" />
        <circle cx="8"  cy="36" r="3" fill="white" stroke="#4A90D9" strokeWidth="1.2" />

        {/* 斜臂端點節點（r=2，白底+藍邊）*/}
        <circle cx="56" cy="16" r="2" fill="white" stroke="#4A90D9" strokeWidth="1" />
        <circle cx="56" cy="56" r="2" fill="white" stroke="#4A90D9" strokeWidth="1" />
        <circle cx="16" cy="56" r="2" fill="white" stroke="#4A90D9" strokeWidth="1" />
        <circle cx="16" cy="16" r="2" fill="white" stroke="#4A90D9" strokeWidth="1" />

        {/* 中央漸層藍球（orb-pulse 脈動）*/}
        <circle
          cx="36" cy="36" r="9"
          fill={`url(#${id}-orbGrad)`}
          className="orb-pulse-anim"
        />
        {/* 高光 */}
        <circle cx="33" cy="33" r="3" fill="white" opacity="0.35" />
      </svg>
    </>
  )
}

export default NemoNodeAnimation
