"use client";
// 回响星核 / Echo Nexus — 成就系统面板
import { useGameStore } from "@/store/gameStore";
import { ACHIEVEMENTS } from "@/lib/game/achievements";
import { achievementBonuses } from "@/lib/game/achievements";
import { Trophy, Lock } from "lucide-react";

export function AchievementsPanel() {
  const achievements = useGameStore((s) => s.achievements);
  const unlockedCount = Object.values(achievements).filter(Boolean).length;
  const bonus = achievementBonuses(achievements);

  return (
    <div className="flex flex-col gap-2.5 h-full">
      {/* 顶部：进度 + 加成总览 */}
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold flex items-center gap-1.5">
          <Trophy className="h-4 w-4 text-amber-400" />
          成就
        </h3>
        <span className="text-[10px] text-muted-foreground font-mono">
          {unlockedCount} / {ACHIEVEMENTS.length}
        </span>
      </div>

      {/* 永久加成条 */}
      <div className="rounded-lg border border-amber-400/20 bg-amber-950/20 px-2.5 py-1.5 flex items-center gap-3 text-[10px]">
        <span className="text-amber-300/80">永久加成</span>
        {bonus.crystalsPerSecPct > 0 && (
          <span className="text-emerald-300">产能 +{bonus.crystalsPerSecPct}%</span>
        )}
        {bonus.insightPct > 0 && (
          <span className="text-fuchsia-300">洞见 +{bonus.insightPct}%</span>
        )}
        {bonus.crystalsPerSecPct === 0 && bonus.insightPct === 0 && (
          <span className="text-muted-foreground/60">暂无（达成成就解锁）</span>
        )}
      </div>

      {/* 成就网格 — 移除固定 max-h，用 flex-1 min-h-0 自适应父容器，避免小屏挤压重叠 */}
      <div className="flex-1 min-h-0 grid grid-cols-1 sm:grid-cols-2 gap-1.5 content-start overflow-y-auto echo-scroll pr-1">
        {ACHIEVEMENTS.map((a) => {
          const unlocked = !!achievements[a.id];
          return (
            <div
              key={a.id}
              className={`relative rounded-lg border px-2.5 py-2 transition-all duration-300 overflow-hidden ${
                unlocked
                  ? "border-white/15 bg-black/30"
                  : "border-white/5 bg-black/15 opacity-60"
              }`}
              style={
                unlocked
                  ? { boxShadow: `inset 0 0 16px ${a.color}11` }
                  : undefined
              }
            >
              {unlocked && (
                <div
                  className="absolute -top-6 -right-6 h-16 w-16 rounded-full blur-2xl opacity-40"
                  style={{ background: a.color }}
                />
              )}
              <div className="relative flex items-start gap-2">
                {/* 图标徽章 */}
                <div
                  className="shrink-0 h-8 w-8 rounded-lg flex items-center justify-center text-base"
                  style={{
                    background: unlocked ? `${a.color}22` : "rgba(255,255,255,0.04)",
                    border: `1px solid ${unlocked ? a.color + "55" : "rgba(255,255,255,0.08)"}`,
                    color: unlocked ? a.color : "#666",
                    boxShadow: unlocked ? `0 0 10px ${a.color}33` : "none",
                  }}
                >
                  {unlocked ? a.icon : <Lock className="h-3.5 w-3.5" />}
                </div>
                {/* 文本 */}
                <div className="min-w-0 flex-1">
                  <div
                    className="text-[11px] font-semibold truncate"
                    style={{ color: unlocked ? a.color : "rgba(255,255,255,0.5)" }}
                  >
                    {a.name}
                  </div>
                  <div className="text-[10px] text-muted-foreground/80 leading-tight mt-0.5">
                    {a.desc}
                  </div>
                  {unlocked && (
                    <div className="text-[9px] mt-1 font-mono" style={{ color: a.color + "cc" }}>
                      ✦ {a.rewardText}
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <style jsx global>{`
        .echo-scroll::-webkit-scrollbar { width: 5px; }
        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
      `}</style>
    </div>
  );
}