'use client';

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

// 常量定义
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const FPS = 60;
const PLAYER_SPEED = 4;
const LASER_SPEED = 12;
const ENEMY_SPEED = 2.5;
const SPAWN_RATE = 0.02;

// 颜色定义
const COLORS = {
  bg: '#0f172a',
  player: '#38bdf8', // 天蓝
  playerLaser: '#ef4444', // 义军红色激光
  enemy: '#94a3b8', // 帝国灰
  enemyLaser: '#22c55e', // 帝国绿色激光
  star: '#ffffff',
  hud: '#0ea5e9',
  explosion: '#fbbf24',
};

// 类型定义
type Entity = {
  id: number;
  x: number;
  y: number;
  width: number;
  height: number;
  vx: number;
  vy: number;
  hp: number;
  maxHp: number;
  type?: 'fighter' | 'interceptor';
};

type Projectile = {
  id: number;
  x: number;
  y: number;
  vx: number;
  vy: number;
  isPlayer: boolean;
};

type Particle = {
  id: number;
  x: number;
  y: number;
  vx: number;
  vy: number;
  life: number;
  maxLife: number;
  size: number;
  color: string;
};

type Star = {
  id: number;
  x: number;
  y: number;
  size: number;
  speed: number;
  opacity: number;
};

export default function StarWarsBattleAnimation() {
  // 游戏状态
  const [player, setPlayer] = useState<Entity>({
    id: 0, x: VIEW_WIDTH / 2, y: VIEW_HEIGHT - 80, width: 40, height: 40, vx: 0, vy: 0, hp: 100, maxHp: 100
  });
  const [enemies, setEnemies] = useState<Entity[]>([]);
  const [projectiles, setProjectiles] = useState<Projectile[]>([]);
  const [particles, setParticles] = useState<Particle[]>([]);
  const [stars, setStars] = useState<Star[]>([]);
  const [score, setScore] = useState(0);
  const [gameTime, setGameTime] = useState(0);
  const [shake, setShake] = useState(0);

  // Refs needed for the loop to access latest state without re-triggering effect constantly
  const stateRef = useRef({
    player,
    enemies,
    projectiles,
    particles,
    stars,
    score,
    gameTime,
    shake
  });

  // 同步 Ref
  useEffect(() => {
    stateRef.current = { player, enemies, projectiles, particles, stars, score, gameTime, shake };
  }, [player, enemies, projectiles, particles, stars, score, gameTime, shake]);

  // 初始化星空
  useEffect(() => {
    const initialStars = Array.from({ length: 100 }, (_, i) => ({
      id: i,
      x: Math.random() * VIEW_WIDTH,
      y: Math.random() * VIEW_HEIGHT,
      size: Math.random() * 2 + 0.5,
      speed: Math.random() * 3 + 0.5,
      opacity: Math.random()
    }));
    setStars(initialStars);
  }, []);

  // 游戏主循环
  useEffect(() => {
    let animationFrameId: number;
    let lastId = 0;

    const loop = () => {
      const state = stateRef.current;
      let { player, enemies, projectiles, particles, stars, score, gameTime, shake } = state;
      
      // 1. 更新星空 (视差滚动)
      const nextStars = stars.map(star => {
        let newY = star.y + star.speed * (shake > 0 ? 5 : 1); // 加速效果
        if (newY > VIEW_HEIGHT) newY = 0;
        return { ...star, y: newY };
      });

      // 2. 玩家自动驾驶逻辑 (模拟AI)
      // 简单的正弦波运动加上趋向屏幕中心的力
      const time = Date.now() / 1000;
      const targetX = (VIEW_WIDTH / 2) + Math.sin(time) * 300;
      const dx = targetX - player.x;
      player.vx = dx * 0.05;
      player.x += player.vx;
      
      // 限制玩家边界
      if (player.x < 50) player.x = 50;
      if (player.x > VIEW_WIDTH - 50) player.x = VIEW_WIDTH - 50;

      // 玩家自动射击
      if (gameTime % 15 === 0) {
        lastId++;
        projectiles.push({
          id: lastId,
          x: player.x,
          y: player.y - 20,
          vx: 0,
          vy: -LASER_SPEED,
          isPlayer: true
        });
        // 双管齐射
        lastId++;
        projectiles.push({
          id: lastId,
          x: player.x - 20,
          y: player.y - 10,
          vx: -1,
          vy: -LASER_SPEED,
          isPlayer: true
        });
        lastId++;
        projectiles.push({
          id: lastId,
          x: player.x + 20,
          y: player.y - 10,
          vx: 1,
          vy: -LASER_SPEED,
          isPlayer: true
        });
      }

      // 3. 敌人生成
      if (Math.random() < SPAWN_RATE) {
        lastId++;
        const type = Math.random() > 0.7 ? 'interceptor' : 'fighter';
        enemies.push({
          id: lastId,
          x: Math.random() * (VIEW_WIDTH - 100) + 50,
          y: -50,
          width: type === 'interceptor' ? 30 : 40,
          height: 40,
          vx: (Math.random() - 0.5) * 2,
          vy: ENEMY_SPEED * (type === 'interceptor' ? 1.5 : 1),
          hp: type === 'interceptor' ? 20 : 40,
          maxHp: type === 'interceptor' ? 20 : 40,
          type: type as any
        });
      }

      // 4. 敌人逻辑
      enemies = enemies.map(enemy => {
        // 移动
        let newX = enemy.x + enemy.vx + Math.sin(gameTime * 0.1 + enemy.id) * 2;
        let newY = enemy.y + enemy.vy;

        // 敌人射击 logic
        if (Math.random() < 0.02 && newY < VIEW_HEIGHT - 200) {
           lastId++;
           projectiles.push({
             id: lastId,
             x: newX,
             y: newY + 20,
             vx: (player.x - newX) * 0.01, // 瞄准玩家
             vy: LASER_SPEED * 0.6,
             isPlayer: false
           });
        }

        return { ...enemy, x: newX, y: newY };
      }).filter(e => e.y < VIEW_HEIGHT + 100);

      // 5. 子弹移动
      projectiles = projectiles.map(p => ({
        ...p,
        x: p.x + p.vx,
        y: p.y + p.vy
      })).filter(p => p.y > -50 && p.y < VIEW_HEIGHT + 50);

      // 6. 碰撞检测
      const nextParticles = [...particles];
      const hits: number[] = []; // store projectile IDs to remove
      let newScore = score;
      let newShake = Math.max(0, shake - 1);

      // 玩家子弹击中敌人
      projectiles.forEach(p => {
        if (p.isPlayer) {
          enemies.forEach(e => {
            if (Math.abs(p.x - e.x) < e.width && Math.abs(p.y - e.y) < e.height) {
              hits.push(p.id);
              e.hp -= 10;
              // 击中特效
              for(let i=0; i<3; i++) {
                lastId++;
                nextParticles.push({
                   id: lastId, x: p.x, y: p.y, 
                   vx: (Math.random()-0.5)*5, vy: (Math.random()-0.5)*5,
                   life: 20, maxLife: 20, size: Math.random()*3+1, color: COLORS.enemyLaser
                });
              }
              if (e.hp <= 0) {
                 newScore += e.type === 'interceptor' ? 150 : 100;
                 newShake = 5; // 屏幕震动
                 // 爆炸特效
                 for(let i=0; i<15; i++) {
                    lastId++;
                    nextParticles.push({
                       id: lastId, x: e.x, y: e.y, 
                       vx: (Math.random()-0.5)*10, vy: (Math.random()-0.5)*10,
                       life: 40, maxLife: 40, size: Math.random()*5+2, color: COLORS.explosion
                    });
                 }
              }
            }
          });
        } else {
           // 敌人子弹击中玩家
           if (Math.abs(p.x - player.x) < player.width && Math.abs(p.y - player.y) < player.height) {
              hits.push(p.id);
              player.hp -= 5;
              newShake = 10;
              // 玩家受击特效
              for(let i=0; i<5; i++) {
                lastId++;
                nextParticles.push({
                   id: lastId, x: p.x, y: p.y, 
                   vx: (Math.random()-0.5)*8, vy: (Math.random()-0.5)*8,
                   life: 30, maxLife: 30, size: Math.random()*3, color: COLORS.player
                });
              }
           }
        }
      });

      // 移除死亡实体
      const livingEnemies = enemies.filter(e => e.hp > 0);
      const livingProjectiles = projectiles.filter(p => !hits.includes(p.id));

      // 7. 粒子更新
      const activeParticles = nextParticles.map(p => ({
        ...p,
        x: p.x + p.vx,
        y: p.y + p.vy,
        life: p.life - 1
      })).filter(p => p.life > 0);

      // 玩家护盾恢复
      if (gameTime % 60 === 0 && player.hp < 100) player.hp += 1;
      if (player.hp <= 0) player.hp = 100; // 演示模式不死

      // 更新 State
      setStars(nextStars);
      setPlayer({ ...player });
      setEnemies(livingEnemies);
      setProjectiles(livingProjectiles);
      setParticles(activeParticles);
      setScore(newScore);
      setGameTime(gameTime + 1);
      setShake(newShake);

      animationFrameId = requestAnimationFrame(loop);
    };

    animationFrameId = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(animationFrameId);
  }, []); // Empty dependency array for single loop setup

  // Shake transform
  const shakeStyle = shake > 0 ? `translate(${(Math.random()-0.5)*shake}px, ${(Math.random()-0.5)*shake}px)` : '';

  return (
    <div style={{ 
      width: '100%', 
      height: '100%', 
      backgroundColor: COLORS.bg,
      overflow: 'hidden',
      position: 'relative',
      fontFamily: '"Orbitron", "Segoe UI", sans-serif'
    }}>
      <svg 
        viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} 
        className="w-full h-full"
        style={{ transform: shakeStyle, transition: 'transform 0.05s' }}
      >
        <defs>
          {/* 辉光滤镜 */}
          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
            <feMerge>
              <feMergeNode in="coloredBlur"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
          <filter id="strong-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
            <feMerge>
              <feMergeNode in="coloredBlur"/>
              <feMergeNode in="coloredBlur"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
          {/* 渐变 */}
          <linearGradient id="shieldGradient" x1="0" x2="0" y1="0" y2="1">
             <stop offset="0%" stopColor="#06b6d4" stopOpacity="0.8"/>
             <stop offset="100%" stopColor="#06b6d4" stopOpacity="0"/>
          </linearGradient>
        </defs>

        {/* 1. 星空背景 */}
        {stars.map((star) => (
          <circle 
            key={star.id} 
            cx={star.x} 
            cy={star.y} 
            r={star.size} 
            fill={COLORS.star} 
            opacity={star.opacity}
          />
        ))}

        {/* 2. 粒子效果 (放在飞船下方) */}
        {particles.map((p) => (
          <circle 
            key={p.id}
            cx={p.x}
            cy={p.y}
            r={p.size}
            fill={p.color}
            opacity={p.life / p.maxLife}
            filter="url(#glow)"
          />
        ))}

        {/* 3. 敌机 */}
        {enemies.map((enemy) => (
          <g key={enemy.id} transform={`translate(${enemy.x}, ${enemy.y})`}>
            {/* TIE Fighter 风格 */}
            {enemy.type === 'fighter' ? (
              <g fill={COLORS.enemy} filter="url(#glow)">
                <path d="M-15,-15 L-15,15 L-12,15 L-12,-15 Z" /> {/* Left Wing */}
                <path d="M15,-15 L15,15 L12,15 L12,-15 Z" />   {/* Right Wing */}
                <circle cx="0" cy="0" r="10" fill="#64748b" /> {/* Cockpit */}
                <line x1="-12" y1="0" x2="12" y2="0" stroke="#475569" strokeWidth="4" />
                {/* Engine Glow */}
                <circle cx="0" cy="-5" r="3" fill="#22c55e" opacity="0.8" />
              </g>
            ) : (
              <g fill={COLORS.enemy} filter="url(#glow)">
                {/* Interceptor 风格 (Pointy wings) */}
                <path d="M-20,-10 L-10,0 L-20,10 L-15,0 Z" />
                <path d="M20,-10 L10,0 L20,10 L15,0 Z" />
                <circle cx="0" cy="0" r="8" fill="#475569" />
                <circle cx="0" cy="-4" r="2" fill="#22c55e" opacity="0.8" />
              </g>
            )}
            
            {/* 敌机血条 */}
            <rect x="-15" y="-25" width="30" height="3" fill="#334155" />
            <rect x="-15" y="-25" width={(enemy.hp / enemy.maxHp) * 30} height="3" fill="#ef4444" />
            
            {/* 锁定框 UI */}
            <path d="M-20,-20 L-15,-20 M20,-20 L15,-20 M-20,20 L-15,20 M20,20 L15,20 M-20,-20 L-20,-15 M20,-20 L20,-15 M-20,20 L-20,15 M20,20 L20,15" 
                  stroke={COLORS.playerLaser} strokeWidth="1" fill="none" opacity="0.5" />
          </g>
        ))}

        {/* 4. 玩家飞船 */}
        <g transform={`translate(${player.x}, ${player.y})`}>
          {/* 引擎尾焰 */}
          <ellipse cx="-10" cy="25" rx="3" ry="10" fill="#38bdf8" filter="url(#strong-glow)" opacity={0.6 + Math.random()*0.4} />
          <ellipse cx="10" cy="25" rx="3" ry="10" fill="#38bdf8" filter="url(#strong-glow)" opacity={0.6 + Math.random()*0.4} />
          
          {/* 机身 (X-Wing 风格抽象) */}
          <g filter="url(#glow)">
            <path d="M0,-25 L-5,-5 L-25,20 L-5,15 L0,20 L5,15 L25,20 L5,-5 Z" fill="#e2e8f0" />
            <rect x="-26" y="5" width="4" height="20" fill="#94a3b8" /> {/* Guns Left */}
            <rect x="22" y="5" width="4" height="20" fill="#94a3b8" />  {/* Guns Right */}
            <path d="M0,-5 L-3,5 L3,5 Z" fill="#38bdf8" opacity="0.5" /> {/* Cockpit glass */}
            {/* 红色涂装 */}
            <path d="M-5,0 L-5,15 L-8,15 L-8,5 Z" fill="#ef4444" />
            <path d="M5,0 L5,15 L8,15 L8,5 Z" fill="#ef4444" />
          </g>

          {/* 护盾特效 (受击时显示) */}
          {player.hp < 100 && (
            <circle cx="0" cy="0" r="35" fill="url(#shieldGradient)" opacity={(100 - player.hp) / 200} stroke="#06b6d4" strokeWidth="1" strokeDasharray="4 2">
              <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="10s" repeatCount="indefinite" />
            </circle>
          )}
        </g>

        {/* 5. 子弹 */}
        {projectiles.map((p) => (
          <line 
            key={p.id}
            x1={p.x} y1={p.y}
            x2={p.x - p.vx} y2={p.y - p.vy + (p.isPlayer ? 20 : -20)}
            stroke={p.isPlayer ? COLORS.playerLaser : COLORS.enemyLaser}
            strokeWidth="3"
            strokeLinecap="round"
            filter="url(#strong-glow)"
          />
        ))}

        {/* 6. HUD 界面 (科技感图层) */}
        {/* 顶部状态栏 */}
        <g>
          <path d="M0,0 L300,0 L320,40 L0,40 Z" fill="#1e293b" opacity="0.8" />
          <path d="M1000,0 L700,0 L680,40 L1000,40 Z" fill="#1e293b" opacity="0.8" />
          
          <text x="20" y="28" fill="#94a3b8" fontSize="14" fontWeight="bold">得分 SCORE</text>
          <text x="140" y="28" fill="#fff" fontSize="20" fontFamily="monospace" fontWeight="bold">{score.toString().padStart(6, '0')}</text>
          
          <text x="720" y="28" fill="#94a3b8" fontSize="14" fontWeight="bold">系统 SYSTEM</text>
          <text x="820" y="28" fill="#22c55e" fontSize="14" fontFamily="monospace">ONLINE</text>
        </g>

        {/* 底部仪表盘 */}
        <g transform={`translate(0, ${VIEW_HEIGHT})`}>
          {/* 左下角护盾信息 */}
          <path d="M0,0 L200,0 L240,-50 L0,-50 Z" fill="#1e293b" opacity="0.8" />
          <text x="20" y="-30" fill="#38bdf8" fontSize="12">护盾 SHIELD</text>
          <rect x="20" y="-20" width="150" height="8" fill="#334155" rx="2" />
          <rect x="20" y="-20" width={player.hp * 1.5} height="8" fill={player.hp > 30 ? "#0ea5e9" : "#ef4444"} rx="2" filter="url(#glow)" />
          
          {/* 右下角武器信息 */}
          <path d="M1000,0 L800,0 L760,-50 L1000,-50 Z" fill="#1e293b" opacity="0.8" />
          <text x="820" y="-30" fill="#ef4444" fontSize="12">武器 WEAPON</text>
          <g transform="translate(820, -20)">
             <rect width="10" height="8" fill="#ef4444" opacity="0.8" />
             <rect x="15" width="10" height="8" fill="#ef4444" opacity="0.8" />
             <rect x="30" width="10" height="8" fill="#ef4444" opacity="0.8" />
             <rect x="45" width="10" height="8" fill="#ef4444" opacity="0.8" />
             <rect x="60" width="10" height="8" fill="#ef4444" opacity="0.4" />
             <text x="80" y="8" fill="#fff" fontSize="12" fontFamily="monospace">READY</text>
          </g>
        </g>
        
        {/* 瞄准准星 (跟随玩家稍微延迟) */}
        <g transform={`translate(${player.x}, ${player.y - 150})`} opacity="0.4">
           <circle r="30" fill="none" stroke="#fff" strokeWidth="1" strokeDasharray="10 5" />
           <line x1="-40" y1="0" x2="-20" y2="0" stroke="#fff" />
           <line x1="20" y1="0" x2="40" y2="0" stroke="#fff" />
           <line x1="0" y1="-40" x2="0" y2="-20" stroke="#fff" />
           <line x1="0" y1="20" x2="0" y2="40" stroke="#fff" />
           <circle r="2" fill="red" />
        </g>

        {/* 装饰性网格线 */}
        <line x1="0" y1={VIEW_HEIGHT/2} x2={VIEW_WIDTH} y2={VIEW_HEIGHT/2} stroke="#38bdf8" strokeWidth="0.5" opacity="0.1" />
        <line x1={VIEW_WIDTH/2} y1="0" x2={VIEW_WIDTH/2} y2={VIEW_HEIGHT} stroke="#38bdf8" strokeWidth="0.5" opacity="0.1" />

      </svg>
      
      {/* 覆盖层文字 - 增加电影感 */}
      <div style={{ position: 'absolute', bottom: '10px', width: '100%', textAlign: 'center', color: '#64748b', fontSize: '10px', letterSpacing: '2px' }}>
        T-65 X-WING STARFIGHTER // SIMULATION LOG: {gameTime}
      </div>
    </div>
  );
}