```tsx
'use client';

import React, { useState, useEffect, useRef, useMemo } from 'react';

const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;

// 攻击类型定义
type AttackType = 'SQL' | 'XSS' | 'DDoS' | 'SSH' | 'SCAN';

interface Particle {
  id: number;
  type: AttackType;
  x: number;
  y: number;
  angle: number;
  speed: number;
  text?: string;
  color: string;
  distance: number; // 距离中心的距离
}

interface Log {
  id: number;
  time: string;
  type: string;
  message: string;
  level: 'WARN' | 'CRIT' | 'INFO';
}

export default function CyberAttackView() {
  const [particles, setParticles] = useState<Particle[]>([]);
  const [logs, setLogs] = useState<Log[]>([]);
  const [serverStatus, setServerStatus] = useState<'NORMAL' | 'WARNING' | 'CRITICAL'>('NORMAL');
  const [shake, setShake] = useState({ x: 0, y: 0 });
  const [load, setLoad] = useState(20); // 服务器负载 0-100
  
  const particleIdRef = useRef(0);
  const logIdRef = useRef(0);
  const frameRef = useRef(0);
  
  // 攻击字典
  const sqlPayloads = ["' OR 1=1 --", "UNION SELECT", "DROP TABLE", "admin' --"];
  const xssPayloads = ["<script>", "alert(1)", "onerror=", "javascript:"];
  const sshPayloads = ["root:1234", "admin:admin", "BruteForce"];
  
  // 生成随机攻击
  const spawnAttack = () => {
    const angle = Math.random() * Math.PI * 2;
    const distance = 500; // 起始距离
    const startX = CENTER_X + Math.cos(angle) * distance;
    const startY = CENTER_Y + Math.sin(angle) * distance;
    
    const rand = Math.random();
    let type: AttackType = 'DDoS';
    let text = '';
    let color = '#ef4444'; // Red
    let speed = 4;

    if (rand > 0.90) {
      type = 'SQL';
      text = sqlPayloads[Math.floor(Math.random() * sqlPayloads.length)];
      color = '#f59e0b'; // Amber
      speed = 3;
    } else if (rand > 0.80) {
      type = 'XSS';
      text = xssPayloads[Math.floor(Math.random() * xssPayloads.length)];
      color = '#d946ef'; // Fuchsia
      speed = 3.5;
    } else if (rand > 0.70) {
      type = 'SSH';
      text = sshPayloads[Math.floor(Math.random() * sshPayloads.length)];
      color = '#ec4899'; // Pink
      speed = 5;
    } else {
      type = 'DDoS'; // Most common
      color = '#ef4444';
      speed = Math.random() * 4 + 4;
    }

    const newParticle: Particle = {
      id: particleIdRef.current++,
      type,
      x: startX,
      y: startY,
      angle: Math.atan2(CENTER_Y - startY, CENTER_X - startX),
      speed,
      text,
      color,
      distance
    };

    setParticles(prev => [...prev, newParticle]);
  };

  // 添加日志
  const addLog = (type: string, msg: string, level: 'WARN' | 'CRIT') => {
    const now = new Date();
    const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
    
    setLogs(prev => {
      const newLogs = [...prev, {
        id: logIdRef.current++,
        time: timeStr,
        type,
        message: msg,
        level
      }];
      return newLogs.slice(-7); // 只保留最近7条，适应SVG高度
    });
  };

  useEffect(() => {
    const loop = () => {
      frameRef.current++;

      // 1. 生成攻击 (频率随时间波动)
      if (frameRef.current % 5 === 0) {
         spawnAttack();
         if (Math.random() > 0.5) spawnAttack(); // Double tap chance
      }

      // 2. 移动粒子 & 碰撞检测
      setParticles(prev => {
        const nextParticles: Particle[] = [];
        let hitCount = 0;
        let hitType = '';

        prev.forEach(p => {
          const dx = Math.cos(p.angle) * p.speed;
          const dy = Math.sin(p.angle) * p.speed;
          const newDist = p.distance - p.speed;

          // 碰撞中心范围 (Server Radius approx 60)
          if (newDist < 60) {
            hitCount++;
            hitType = p.type;
            // Particle destroyed on impact
          } else {
            nextParticles.push({
              ...p,
              x: p.x + dx,
              y: p.y + dy,
              distance: newDist
            });
          }
        });

        // 处理撞击效果
        if (hitCount > 0) {
          // 增加负载
          setLoad(l => Math.min(l + hitCount * 2, 100));
          
          // 震动效果
          const shakeIntensity = Math.min(hitCount * 3, 10);
          setShake({
            x: (Math.random() - 0.5) * shakeIntensity,
            y: (Math.random() - 0.5) * shakeIntensity
          });

          // 偶尔记录日志
          if (Math.random() > 0.7) {
             let msg = "检测到异常流量包";
             if (hitType === 'SQL') msg = "拦截到 SQL 注入尝试";
             if (hitType === 'XSS') msg = "过滤跨站脚本攻击载荷";
             if (hitType === 'SSH') msg = "SSH 暴力破解登录失败";
             if (hitType === 'DDoS') msg = "DDoS 流量峰值警告";
             addLog(hitType, msg, hitType === 'DDoS' ? 'WARN' : 'CRIT');
          }
        } else {
          // 衰减震动
          setShake(s => ({ x: s.x * 0.5, y: s.y * 0.5 }));
          // 负载自然下降
          setLoad(l => Math.max(l - 0.2, 10)); 
        }

        return nextParticles;
      });

      // 3. 更新服务器状态颜色
      setLoad(curr => {
          if (curr > 80) setServerStatus('CRITICAL');
          else if (curr > 50) setServerStatus('WARNING');
          else setServerStatus('NORMAL');
          return curr;
      });

      requestAnimationFrame(loop);
    };

    const animationId = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(animationId);
  }, []);

  // 颜色映射
  const getStatusColor = () => {
    switch (serverStatus) {
      case 'CRITICAL': return '#ef4444'; // Red
      case 'WARNING': return '#f59e0b'; // Amber
      default: return '#3b82f6'; // Blue
    }
  };

  // 背景网格 (仅保留透视线，去除圆形)
  const Grid = useMemo(() => {
    return (
      <g opacity="0.15">
        {Array.from({ length: 20 }).map((_, i) => (
          <React.Fragment key={i}>
            <line x1={0} y1={i * 30} x2={VIEW_WIDTH} y2={i * 30} stroke="#3b82f6" strokeWidth="1" />
            <line x1={i * 50} y1={0} x2={i * 50} y2={VIEW_HEIGHT} stroke="#3b82f6" strokeWidth="1" />
          </React.Fragment>
        ))}
        {/* 透视地平面效果 */}
        <path d={`M0 ${CENTER_Y} L${VIEW_WIDTH} ${CENTER_Y}`} stroke="#3b82f6" strokeWidth="2" opacity="0.5" />
      </g>
    );
  }, []);

  // 渲染 SVG 日志面板
  const renderLogPanel = () => {
    const PANEL_X = 20;
    const PANEL_Y = VIEW_HEIGHT - 180;
    const PANEL_WIDTH = 400;
    const PANEL_HEIGHT = 160;

    return (
      <g transform={`translate(${PANEL_X}, ${PANEL_Y})`}>
        {/* 面板背景 - 玻璃拟态 */}
        <defs>
          <filter id="panelBlur" x="-10%" y="-10%" width="120%" height="120%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
          </filter>
        </defs>
        <rect 
          width={PANEL_WIDTH} 
          height={PANEL_HEIGHT} 
          rx="6" 
          fill="#0f172a" 
          fillOpacity="0.85" 
          stroke="#334155" 
          strokeWidth="1" 
        />
        
        {/* 标题栏 */}
        <g transform="translate(0, 0)">
           <path d={`M0 24 L${PANEL_WIDTH} 24`} stroke="#334155" strokeWidth="1" />
           <text x="12" y="16" fill="#94a3b8" fontSize="12" fontFamily="monospace" fontWeight="bold">SECURITY_LOG.txt</text>
           
           {/* 窗口控制按钮 */}
           <g transform={`translate(${PANEL_WIDTH - 50}, 12)`}>
              <circle cx="0" cy="0" r="4" fill="#ef4444" />
              <circle cx="12" cy="0" r="4" fill="#eab308" />
              <circle cx="24" cy="0" r="4" fill="#22c55e" />
           </g>
        </g>

        {/* 日志内容区域 */}
        <g transform="translate(10, 40)">
           {logs.length === 0 && (
             <text x="0" y="10" fill="#475569" fontSize="11" fontFamily="monospace" fontStyle="italic">
               系统监控中...等待数据流接入
               <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
             </text>
           )}
           
           {logs.map((log, index) => {
             const yPos = index * 18;
             const levelColor = log.level === 'CRIT' ? '#ef4444' : log.level === 'WARN' ? '#eab308' : '#60a5fa';
             
             return (
               <text key={log.id} x="0" y={yPos} fontSize="11" fontFamily="monospace">
                 {/* 出现动画 */}
                 <animate attributeName="opacity" from="0" to="1" dur="0.3s" fill="freeze" />
                 
                 <tspan fill="#64748b">[{log.time}]</tspan>
                 <tspan fill={levelColor} dx="6" fontWeight="bold">{log.level}</tspan>
                 <tspan fill="#0891b2" dx="6">[{log.type}]</tspan>
                 <tspan fill="#cbd5e1" dx="6">{log.message}</tspan>
               </text>
             );
           })}
        </g>
      </g>
    );
  };

  return (
    <div className="w-full h-full bg-slate-900 overflow-hidden relative font-mono">
      <svg viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} className="w-full h-full select-none" style={{ backgroundColor: '#0f172a' }}>
        <defs>
          <radialGradient id="serverGlow" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stopColor={getStatusColor()} stopOpacity="0.6" />
            <stop offset="100%" stopColor={getStatusColor()} stopOpacity="0" />
          </radialGradient>
          <linearGradient id="rackGradient" x1="0" x2="1" y1="0" y2="0">
             <stop offset="0%" stopColor="#0f172a" />
             <stop offset="20%" stopColor="#1e293b" />
             <stop offset="50%" stopColor="#334155" />
             <stop offset="80%" stopColor="#1e293b" />
             <stop offset="100%" stopColor="#0f172a" />
          </linearGradient>
          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="3" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
          <pattern id="scanlines" x="0" y="0" width="100" height="4" patternUnits="userSpaceOnUse">
             <line x1="0" y1="2" x2="100" y2="2" stroke="#000" strokeOpacity="0.3" strokeWidth="2" />
          </pattern>
        </defs>

        {/* 背景色 */}
        <rect width={VIEW_WIDTH} height={VIEW_HEIGHT} fill="#0f172a" />
        {Grid}

        {/* 端口扫描雷达效果 */}
        <g transform={`translate(${CENTER_X}, ${CENTER_Y})`}>
             <g>
               <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="4s" repeatCount="indefinite" />
               <path d="M0 0 L0 -300 A300 300 0 0 1 100 -280 Z" fill="url(#serverGlow)" opacity="0.08" />
             </g>
        </g>

        {/* 攻击粒子 */}
        {particles.map(p => (
          <g key={p.id} transform={`translate(${p.x}, ${p.y}) rotate(${(p.angle * 180) / Math.PI})`}>
            {p.type === 'DDoS' ? (
              <circle r="3" fill={p.color} filter="url(#glow)">
                 <animate attributeName="opacity" values="0.5;1;0.5" dur="0.2s" repeatCount="indefinite" />
              </circle>
            ) : (
              <g>
                 <rect x="0" y="-8" width={p.text!.length * 7 + 10} height="16" rx="4" fill="#1e293b" stroke={p.color} strokeWidth="1" />
                 <text x="5" y="4" fill={p.color} fontSize="10" fontWeight="bold">{p.text}</text>
              </g>
            )}
            {/* 拖尾效果 */}
            <line x1="-10" y1="0" x2="0" y2="0" stroke={p.color} strokeWidth="2" opacity="0.6" />
          </g>
        ))}

        {/* 中央服务器 */}
        <g transform={`translate(${CENTER_X + shake.x}, ${CENTER_Y + shake.y})`}>
          {/* 警报光环 */}
          {serverStatus !== 'NORMAL' && (
            <circle r="90" fill="url(#serverGlow)">
               <animate attributeName="r" values="80;100;80" dur="0.8s" repeatCount="indefinite" />
               <animate attributeName="opacity" values="0.2;0.6;0.2" dur="0.8s" repeatCount="indefinite" />
            </circle>
          )}

          {/* 服务器图标 */}
          <g transform="translate(-30, -50)">
            <ellipse cx="30" cy="110" rx="40" ry="10" fill="#000" opacity="0.5" />
            <rect x="0" y="0" width="60" height="100" rx="2" fill="#1e293b" stroke="#475569" strokeWidth="2" />
            <g transform="translate(4, 4)">
               {Array.from({ length: 8 }).map((_, i) => (
                 <g key={i} transform={`translate(0, ${i * 12})`}>
                    <rect x="0" y="0" width="52" height="10" rx="1" fill="#334155" stroke="#0f172a" strokeWidth="0.5" />
                    <circle cx="45" cy="5" r="1.5" fill={getStatusColor()}>
                       <animate attributeName="opacity" values="0.3;1;0.3" dur={`${0.5 + Math.random()}s`} repeatCount="indefinite" />
                    </circle>
                    <circle cx="40" cy="5" r="1.5" fill="#10b981" opacity="0.8">
                       <animate attributeName="opacity" values="1;0.2;1" dur={`${2 + Math.random()}s`} repeatCount="indefinite" />
                    </circle>
                    <line x1="4" y1="3" x2="30" y2="3" stroke="#475569" strokeWidth="1" />
                    <line x1="4" y1="7" x2="30" y2="7" stroke="#475569" strokeWidth="1" />
                 </g>
               ))}
            </g>
            <path d="M0 0 L60 0 L60 100 L0 100 Z" fill="url(#rackGradient)" opacity="0.1" pointerEvents="none" />
            <line x1="55" y1="10" x2="55" y2="90" stroke="#fff" strokeOpacity="0.1" strokeWidth="1" />
          </g>
          
          <text x="0" y="70" textAnchor="middle" fill="#fff" fontSize="12" fontWeight="bold" letterSpacing="1">
            CLOUD SERVER
          </text>
           <text x="0" y="85" textAnchor="middle" fill={getStatusColor()} fontSize="10">
            负载: {Math.floor(load)}%
          </text>
        </g>

        {/* 左下角安全日志 (已移至 SVG 内部) */}
        {renderLogPanel()}

        {/* 扫描线覆盖层 */}
        <rect width={VIEW_WIDTH} height={VIEW_HEIGHT} fill="url(#scanlines)" pointerEvents="none" opacity="0.1" />
        
      </svg>

      {/* 顶部状态栏 - 保持 HTML 以确保 UI 可读性最佳 */}
      <div className="absolute top-4 left-0 w-full flex justify-center gap-8 pointer-events-none">
         <div className="bg-slate-800/80 px-4 py-2 rounded border border-slate-700 text-slate-300 text-sm flex items-center gap-2">
            <div className={`w-3 h-3 rounded-full ${serverStatus === 'NORMAL' ? 'bg-green-500 shadow-[0_0_10px_#22c55e]' : 'bg-slate-600'}`}></div>
            <span>系统正常</span>
         </div>
         <div className="bg-slate-800/80 px-4 py-2 rounded border border-slate-700 text-slate-300 text-sm flex items-center gap-2">
            <div className={`w-3 h-3 rounded-full ${serverStatus === 'WARNING' || serverStatus === 'CRITICAL' ? 'bg-yellow-500 animate-pulse' : 'bg-slate-600'}`}></div>
            <span>流量警报</span>
         </div>
         <div className="bg-slate-800/80 px-4 py-2 rounded border border-slate-700 text-slate-300 text-sm flex items-center gap-2">
            <div className={`w-3 h-3 rounded-full ${serverStatus === 'CRITICAL' ? 'bg-red-600 animate-ping' : 'bg-slate-600'}`}></div>
            <span>DDoS 攻击</span>
         </div>
      </div>
    </div>
  );
}
```