"use client";
// 回响星核 / Echo Nexus — 飞升（Prestige）对话框
import { useGameStore } from "@/store/gameStore";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RotateCcw, Sparkles } from "lucide-react";
import { PRESTIGE } from "@/lib/game/config";
import { computeNewBlueprints, computePrestigeBonus } from "@/lib/game/engine";
import { useState } from "react";
import { useToast } from "@/hooks/use-toast";
import { sfx } from "@/hooks/useAudio";

export function PrestigeDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
}) {
  const state = useGameStore();
  const doPrestige = useGameStore((s) => s.doPrestige);
  const { toast } = useToast();
  const [confirming, setConfirming] = useState(false);

  const newBp = computeNewBlueprints(state);
  const bonus = computePrestigeBonus(state);
  const totalBpAfter = Math.min(PRESTIGE.maxBlueprints, state.blueprints.length + newBp);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-gradient-to-br from-fuchsia-950/70 to-black/90 border-fuchsia-400/40">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-fuchsia-100">
            <RotateCcw className="h-5 w-5" />
            飞升 · 跨越维度
          </DialogTitle>
          <DialogDescription className="text-fuchsia-200/70">
            当接触进度满溢，你将跨越维度与以太族相会。本次飞升将重置资源与技术，但保留记忆图谱与蓝图加成。
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3 py-2">
          {/* 本次飞升获得 */}
          <div className="rounded-lg border border-fuchsia-400/30 bg-fuchsia-950/30 p-3">
            <div className="flex items-center justify-between">
              <span className="text-sm text-fuchsia-200">本次获得蓝图</span>
              <span className="text-2xl font-mono font-bold text-fuchsia-100">
                +{newBp}
              </span>
            </div>
            <p className="text-[11px] text-muted-foreground mt-1">
              蓝图总数将达 {totalBpAfter}/{PRESTIGE.maxBlueprints}（每 {PRESTIGE.blueprintsPerDecode} 次解码产出 1 张）
            </p>
          </div>

          {/* 永久加成 */}
          <div className="grid grid-cols-3 gap-2">
            <BonusCard
              label="产能"
              value={`+${(totalBpAfter * PRESTIGE.perBlueprint.crystalsPerSecMult * 100).toFixed(0)}%`}
              color="#34d399"
            />
            <BonusCard
              label="洞见"
              value={`+${(totalBpAfter * PRESTIGE.perBlueprint.insightMult * 100).toFixed(0)}%`}
              color="#fbbf24"
            />
            <BonusCard
              label="接触"
              value={`+${(totalBpAfter * PRESTIGE.perBlueprint.contactRateMult * 100).toFixed(0)}%`}
              color="#e879f9"
            />
          </div>

          {/* 保留 / 重置 */}
          <div className="text-[11px] text-muted-foreground space-y-1 pt-1">
            <div className="flex items-center gap-1.5">
              <Sparkles className="h-3 w-3 text-fuchsia-400" />
              保留：记忆图谱、累计解码数、飞升次数、蓝图
            </div>
            <div className="flex items-center gap-1.5">
              <RotateCcw className="h-3 w-3 text-rose-400" />
              重置：晶体、洞见、技术树、接触进度、待解码晶体
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="ghost" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button
            disabled={newBp <= 0 || confirming}
            onClick={() => {
              if (!confirming) {
                setConfirming(true);
                return;
              }
              const res = doPrestige();
              onOpenChange(false);
              setConfirming(false);
              if (res) {
                sfx("prestige");
                toast({
                  title: "✦ 飞升成功",
                  description: `获得 ${res.newBp} 张蓝图，进入第 ${state.ascensions + 2} 周目。`,
                });
              }
            }}
            className="bg-gradient-to-r from-fuchsia-600 to-rose-500 hover:from-fuchsia-500 hover:to-rose-400 text-white border-0"
          >
            {confirming ? "再次确认飞升" : newBp <= 0 ? "无新蓝图" : "飞升"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

function BonusCard({
  label,
  value,
  color,
}: {
  label: string;
  value: string;
  color: string;
}) {
  return (
    <div
      className="rounded-lg border p-2 text-center"
      style={{ borderColor: `${color}44`, background: `${color}11` }}
    >
      <div className="text-[10px] text-muted-foreground">{label}</div>
      <div className="text-sm font-mono font-bold" style={{ color }}>
        {value}
      </div>
    </div>
  );
}
