echo-nexus/src/components/game/AchievementNotifier.tsx

"use client";
// 回响星核 / Echo Nexus — 成就解锁通知（v0.9 全屏特效增强）
// 工单 Issue #2 反馈"成就系统没看出来有什么用"，改为居中全息弹窗 + 奖励数字弹出
import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { useGameStore } from "@/store/gameStore";
import { useToast } from "@/hooks/use-toast";
import { sfx } from "@/hooks/useAudio";
import type { Achievement } from "@/lib/game/achievements";

interface NotificationItem {
  achievement: Achievement;
  id: number;
}

export function AchievementNotifier() {
  const queue = useGameStore((s) => s._achievementQueue);
  const consume = useGameStore((s) => s.consumeAchievementQueue);
  const { toast } = useToast();
  const [notifications, setNotifications] = useState<NotificationItem[]>([]);

  useEffect(() => {
    if (queue.length === 0) return;
    const items = consume();
    for (const a of items) {
      sfx("achievement");
      // v0.9：全屏居中特效通知
      const id = Date.now() + Math.random();
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setNotifications((prev) => [...prev, { achievement: a, id }]);
      // 4 秒后自动移除
      setTimeout(() => {
        setNotifications((prev) => prev.filter((n) => n.id !== id));
      }, 4000);
      // 同时保留底部 toast 作为日志
      toast({
        title: `成就解锁：${a.name}`,
        description: `${a.desc}　奖励：${a.rewardText}`,
      });
    }
  }, [queue, consume, toast]);

  if (notifications.length === 0) return null;

  return (
    <div className="fixed inset-0 z-[120] pointer-events-none flex items-center justify-center">
      <AnimatePresence>
        {notifications.map((n, idx) => {
          const a = n.achievement;
          // 多个同时出现时垂直堆叠偏移
          const offset = (idx - (notifications.length - 1) / 2) * 140;
          return (
            <motion.div
              key={n.id}
              initial={{ opacity: 0, scale: 0.4, y: 40, rotateX: -30 }}
              animate={{ opacity: 1, scale: 1, y: offset, rotateX: 0 }}
              exit={{ opacity: 0, scale: 0.6, y: -60 }}
              transition={{ type: "spring", stiffness: 280, damping: 22 }}
              className="absolute"
              style={{ transformOrigin: "center center" }}
            >
              <div
                className="relative rounded-2xl border-2 px-8 py-5 backdrop-blur-xl overflow-hidden"
                style={{
                  borderColor: a.color,
                  background: `linear-gradient(135deg, ${a.color}22, rgba(5,4,16,0.92))`,
                  boxShadow: `0 0 60px ${a.color}66, 0 0 120px ${a.color}33, inset 0 0 30px ${a.color}11`,
                  minWidth: 320,
                  maxWidth: 420,
                }}
              >
                {/* 背景径向辉光 */}
                <div
                  className="absolute -top-20 -right-20 h-40 w-40 rounded-full blur-3xl opacity-50"
                  style={{ background: a.color }}
                />
                {/* 旋转光线 */}
                <motion.div
                  className="absolute inset-0 rounded-2xl opacity-20"
                  style={{
                    background: `conic-gradient(from 0deg, transparent, ${a.color}, transparent, ${a.color}, transparent)`,
                  }}
                  animate={{ rotate: 360 }}
                  transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
                />

                <div className="relative flex items-center gap-4">
                  {/* 图标徽章 */}
                  <motion.div
                    className="shrink-0 h-16 w-16 rounded-2xl flex items-center justify-center text-3xl"
                    style={{
                      background: `${a.color}33`,
                      border: `2px solid ${a.color}`,
                      boxShadow: `0 0 20px ${a.color}88, inset 0 0 12px ${a.color}44`,
                    }}
                    animate={{
                      boxShadow: [
                        `0 0 20px ${a.color}88, inset 0 0 12px ${a.color}44`,
                        `0 0 40px ${a.color}cc, inset 0 0 20px ${a.color}66`,
                        `0 0 20px ${a.color}88, inset 0 0 12px ${a.color}44`,
                      ],
                    }}
                    transition={{ duration: 2, repeat: Infinity }}
                  >
                    {a.icon}
                  </motion.div>

                  {/* 文本 */}
                  <div className="min-w-0 flex-1">
                    <motion.div
                      initial={{ opacity: 0, x: -10 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.15 }}
                      className="text-[10px] font-mono uppercase tracking-[0.2em] mb-0.5"
                      style={{ color: a.color }}
                    >
                      ✦ Achievement Unlocked
                    </motion.div>
                    <motion.h3
                      initial={{ opacity: 0, x: -10 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.2 }}
                      className="text-lg font-bold truncate"
                      style={{ color: a.color, textShadow: `0 0 12px ${a.color}66` }}
                    >
                      {a.name}
                    </motion.h3>
                    <motion.p
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ delay: 0.3 }}
                      className="text-[11px] text-muted-foreground/90 truncate"
                    >
                      {a.desc}
                    </motion.p>
                    {/* 奖励条 */}
                    <motion.div
                      initial={{ opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.4 }}
                      className="mt-1.5 inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-mono font-semibold"
                      style={{
                        background: `${a.color}22`,
                        border: `1px solid ${a.color}55`,
                        color: a.color,
                      }}
                    >
                      ▸ {a.rewardText}
                    </motion.div>
                  </div>
                </div>

                {/* 进度条（倒计时） */}
                <motion.div
                  className="absolute bottom-0 left-0 h-0.5"
                  style={{ background: a.color }}
                  initial={{ width: "100%" }}
                  animate={{ width: "0%" }}
                  transition={{ duration: 4, ease: "linear" }}
                />
              </div>
            </motion.div>
          );
        })}
      </AnimatePresence>
    </div>
  );
}