"use client";
// 回响星核 / Echo Nexus — 深空信标面板（v0.5 每日挑战 + 本地排行榜）
import { useState, useEffect, useCallback } from "react";
import { useGameStore } from "@/store/gameStore";
import { useToast } from "@/hooks/use-toast";
import { sfx } from "@/hooks/useAudio";
import {
  generateDailyChallenge,
  loadDailyProgress,
  loadLeaderboard,
  claimBeaconReward,
  msUntilNextDay,
  formatCountdown,
  getTodayKey,
  BEACON_DIFFICULTY,
  BEACON_TYPE_META,
  type BeaconDailyChallenge,
  type BeaconDailyProgress,
  type BeaconScoreEntry,
  type BeaconChallengeType,
  type BeaconDifficulty,
} from "@/lib/game/beacon";
import { formatNum } from "@/lib/game/config";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Radio, Clock, Trophy, Sparkles, Award, Crown, Medal } from "lucide-react";

const DIFFICULTY_ORDER: BeaconDifficulty[] = ["routine", "anomaly", "singular"];

function rankBadge(rank: number) {
  if (rank === 0) return { icon: Crown, color: "#fbbf24", label: "1st" };
  if (rank === 1) return { icon: Medal, color: "#cbd5e1", label: "2nd" };
  if (rank === 2) return { icon: Award, color: "#f97316", label: "3rd" };
  return null;
}

export function BeaconPanel() {
  const insights = useGameStore((s) => s.insights);
  const grantBeaconReward = useGameStore((s) => s.grantBeaconReward);
  const { toast } = useToast();

  const [challenge, setChallenge] = useState<BeaconDailyChallenge | null>(null);
  const [progress, setProgress] = useState<BeaconDailyProgress | null>(null);
  const [leaderboard, setLeaderboard] = useState<BeaconScoreEntry[]>([]);
  const [countdown, setCountdown] = useState("00:00:00");
  const [now, setNow] = useState(Date.now());

  // 初始化 + 每秒刷新（进度 + 倒计时）
  useEffect(() => {
    setChallenge(generateDailyChallenge());
    setProgress(loadDailyProgress());
    setLeaderboard(loadLeaderboard());
    const id = setInterval(() => {
      setNow(Date.now());
      setProgress(loadDailyProgress());
      setChallenge((c) => c ?? generateDailyChallenge());
    }, 1000);
    return () => clearInterval(id);
  }, []);

  useEffect(() => {
    setCountdown(formatCountdown(msUntilNextDay(new Date(now))));
  }, [now]);

  const handleClaim = useCallback(() => {
    if (!challenge || !progress) return;
    if (progress.completedAt === null || progress.claimed) return;
    const res = claimBeaconReward(challenge, progress);
    setLeaderboard(res.leaderboard);
    setProgress(loadDailyProgress());
    // 发放奖励到游戏状态
    grantBeaconReward(res.rewardInsight, res.rewardContact);
    sfx("achievement");
    toast({
      title: "✦ 信标奖励已领取",
      description: `+${res.rewardInsight} 洞见 · +${res.rewardContact.toFixed(1)} 接触 · 得分 ${res.score}`,
    });
  }, [challenge, progress, toast, grantBeaconReward]);

  if (!challenge || !progress) {
    return (
      <div className="flex items-center justify-center h-full text-xs text-muted-foreground/60">
        正在校准深空信标…
      </div>
    );
  }

  const diffMeta = BEACON_DIFFICULTY[challenge.difficulty];
  const typeMeta = BEACON_TYPE_META[challenge.type];
  const pct = Math.min(100, (progress.progress / challenge.goal) * 100);
  const isCompleted = progress.completedAt !== null;
  const isClaimed = progress.claimed;
  const canClaim = isCompleted && !isClaimed;

  return (
    <div className="flex flex-col gap-2.5 h-full overflow-y-auto echo-scroll pr-0.5">
      <style jsx global>{`
        .echo-scroll::-webkit-scrollbar { width: 4px; }
        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
        @keyframes beacon-pulse-ring {
          0% { transform: scale(0.8); opacity: 0.8; }
          100% { transform: scale(2.2); opacity: 0; }
        }
        @keyframes beacon-glow {
          0%, 100% { box-shadow: 0 0 18px ${diffMeta.glow}, inset 0 0 12px ${diffMeta.glow}; }
          50% { box-shadow: 0 0 32px ${diffMeta.glow}, inset 0 0 20px ${diffMeta.glow}; }
        }
      `}</style>

      {/* 头部：信标 + 倒计时 */}
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold flex items-center gap-1.5">
          <Radio className="h-4 w-4 text-fuchsia-400" />
          深空信标
        </h3>
        <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
          <Clock className="h-3 w-3" />
          次日重置
          <span className="font-mono text-fuchsia-300/90">{countdown}</span>
        </div>
      </div>

      {/* 每日挑战卡片 */}
      <div
        className="relative rounded-xl border p-3 overflow-hidden"
        style={{
          borderColor: `${diffMeta.color}55`,
          background: `linear-gradient(135deg, ${diffMeta.color}1f, rgba(0,0,0,0.45))`,
          animation: isCompleted ? "none" : "beacon-glow 3s ease-in-out infinite",
        }}
      >
        {/* 背景装饰：脉冲环 */}
        {!isCompleted && (
          <>
            <div
              className="absolute top-4 right-4 h-10 w-10 rounded-full pointer-events-none"
              style={{
                border: `1.5px solid ${diffMeta.color}`,
                animation: "beacon-pulse-ring 2.5s ease-out infinite",
              }}
            />
            <div
              className="absolute top-4 right-4 h-10 w-10 rounded-full pointer-events-none"
              style={{
                border: `1.5px solid ${diffMeta.color}`,
                animation: "beacon-pulse-ring 2.5s ease-out infinite 1.25s",
              }}
            />
          </>
        )}

        <div className="relative">
          {/* 难度 + 类型 标签 */}
          <div className="flex items-center gap-1.5 mb-2">
            <span
              className="text-[10px] font-mono px-1.5 py-0.5 rounded flex items-center gap-1"
              style={{ background: `${diffMeta.color}22`, color: diffMeta.color, border: `1px solid ${diffMeta.color}55` }}
            >
              <span>{diffMeta.icon}</span>
              {diffMeta.label}
            </span>
            <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 text-muted-foreground border border-white/10">
              {typeMeta.icon} {typeMeta.label}
            </span>
            {isCompleted && (
              <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 flex items-center gap-1">
                <Sparkles className="h-2.5 w-2.5" /> 已完成
              </span>
            )}
          </div>

          {/* 挑战标题 */}
          <h4 className="text-sm font-semibold mb-1" style={{ color: diffMeta.color, textShadow: `0 0 10px ${diffMeta.glow}` }}>
            {challenge.title}
          </h4>
          <p className="text-[11px] text-muted-foreground/80 leading-relaxed mb-2.5">
            {challenge.desc}
          </p>

          {/* 进度条 */}
          <div className="mb-2">
            <div className="flex items-center justify-between mb-1">
              <span className="text-[10px] text-muted-foreground/70">进度</span>
              <span className="text-[11px] font-mono font-semibold" style={{ color: diffMeta.color }}>
                {Math.min(progress.progress, challenge.goal)} / {challenge.goal} {typeMeta.unit}
              </span>
            </div>
            <Progress
              value={pct}
              className="h-2 bg-black/40"
              style={{
                ["--progress-color" as string]: diffMeta.color,
              }}
            />
          </div>

          {/* 奖励 + 领取按钮 */}
          <div className="flex items-center justify-between gap-2">
            <div className="flex items-center gap-2 text-[10px]">
              <span className="text-muted-foreground/60">奖励：</span>
              {challenge.rewardInsight > 0 && (
                <span className="text-amber-300 font-mono">+{formatNum(challenge.rewardInsight)}洞见</span>
              )}
              <span className="text-fuchsia-300 font-mono">+{challenge.rewardContact.toFixed(1)}接触</span>
            </div>
            <Button
              onClick={handleClaim}
              disabled={!canClaim}
              size="sm"
              className="h-7 px-3 text-[11px] border-0"
              style={{
                background: canClaim
                  ? `linear-gradient(90deg, ${diffMeta.color}, ${diffMeta.color}cc)`
                  : undefined,
              }}
            >
              {isClaimed ? "已领取" : canClaim ? "领取奖励" : isCompleted ? "已领取" : "进行中…"}
            </Button>
          </div>

          {/* 完成时长 */}
          {isCompleted && progress.durationSec > 0 && (
            <div className="mt-1.5 text-[10px] text-muted-foreground/50 text-center">
              完成用时 {Math.floor(progress.durationSec / 60)}分{progress.durationSec % 60}秒
            </div>
          )}
        </div>
      </div>

      {/* 本地排行榜 */}
      <div className="rounded-xl border border-white/10 bg-black/30 p-2.5">
        <div className="flex items-center gap-1.5 mb-2">
          <Trophy className="h-3.5 w-3.5 text-amber-400" />
          <span className="text-xs font-semibold">深空排行榜</span>
          <span className="text-[10px] text-muted-foreground/50">本地 · Top {leaderboard.length || 0}</span>
        </div>

        {leaderboard.length === 0 ? (
          <div className="text-center py-4 text-[11px] text-muted-foreground/40">
            <Trophy className="h-6 w-6 mx-auto mb-1 opacity-30" />
            尚无记录。完成今日信标即可登榜。
          </div>
        ) : (
          <div className="space-y-0.5 max-h-[180px] overflow-y-auto echo-scroll">
            {leaderboard.map((entry, i) => {
              const rb = rankBadge(i);
              const eDiff = BEACON_DIFFICULTY[entry.difficulty];
              const eType = BEACON_TYPE_META[entry.challenge as BeaconChallengeType];
              const isMine = entry.dateKey === getTodayKey();
              return (
                <div
                  key={`${entry.timestamp}-${i}`}
                  className={`flex items-center gap-2 px-2 py-1 rounded-lg text-[11px] ${
                    isMine ? "bg-fuchsia-500/10 border border-fuchsia-500/20" : "hover:bg-white/5"
                  }`}
                >
                  {/* 排名 */}
                  <span className="w-6 flex items-center justify-center">
                    {rb ? (
                      <rb.icon className="h-3.5 w-3.5" style={{ color: rb.color }} />
                    ) : (
                      <span className="text-muted-foreground/50 font-mono">{i + 1}</span>
                    )}
                  </span>
                  {/* 类型 + 难度 */}
                  <span className="flex items-center gap-1 flex-1 min-w-0">
                    <span style={{ color: eDiff.color }} className="font-mono">{eDiff.icon}</span>
                    <span className="text-muted-foreground/80 truncate">{eType.label}</span>
                    {entry.progress >= 1 && <span className="text-emerald-400/70">✓</span>}
                  </span>
                  {/* 用时 */}
                  <span className="text-muted-foreground/50 font-mono text-[10px] w-16 text-right">
                    {Math.floor(entry.durationSec / 60)}m{entry.durationSec % 60}s
                  </span>
                  {/* 分数 */}
                  <span className="font-mono font-semibold w-12 text-right" style={{ color: eDiff.color }}>
                    {formatNum(entry.score)}
                  </span>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* 难度图例 */}
      <div className="flex items-center justify-center gap-3 text-[9px] text-muted-foreground/50">
        {DIFFICULTY_ORDER.map((d) => {
          const m = BEACON_DIFFICULTY[d];
          return (
            <span key={d} className="flex items-center gap-1">
              <span style={{ color: m.color }}>{m.icon}</span>
              {m.label} ×{m.mult}
            </span>
          );
        })}
      </div>
    </div>
  );
}