import { motion } from 'framer-motion';
import { useState } from 'react';

interface ExitGameButtonProps {
    onExit: () => void;
    playerName: string;
}

export default function ExitGameButton({ onExit, playerName }: ExitGameButtonProps) {
    const [showConfirm, setShowConfirm] = useState(false);

    const handleConfirmExit = () => {
        setShowConfirm(false);
        onExit();
    };

    return (
        <>
            <motion.button
                onClick={() => setShowConfirm(true)}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="fixed top-4 right-0 z-50 bg-gradient-to-l from-green-600 to-green-700 hover:from-green-500 hover:to-green-600 text-white rounded-l-lg px-2 py-3 shadow-lg border-2 border-green-500 border-r-0 transition-all hover:shadow-green-500/50"
                title="Volver al lobby"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    strokeWidth={3}
                    stroke="currentColor"
                    className="w-4 h-4"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
                    />
                </svg>
            </motion.button>

            {/* Modal de confirmación */}
            {showConfirm && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm">
                    <motion.div
                        initial={{ scale: 0.9, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        className="bg-zinc-900 p-6 rounded-lg border border-red-700/50 w-full max-w-md mx-4 shadow-2xl"
                    >
                        <h3 className="text-xl font-bold text-red-400 mb-4 uppercase flex items-center gap-2">
                            ⚠️ Abandonar Partida
                        </h3>
                        <p className="text-gray-300 mb-2">
                            ¿Estás seguro de que quieres abandonar la partida?
                        </p>
                        <p className="text-sm text-gray-400 mb-6">
                            La partida se cerrará para todos los jugadores y se perderá todo el progreso.
                        </p>

                        <div className="flex gap-3">
                            <button
                                onClick={() => setShowConfirm(false)}
                                className="flex-1 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded font-bold uppercase text-sm transition-colors"
                            >
                                Cancelar
                            </button>
                            <button
                                onClick={handleConfirmExit}
                                className="flex-1 py-3 bg-red-900 hover:bg-red-800 text-white rounded font-bold uppercase text-sm transition-colors"
                            >
                                Salir
                            </button>
                        </div>
                    </motion.div>
                </div>
            )}
        </>
    );
}
