'use client'

/**
 * OpenClawPanel - 賽博維運風格 AI 面板
 * =====================================
 * Phase 5: OpenClaw 實體化升級
 *
 * Features:
 * - 3D 骨架機械爪視覺化 (CSS Art)
 * - 核心藍色 LED 脈衝動畫
 * - 點陣字體狀態顯示
 * - AI 思考流過渡動畫
 * - 高通透度 awoooi-glass 效果
 */

import { useState, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { cn } from '@/lib/utils'
import { Sparkles } from 'lucide-react'

// =============================================================================
// Types
// =============================================================================

export type OpenClawStatus =
  | 'patrolling'   // [AGENT] patrolling...
  | 'intercepting' // [SYS] 攔截異常...
  | 'analyzing'    // [SYS] Analyzing blast radius...
  | 'generating'   // [SYS] Generating proposed action...
  | 'complete'     // [SYS] Analysis complete

export interface OpenClawPanelProps {
  status?: OpenClawStatus
  alertType?: string
  onAnalysisComplete?: () => void
  className?: string
}

// =============================================================================
// Status Messages (Dot Matrix Style)
// =============================================================================

const STATUS_MESSAGES: Record<OpenClawStatus, string> = {
  patrolling: '[AGENT] patrolling...',
  intercepting: '[SYS] Intercepting anomaly...',
  analyzing: '[SYS] Analyzing blast radius...',
  generating: '[SYS] Generating proposed action...',
  complete: '[SYS] Analysis complete',
}

// =============================================================================
// NemoClaw 3D Ceramic SVG Component (Lab-White Style)
// =============================================================================

function NemoClaw({ isActive, isPulsing }: { isActive: boolean; isPulsing: boolean }) {
  return (
    <svg
      viewBox="0 0 140 140"
      className="w-full h-full drop-shadow-lg"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        {/* 3D Ceramic gradient - white/cream tones */}
        <linearGradient id="ceramic3d" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FFFFFF" />
          <stop offset="40%" stopColor="#F8F8F8" />
          <stop offset="70%" stopColor="#E8E8E8" />
          <stop offset="100%" stopColor="#D8D8D8" />
        </linearGradient>

        {/* Core glow filter - stronger */}
        <filter id="coreGlow" x="-100%" y="-100%" width="300%" height="300%">
          <feGaussianBlur stdDeviation="6" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>

        {/* Pulse glow animation filter */}
        <filter id="pulseGlow" x="-100%" y="-100%" width="300%" height="300%">
          <feGaussianBlur stdDeviation="8" result="blur">
            <animate attributeName="stdDeviation" values="6;10;6" dur="1.5s" repeatCount="indefinite" />
          </feGaussianBlur>
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>

        {/* Shadow for 3D effect */}
        <filter id="shadow3d" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="2" dy="4" stdDeviation="3" floodOpacity="0.15" />
        </filter>
      </defs>

      {/* Base shadow */}
      <ellipse cx="70" cy="125" rx="35" ry="8" fill="rgba(0,0,0,0.08)" />

      {/* Main body - 3D ceramic sphere */}
      <circle
        cx="70"
        cy="70"
        r="32"
        fill="url(#ceramic3d)"
        filter="url(#shadow3d)"
        stroke="#E0E0E0"
        strokeWidth="1"
      />

      {/* Inner ring - depth effect */}
      <circle
        cx="70"
        cy="70"
        r="26"
        fill="none"
        stroke="#D0D0D0"
        strokeWidth="1"
        opacity="0.5"
      />

      {/* Core LED - Blue pulsing (the eye) */}
      <circle
        cx="70"
        cy="70"
        r="16"
        fill={isActive ? '#4A90D9' : '#B0B0B0'}
        filter={isPulsing ? 'url(#pulseGlow)' : 'url(#coreGlow)'}
        className="transition-all duration-500"
      >
        {isPulsing && (
          <animate
            attributeName="r"
            values="14;17;14"
            dur="1s"
            repeatCount="indefinite"
          />
        )}
      </circle>

      {/* Core highlight */}
      <circle
        cx="70"
        cy="70"
        r="8"
        fill="white"
        opacity={isActive ? 0.9 : 0.4}
        className="transition-opacity duration-300"
      />

      {/* Claw arms - ceramic white 3D style */}
      {/* Top arm */}
      <g filter="url(#shadow3d)">
        <path
          d="M 70 38 L 70 18 L 58 6 M 70 18 L 82 6"
          stroke="url(#ceramic3d)"
          strokeWidth="6"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
        />
        <path
          d="M 70 38 L 70 18 L 58 6 M 70 18 L 82 6"
          stroke={isActive ? '#4A90D9' : '#C0C0C0'}
          strokeWidth="3"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
          opacity="0.6"
        />
        {/* Claw tips */}
        <circle cx="58" cy="6" r="4" fill="url(#ceramic3d)" stroke={isActive ? '#4A90D9' : '#D0D0D0'} strokeWidth="1.5" />
        <circle cx="82" cy="6" r="4" fill="url(#ceramic3d)" stroke={isActive ? '#4A90D9' : '#D0D0D0'} strokeWidth="1.5" />
      </g>

      {/* Left arm */}
      <g filter="url(#shadow3d)">
        <path
          d="M 38 70 L 18 70 L 6 58 M 18 70 L 6 82"
          stroke="url(#ceramic3d)"
          strokeWidth="6"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
        />
        <path
          d="M 38 70 L 18 70 L 6 58 M 18 70 L 6 82"
          stroke={isActive ? '#4A90D9' : '#C0C0C0'}
          strokeWidth="3"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
          opacity="0.6"
        />
        <circle cx="6" cy="58" r="4" fill="url(#ceramic3d)" stroke={isActive ? '#4A90D9' : '#D0D0D0'} strokeWidth="1.5" />
        <circle cx="6" cy="82" r="4" fill="url(#ceramic3d)" stroke={isActive ? '#4A90D9' : '#D0D0D0'} strokeWidth="1.5" />
      </g>

      {/* Right arm */}
      <g filter="url(#shadow3d)">
        <path
          d="M 102 70 L 122 70 L 134 58 M 122 70 L 134 82"
          stroke="url(#ceramic3d)"
          strokeWidth="6"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
        />
        <path
          d="M 102 70 L 122 70 L 134 58 M 122 70 L 134 82"
          stroke={isActive ? '#4A90D9' : '#C0C0C0'}
          strokeWidth="3"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
          opacity="0.6"
        />
        <circle cx="134" cy="58" r="4" fill="url(#ceramic3d)" stroke={isActive ? '#4A90D9' : '#D0D0D0'} strokeWidth="1.5" />
        <circle cx="134" cy="82" r="4" fill="url(#ceramic3d)" stroke={isActive ? '#4A90D9' : '#D0D0D0'} strokeWidth="1.5" />
      </g>

      {/* Bottom left arm */}
      <g filter="url(#shadow3d)">
        <path
          d="M 48 92 L 28 112 L 16 116"
          stroke="url(#ceramic3d)"
          strokeWidth="6"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
        />
        <path
          d="M 48 92 L 28 112 L 16 116"
          stroke={isActive ? '#4A90D9' : '#C0C0C0'}
          strokeWidth="3"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
          opacity="0.6"
        />
        <circle cx="16" cy="116" r="4" fill="url(#ceramic3d)" stroke={isActive ? '#4A90D9' : '#D0D0D0'} strokeWidth="1.5" />
      </g>

      {/* Bottom right arm */}
      <g filter="url(#shadow3d)">
        <path
          d="M 92 92 L 112 112 L 124 116"
          stroke="url(#ceramic3d)"
          strokeWidth="6"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
        />
        <path
          d="M 92 92 L 112 112 L 124 116"
          stroke={isActive ? '#4A90D9' : '#C0C0C0'}
          strokeWidth="3"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
          opacity="0.6"
        />
        <circle cx="124" cy="116" r="4" fill="url(#ceramic3d)" stroke={isActive ? '#4A90D9' : '#D0D0D0'} strokeWidth="1.5" />
      </g>

      {/* Orbit ring when active */}
      {isActive && (
        <circle
          cx="70"
          cy="70"
          r="42"
          fill="none"
          stroke="#4A90D9"
          strokeWidth="1"
          strokeDasharray="6 6"
          opacity="0.4"
          className="animate-spin"
          style={{ animationDuration: '8s', transformOrigin: '70px 70px' }}
        />
      )}
    </svg>
  )
}

// =============================================================================
// Typewriter Hook
// =============================================================================

function useTypewriter(text: string, speed: number = 50) {
  const [displayText, setDisplayText] = useState('')

  useEffect(() => {
    let index = 0
    setDisplayText('')

    const interval = setInterval(() => {
      if (index < text.length) {
        setDisplayText(text.slice(0, index + 1))
        index++
      } else {
        clearInterval(interval)
      }
    }, speed)

    return () => clearInterval(interval)
  }, [text, speed])

  return displayText
}

// =============================================================================
// Component
// =============================================================================

export function OpenClawPanel({
  status = 'patrolling',
  alertType,
  onAnalysisComplete,
  className,
}: OpenClawPanelProps) {
  const _t = useTranslations('ai')
  // Phase 8.0 #16: 移除 cursorVisible state，改用 CSS animate-pulse

  const isActive = status !== 'patrolling'
  const isPulsing = status === 'intercepting' || status === 'analyzing'

  const statusMessage = STATUS_MESSAGES[status]
  const displayText = useTypewriter(statusMessage, 40)

  // Notify when complete
  useEffect(() => {
    if (status === 'complete') {
      const timeout = setTimeout(() => {
        onAnalysisComplete?.()
      }, 1000)
      return () => clearTimeout(timeout)
    }
  }, [status, onAnalysisComplete])

  return (
    <div
      className={cn(
        'relative overflow-hidden rounded-xl',
        // awoooi-glass effect
        'bg-white/70 backdrop-blur-[20px]',
        // 骨架細框線
        'border border-nothing-gray-200/50',
        // 輕柔陰影
        'shadow-[0_4px_24px_rgba(0,0,0,0.06)]',
        'p-4',
        className
      )}
    >
      {/* Scan line animation when active */}
      {isActive && (
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute h-[1px] w-full bg-gradient-to-r from-transparent via-claw-blue/50 to-transparent animate-scan" />
        </div>
      )}

      {/* Header - Dot Matrix Style */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <span className="font-dot-matrix text-sm text-nothing-gray-700 tracking-wider">
            AWOOOI v1.0.0
          </span>
          <span className="font-dot-matrix text-xs text-nothing-gray-400">
            | Production
          </span>
          {isActive && (
            <span className="w-2 h-2 rounded-full bg-claw-blue animate-ping" />
          )}
        </div>
        {alertType && (
          <span className="px-2 py-0.5 rounded text-[10px] font-dot-matrix bg-status-critical/10 text-status-critical border border-status-critical/20">
            {alertType}
          </span>
        )}
      </div>

      {/* NemoClaw 3D Ceramic Visualization */}
      <div className="relative w-32 h-32 mx-auto mb-4">
        <NemoClaw isActive={isActive} isPulsing={isPulsing} />

        {/* Sparkle effects when active */}
        {isActive && (
          <>
            <Sparkles className="absolute -top-1 -right-1 w-4 h-4 text-claw-blue/60 animate-pulse" />
            <Sparkles className="absolute -bottom-1 -left-1 w-3 h-3 text-claw-blue/40 animate-pulse" style={{ animationDelay: '0.3s' }} />
          </>
        )}
      </div>

      {/* Status Display - VT323 Dot Matrix Font */}
      <div className="text-center bg-nothing-gray-50/50 rounded-lg py-2 px-3">
        <div className={cn(
          'font-dot-matrix text-base tracking-wide',
          isActive ? 'text-claw-blue' : 'text-nothing-gray-600'
        )}>
          <span>{displayText}</span>
          {/* Phase 8.0 #16: CSS cursor blink */}
          <span
            className={cn(
              'inline-block w-2 h-4 ml-1 -mb-0.5 animate-pulse',
              isActive ? 'bg-claw-blue' : 'bg-nothing-gray-400'
            )}
          />
        </div>
      </div>

      {/* Progress indicator when analyzing */}
      {(status === 'analyzing' || status === 'generating') && (
        <div className="mt-3 flex justify-center gap-1">
          {[0, 1, 2, 3, 4].map((i) => (
            <div
              key={i}
              className="w-1.5 h-1.5 rounded-full bg-claw-blue animate-pulse"
              style={{ animationDelay: `${i * 150}ms` }}
            />
          ))}
        </div>
      )}

      {/* Complete indicator */}
      {status === 'complete' && (
        <div className="mt-3 flex justify-center">
          <span className="px-2 py-0.5 rounded text-[9px] font-mono bg-status-healthy/10 text-status-healthy border border-status-healthy/20">
            READY
          </span>
        </div>
      )}
    </div>
  )
}

export default OpenClawPanel
