"use client";
// 回响星核 / Echo Nexus — 中央晶体集群 + 主动脉冲（v0.7 Canvas 粒子系统）
import { useRef, useState, useCallback, useEffect } from "react";
import { useGameStore } from "@/store/gameStore";
import { formatNum } from "@/lib/game/config";
import { useToast } from "@/hooks/use-toast";
import { sfx } from "@/hooks/useAudio";
import { PULSE_WHISPERS, maybeWhisper } from "@/lib/game/narrative";

interface FloatNum {
  id: number;
  x: number;
  y: number;
  text: string;
  born: number;
  color: string;
}

// ===== Canvas 粒子系统类型 =====
interface EnergyParticle {
  // 环绕能量粒子（持续）
  angle: number;
  radius: number;
  baseRadius: number;
  speed: number;
  size: number;
  color: string;
  alpha: number;
  phase: number;
}

interface AmbientParticle {
  // 环境星尘（缓慢漂浮）
  x: number;
  y: number;
  vx: number;
  vy: number;
  size: number;
  alpha: number;
  twinkle: number;
}

interface ShockRing {
  // 冲击波环（点击触发）
  born: number;
  color: string;
  maxRadius: number;
  duration: number;
}

interface BurstParticle {
  // 爆发粒子（点击触发，径向发散）
  x: number;
  y: number;
  vx: number;
  vy: number;
  size: number;
  color: string;
  born: number;
  life: number;
}

const COLORS = {
  emerald: "#34d399",
  fuchsia: "#e879f9",
  rose: "#fb7185",
  amber: "#fbbf24",
  white: "#ffffff",
};

function comboColor(combo: number): string {
  if (combo >= 5) return COLORS.amber;
  if (combo >= 3) return COLORS.fuchsia;
  return COLORS.emerald;
}

export function CrystalOrb() {
  const pulse = useGameStore((s) => s.pulse);
  const crystals = useGameStore((s) => s.crystals);
  const crystalsPerSec = useGameStore((s) => s.crystalsPerSec);
  const crystalCap = useGameStore((s) => s.crystalCap);
  const combo = useGameStore((s) => s._combo);
  const { toast } = useToast();

  const [floats, setFloats] = useState<FloatNum[]>([]);
  const idRef = useRef(0);

  // Canvas refs
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const pulseAnimRef = useRef(0);
  const [pulseAnim, setPulseAnim] = useState(0); // 触发 SVG 环动画

  // 粒子状态 refs（不触发 re-render）
  const energyParticlesRef = useRef<EnergyParticle[]>([]);
  const ambientParticlesRef = useRef<AmbientParticle[]>([]);
  const shockRingsRef = useRef<ShockRing[]>([]);
  const burstParticlesRef = useRef<BurstParticle[]>([]);

  const comboRef = useRef(combo);
  const fillPctRef = useRef(0);
  const crystalsRef = useRef(crystals);
  const crystalCapRef = useRef(crystalCap);
  useEffect(() => {
    comboRef.current = combo;
    crystalsRef.current = crystals;
    crystalCapRef.current = crystalCap;
  }, [combo, crystals, crystalCap]);

  const mouseRef = useRef<{ x: number; y: number; inside: boolean }>({
    x: 0,
    y: 0,
    inside: false,
  });

  // ===== 初始化粒子 =====
  const initParticles = useCallback((w: number, h: number) => {
    const cx = w / 2;
    const cy = h / 2;
    const baseR = Math.min(w, h) * 0.28;

    // 环绕能量粒子（3 层，每层不同速度方向）
    const energy: EnergyParticle[] = [];
    const layers = [
      { count: 14, rMul: 0.95, speed: 0.6, color: COLORS.emerald },
      { count: 10, rMul: 1.15, speed: -0.4, color: COLORS.fuchsia },
      { count: 8, rMul: 1.35, speed: 0.3, color: COLORS.rose },
    ];
    layers.forEach((layer) => {
      for (let i = 0; i < layer.count; i++) {
        energy.push({
          angle: (Math.PI * 2 * i) / layer.count + Math.random() * 0.3,
          radius: baseR * layer.rMul,
          baseRadius: baseR * layer.rMul,
          speed: layer.speed * (0.8 + Math.random() * 0.4),
          size: 1.5 + Math.random() * 2,
          color: layer.color,
          alpha: 0.5 + Math.random() * 0.4,
          phase: Math.random() * Math.PI * 2,
        });
      }
    });
    energyParticlesRef.current = energy;

    // 环境星尘
    const ambient: AmbientParticle[] = [];
    for (let i = 0; i < 40; i++) {
      ambient.push({
        x: Math.random() * w,
        y: Math.random() * h,
        vx: (Math.random() - 0.5) * 8,
        vy: (Math.random() - 0.5) * 8,
        size: 0.5 + Math.random() * 1.5,
        alpha: 0.2 + Math.random() * 0.5,
        twinkle: Math.random() * Math.PI * 2,
      });
    }
    ambientParticlesRef.current = ambient;
    void cx;
    void cy;
  }, []);

  // ===== 触发脉冲效果（Canvas 部分）=====
  const triggerPulseEffect = useCallback(
    (x: number, y: number, res: { combo: number; gain: number }) => {
      const color = comboColor(res.combo);
      const now = performance.now();

      // 冲击波环（多层错峰）
      shockRingsRef.current.push({
        born: now,
        color: COLORS.emerald,
        maxRadius: 140,
        duration: 700,
      });
      if (res.combo >= 3) {
        shockRingsRef.current.push({
          born: now + 100,
          color: COLORS.fuchsia,
          maxRadius: 170,
          duration: 800,
        });
      }
      if (res.combo >= 5) {
        shockRingsRef.current.push({
          born: now + 200,
          color: COLORS.amber,
          maxRadius: 200,
          duration: 900,
        });
      }

      // 径向爆发粒子
      const pcount = 10 + Math.min(10, res.combo) * 2;
      for (let i = 0; i < pcount; i++) {
        const angle = (Math.PI * 2 * i) / pcount + Math.random() * 0.4;
        const speed = 120 + Math.random() * 180;
        burstParticlesRef.current.push({
          x,
          y,
          vx: Math.cos(angle) * speed,
          vy: Math.sin(angle) * speed,
          size: 2 + Math.random() * 3,
          color,
          born: now,
          life: 600 + Math.random() * 300,
        });
      }

      // 让能量粒子被"推开"再回弹
      energyParticlesRef.current.forEach((p) => {
        p.radius = p.baseRadius * (1.25 + Math.random() * 0.15);
      });
    },
    []
  );

  // ===== 点击处理 =====
  const handleClick = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      const res = pulse();
      if (!res) return;
      const rect = e.currentTarget.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const id = idRef.current++;
      const floatColor = comboColor(res.combo);
      setFloats((f) => [
        ...f,
        {
          id,
          x,
          y,
          text: `+${res.gain.toFixed(1)}`,
          born: Date.now(),
          color: floatColor,
        },
      ]);
      triggerPulseEffect(x, y, res);
      setPulseAnim((n) => n + 1);
      sfx(res.combo >= 3 ? "pulseCombo" : "pulse", { combo: res.combo });
      setTimeout(() => {
        setFloats((f) => f.filter((it) => it.id !== id));
      }, 900);
      if (res.combo >= 5 && res.combo % 5 === 0) {
        // v0.9 叙事融入：高连击时注入世界观低语
        const whisper = maybeWhisper(PULSE_WHISPERS, 0.6);
        toast({
          title: `×${res.combo} 连击！`,
          description: whisper ? `「${whisper}」` : "谐振叠加，产能飙升。",
        });
      } else if (res.combo >= 3 && res.combo % 3 === 0) {
        // 3 连击时也有概率出现叙事
        const whisper = maybeWhisper(PULSE_WHISPERS, 0.3);
        if (whisper) {
          toast({ title: "低语", description: `「${whisper}」` });
        }
      }
    },
    [pulse, toast, triggerPulseEffect]
  );

  // ===== Canvas 动画循环 =====
  useEffect(() => {
    const canvas = canvasRef.current;
    const container = containerRef.current;
    if (!canvas || !container) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let rafId = 0;
    let lastTime = performance.now();
    let dpr = Math.min(window.devicePixelRatio || 1, 2);

    const resize = () => {
      const rect = container.getBoundingClientRect();
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = Math.max(1, Math.floor(rect.width * dpr));
      canvas.height = Math.max(1, Math.floor(rect.height * dpr));
      canvas.style.width = `${rect.width}px`;
      canvas.style.height = `${rect.height}px`;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      initParticles(rect.width, rect.height);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(container);

    const draw = (now: number) => {
      const dt = Math.min(0.05, (now - lastTime) / 1000);
      lastTime = now;
      const w = canvas.width / dpr;
      const h = canvas.height / dpr;
      const cx = w / 2;
      const cy = h / 2;
      const baseR = Math.min(w, h) * 0.28;

      ctx.clearRect(0, 0, w, h);

      // === 1. 环境星尘 ===
      ambientParticlesRef.current.forEach((p) => {
        p.x += p.vx * dt;
        p.y += p.vy * dt;
        p.twinkle += dt * 2;
        if (p.x < 0) p.x = w;
        if (p.x > w) p.x = 0;
        if (p.y < 0) p.y = h;
        if (p.y > h) p.y = 0;
        const tw = 0.5 + 0.5 * Math.sin(p.twinkle);
        ctx.globalAlpha = p.alpha * tw;
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fill();
      });
      ctx.globalAlpha = 1;

      // === 2. 外层辉光（呼吸）===
      const breath = 0.85 + 0.15 * Math.sin(now * 0.001);
      const glowGrad = ctx.createRadialGradient(
        cx,
        cy,
        baseR * 0.3,
        cx,
        cy,
        baseR * 2.2
      );
      glowGrad.addColorStop(0, `rgba(52,211,153,${0.18 * breath})`);
      glowGrad.addColorStop(0.5, `rgba(232,121,249,${0.1 * breath})`);
      glowGrad.addColorStop(1, "rgba(0,0,0,0)");
      ctx.fillStyle = glowGrad;
      ctx.fillRect(0, 0, w, h);

      // === 3. 进度填充环（背景 + 进度）===
      ctx.lineWidth = 2.5;
      ctx.strokeStyle = "rgba(255,255,255,0.06)";
      ctx.beginPath();
      ctx.arc(cx, cy, baseR * 1.45, 0, Math.PI * 2);
      ctx.stroke();

      const fp = Math.min(
        100,
        (crystalsRef.current / Math.max(1, crystalCapRef.current)) * 100
      );
      fillPctRef.current = fp;
      const ringR = baseR * 1.45;
      const grad = ctx.createLinearGradient(
        cx - ringR,
        cy - ringR,
        cx + ringR,
        cy + ringR
      );
      grad.addColorStop(0, COLORS.emerald);
      grad.addColorStop(0.5, COLORS.fuchsia);
      grad.addColorStop(1, COLORS.rose);
      ctx.strokeStyle = grad;
      ctx.lineWidth = 3;
      ctx.lineCap = "round";
      ctx.shadowBlur = 8;
      ctx.shadowColor = COLORS.emerald;
      ctx.beginPath();
      ctx.arc(
        cx,
        cy,
        ringR,
        -Math.PI / 2,
        -Math.PI / 2 + (Math.PI * 2 * fp) / 100
      );
      ctx.stroke();
      ctx.shadowBlur = 0;

      // === 4. 环绕能量粒子 ===
      energyParticlesRef.current.forEach((p) => {
        p.angle += p.speed * dt;
        // 回弹到 baseRadius
        p.radius += (p.baseRadius - p.radius) * Math.min(1, dt * 4);
        const px = cx + Math.cos(p.angle) * p.radius;
        const py = cy + Math.sin(p.angle) * p.radius;
        const flicker = 0.7 + 0.3 * Math.sin(now * 0.005 + p.phase);
        ctx.globalAlpha = p.alpha * flicker;
        ctx.fillStyle = p.color;
        ctx.shadowBlur = 10;
        ctx.shadowColor = p.color;
        ctx.beginPath();
        ctx.arc(px, py, p.size, 0, Math.PI * 2);
        ctx.fill();

        // 拖尾（向心方向的小线段）
        ctx.globalAlpha = p.alpha * flicker * 0.4;
        ctx.strokeStyle = p.color;
        ctx.lineWidth = p.size * 0.6;
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(
          cx + Math.cos(p.angle - p.speed * 0.08) * (p.radius - 2),
          cy + Math.sin(p.angle - p.speed * 0.08) * (p.radius - 2)
        );
        ctx.stroke();
      });
      ctx.globalAlpha = 1;
      ctx.shadowBlur = 0;

      // === 5. 中央晶核 ===
      const coreR = baseR * 0.95;
      // 鼠标接近时晶核轻微偏移（视差感）
      let coreOffsetX = 0;
      let coreOffsetY = 0;
      if (mouseRef.current.inside) {
        const dx = mouseRef.current.x - cx;
        const dy = mouseRef.current.y - cy;
        const dist = Math.hypot(dx, dy);
        if (dist > 0.1) {
          coreOffsetX = (dx / dist) * Math.min(8, dist * 0.05);
          coreOffsetY = (dy / dist) * Math.min(8, dist * 0.05);
        }
      }
      const ccx = cx + coreOffsetX;
      const ccy = cy + coreOffsetY;

      // 晶核主体（径向渐变）
      const coreGrad = ctx.createRadialGradient(
        ccx - coreR * 0.25,
        ccy - coreR * 0.3,
        coreR * 0.1,
        ccx,
        ccy,
        coreR
      );
      coreGrad.addColorStop(0, "rgba(255,255,255,0.95)");
      coreGrad.addColorStop(0.3, `rgba(52,211,153,${0.85 * breath})`);
      coreGrad.addColorStop(0.65, "rgba(232,121,249,0.55)");
      coreGrad.addColorStop(1, "rgba(251,113,133,0.2)");
      ctx.fillStyle = coreGrad;
      ctx.shadowBlur = 30;
      ctx.shadowColor = COLORS.emerald;
      ctx.beginPath();
      ctx.arc(ccx, ccy, coreR, 0, Math.PI * 2);
      ctx.fill();

      // 晶核内部六边形纹理
      ctx.save();
      ctx.translate(ccx, ccy);
      ctx.globalAlpha = 0.25;
      ctx.strokeStyle = "rgba(255,255,255,0.6)";
      ctx.lineWidth = 0.8;
      const hexR = coreR * 0.7;
      for (let layer = 0; layer < 3; layer++) {
        const r = hexR * (1 - layer * 0.3);
        ctx.beginPath();
        for (let i = 0; i < 6; i++) {
          const a = (Math.PI / 3) * i + now * 0.0002 * (layer % 2 ? 1 : -1);
          const px = Math.cos(a) * r;
          const py = Math.sin(a) * r;
          if (i === 0) ctx.moveTo(px, py);
          else ctx.lineTo(px, py);
        }
        ctx.closePath();
        ctx.stroke();
      }
      ctx.restore();

      // 高光
      ctx.globalAlpha = 0.4;
      ctx.fillStyle = "#ffffff";
      ctx.beginPath();
      ctx.ellipse(
        ccx - coreR * 0.25,
        ccy - coreR * 0.35,
        coreR * 0.35,
        coreR * 0.18,
        -0.4,
        0,
        Math.PI * 2
      );
      ctx.fill();
      ctx.globalAlpha = 1;
      ctx.shadowBlur = 0;

      // === 6. 冲击波环 ===
      shockRingsRef.current = shockRingsRef.current.filter((ring) => {
        const elapsed = now - ring.born;
        if (elapsed < 0 || elapsed > ring.duration) return elapsed <= ring.duration + 50;
        const t = elapsed / ring.duration;
        const r = ring.maxRadius * t;
        const alpha = (1 - t) * 0.8;
        ctx.globalAlpha = alpha;
        ctx.strokeStyle = ring.color;
        ctx.lineWidth = 2.5 * (1 - t * 0.5);
        ctx.shadowBlur = 12;
        ctx.shadowColor = ring.color;
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI * 2);
        ctx.stroke();
        ctx.shadowBlur = 0;
        return true;
      });
      shockRingsRef.current = shockRingsRef.current.filter(
        (r) => now - r.born < r.duration
      );
      ctx.globalAlpha = 1;

      // === 7. 爆发粒子 ===
      burstParticlesRef.current = burstParticlesRef.current.filter((p) => {
        const age = now - p.born;
        if (age > p.life) return false;
        p.x += p.vx * dt;
        p.y += p.vy * dt;
        p.vx *= 0.96;
        p.vy *= 0.96;
        const t = age / p.life;
        const alpha = 1 - t;
        ctx.globalAlpha = alpha;
        ctx.fillStyle = p.color;
        ctx.shadowBlur = 8;
        ctx.shadowColor = p.color;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size * (1 - t * 0.5), 0, Math.PI * 2);
        ctx.fill();
        return true;
      });
      ctx.globalAlpha = 1;
      ctx.shadowBlur = 0;

      rafId = requestAnimationFrame(draw);
    };
    rafId = requestAnimationFrame(draw);

    return () => {
      cancelAnimationFrame(rafId);
      ro.disconnect();
    };
  }, [initParticles]);

  // ===== 鼠标追踪（视差）=====
  const handleMouseMove = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      const rect = e.currentTarget.getBoundingClientRect();
      mouseRef.current = {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
        inside: true,
      };
    },
    []
  );
  const handleMouseLeave = useCallback(() => {
    mouseRef.current.inside = false;
  }, []);

  // 进度比例（用于显示）
  const fillPct = Math.min(100, (crystals / Math.max(1, crystalCap)) * 100);

  return (
    <div className="relative flex flex-col items-center justify-center gap-4 select-none">
      {/* 连击显示 */}
      {combo > 1 && (
        <div className="absolute -top-2 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-rose-500/20 border border-rose-400/40 text-rose-200 text-xs font-mono animate-pulse z-10">
          ×{combo} 连击
        </div>
      )}

      <button
        onClick={handleClick}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
        className="relative h-52 w-52 sm:h-64 sm:w-64 rounded-full focus:outline-none group"
        aria-label="脉冲扫描，获取记忆晶体"
      >
        {/* Canvas 粒子层 */}
        <div
          ref={containerRef}
          className="absolute inset-0 rounded-full overflow-hidden"
        >
          <canvas ref={canvasRef} className="block w-full h-full" />
        </div>

        {/* CSS 旋转外环装饰（与 Canvas 叠加）*/}
        <div
          className="absolute inset-2 rounded-full border border-emerald-400/30 pointer-events-none"
          style={{ animation: "echo-spin 18s linear infinite" }}
        >
          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-emerald-300 shadow-[0_0_8px_#34d399]" />
          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 h-1.5 w-1.5 rounded-full bg-rose-300 shadow-[0_0_8px_#fb7185]" />
        </div>
        {/* 反向旋转虚线内环 */}
        <div
          className="absolute inset-6 rounded-full border border-fuchsia-400/20 border-dashed pointer-events-none"
          style={{ animation: "echo-spin 24s linear infinite reverse" }}
        />

        {/* 脉冲扩散环（点击时，CSS 叠加 Canvas 冲击波）*/}
        <div
          key={`ring-${pulseAnim}`}
          className="absolute inset-8 rounded-full border-2 border-emerald-400/60 pointer-events-none"
          style={{ animation: "echo-ring 0.7s ease-out forwards" }}
        />

        {/* 浮动数字（保留 HTML，便于清晰文字）*/}
        {floats.map((f) => (
          <span
            key={f.id}
            className="absolute pointer-events-none font-mono font-bold text-sm z-10"
            style={{
              left: f.x,
              top: f.y,
              color: f.color,
              transform: "translate(-50%, -50%)",
              animation: "echo-float 0.9s ease-out forwards",
              textShadow: `0 0 8px ${f.color}`,
            }}
          >
            {f.text}
          </span>
        ))}
      </button>

      {/* 数值显示 */}
      <div className="text-center">
        <div
          className="text-2xl font-mono font-bold text-emerald-300"
          style={{ textShadow: "0 0 12px rgba(52,211,153,0.5)" }}
        >
          {formatNum(crystals)}
        </div>
        <div className="text-xs text-muted-foreground mt-0.5">
          记忆晶体 · {crystalsPerSec.toFixed(1)}/s · 上限{" "}
          {formatNum(crystalCap)}
        </div>
        <div className="text-[11px] text-muted-foreground/70 mt-2">
          点击晶体发起
          <span className="text-emerald-300">脉冲扫描</span>，连击叠加加成
        </div>
        <div className="text-[10px] text-muted-foreground/50 mt-1 tabular-nums">
          仓库 {fillPct.toFixed(1)}% · 连击 ×{Math.max(1, combo)}
        </div>
      </div>

      <style jsx>{`
        @keyframes echo-spin {
          to {
            transform: rotate(360deg);
          }
        }
        @keyframes echo-float {
          0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
          }
          100% {
            opacity: 0;
            transform: translate(-50%, -180%) scale(1.3);
          }
        }
        @keyframes echo-ring {
          0% {
            transform: scale(0.8);
            opacity: 0.8;
          }
          100% {
            transform: scale(1.6);
            opacity: 0;
          }
        }
      `}</style>
    </div>
  );
}