"use client";

import { useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { LogOut } from "lucide-react";

interface LeaveConfirmModalProps {
  open: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function LeaveConfirmModal({
  open,
  onConfirm,
  onCancel,
}: LeaveConfirmModalProps) {
  const backdropRef = useRef<HTMLDivElement>(null);

  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === backdropRef.current) onCancel();
  };

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          ref={backdropRef}
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.15 }}
          onClick={handleBackdropClick}
        >
          <motion.div
            className="mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            transition={{ type: "spring", damping: 25, stiffness: 350 }}
          >
            <div className="flex flex-col items-center">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
                <LogOut size={22} className="text-rose-400" />
              </div>

              <h2 className="mt-4 text-base font-bold text-white">
                确定要退出房间吗？
              </h2>
              <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
                退出后你的滑卡进度不会丢失，可以用房间号重新加入
              </p>

              <div className="mt-5 flex w-full gap-2.5">
                <button
                  onClick={onCancel}
                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
                >
                  继续滑卡
                </button>
                <button
                  onClick={onConfirm}
                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
                >
                  退出房间
                </button>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}