"use client";
// 回响星核 / Echo Nexus — 设置对话框
import { useGameStore } from "@/store/gameStore";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Trash2, Github, AlertTriangle, Volume2 } from "lucide-react";
import { useState } from "react";
import { useToast } from "@/hooks/use-toast";
import { sfx } from "@/hooks/useAudio";

export function SettingsDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
}) {
  const soundOn = useGameStore((s) => s.soundOn);
  const toggleSound = useGameStore((s) => s.toggleSound);
  const hardReset = useGameStore((s) => s.hardReset);
  const ascensions = useGameStore((s) => s.ascensions);
  const totalDecoded = useGameStore((s) => s.totalDecoded);
  const { toast } = useToast();
  const [confirmReset, setConfirmReset] = useState(false);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-gradient-to-br from-slate-900/80 to-black/90 border-white/15">
        <DialogHeader>
          <DialogTitle>设置</DialogTitle>
          <DialogDescription>游戏偏好与存档管理</DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-2">
          {/* 音效 */}
          <div className="flex items-center justify-between rounded-lg border border-white/10 bg-black/30 p-3">
            <div>
              <Label className="text-sm">音效反馈</Label>
              <p className="text-[11px] text-muted-foreground mt-0.5">
                脉冲、解码、探险、飞升等程序化音效
              </p>
            </div>
            <div className="flex items-center gap-2">
              <Button
                size="sm"
                variant="ghost"
                className="h-7 px-2 text-muted-foreground hover:text-foreground"
                onClick={() => sfx("decodeSuccess")}
                aria-label="试听音效"
              >
                <Volume2 className="h-3.5 w-3.5" />
              </Button>
              <Switch checked={soundOn} onCheckedChange={toggleSound} />
            </div>
          </div>

          {/* 存档信息 */}
          <div className="rounded-lg border border-white/10 bg-black/30 p-3 text-xs space-y-1.5">
            <div className="flex justify-between">
              <span className="text-muted-foreground">累计解码</span>
              <span className="font-mono">{totalDecoded} 颗</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">飞升周目</span>
              <span className="font-mono">{ascensions}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">存档位置</span>
              <span className="font-mono text-[10px]">浏览器本地</span>
            </div>
          </div>

          {/* 危险操作 */}
          <div className="rounded-lg border border-rose-500/30 bg-rose-950/20 p-3">
            <div className="flex items-center gap-2 mb-2">
              <AlertTriangle className="h-4 w-4 text-rose-400" />
              <span className="text-sm font-medium text-rose-200">危险操作</span>
            </div>
            <p className="text-[11px] text-muted-foreground mb-2">
              清空所有进度，包括记忆图谱与飞升记录，不可恢复。
            </p>
            <Button
              variant="outline"
              size="sm"
              className="border-rose-500/40 text-rose-300 hover:bg-rose-500/10"
              onClick={() => {
                if (!confirmReset) {
                  setConfirmReset(true);
                  return;
                }
                hardReset();
                setConfirmReset(false);
                onOpenChange(false);
                toast({ title: "存档已清空", description: "一切归零，重新开始。" });
              }}
            >
              <Trash2 className="h-3.5 w-3.5 mr-1" />
              {confirmReset ? "再次点击确认清空" : "清空存档"}
            </Button>
          </div>

          {/* 仓库链接 */}
          <a
            href="https://git.atdunbg.xyz/Super_Z/echo-nexus"
            target="_blank"
            rel="noreferrer"
            className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition px-1"
          >
            <Github className="h-3.5 w-3.5" />
            git.atdunbg.xyz/Super_Z/echo-nexus
          </a>
        </div>

        <DialogFooter>
          <Button variant="ghost" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
