import { Fragment } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { DialogPanel, TransitionChild } from '@headlessui/react';
import { useLogout } from '../../../lib/auth';
import IconX from '../../../components/Icon/IconX';
import IconLoader from '../../../components/Icon/IconLoader';

interface LogoutModalProps {
    isOpen: boolean;
    onClose: () => void;
}

export const LogoutModal = ({ isOpen, onClose }: LogoutModalProps) => {
    const logout = useLogout();

    const handleLogout = async () => {
        await logout.mutateAsync({});
        onClose();
    };

    return (
        <Transition appear show={isOpen} as={Fragment}>
            <Dialog as="div" className="relative z-50" onClose={onClose}>
                {/* BACKDROP */}
                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
                    <div className="fixed inset-0 bg-black/60" />
                </TransitionChild>

                {/* PANEL */}
                <div className="fixed inset-0 flex items-center justify-center p-4">
                    <TransitionChild
                        as={Fragment}
                        enter="ease-out duration-300"
                        enterFrom="opacity-0 scale-95"
                        enterTo="opacity-100 scale-100"
                        leave="ease-in duration-200"
                        leaveFrom="opacity-100 scale-100"
                        leaveTo="opacity-0 scale-95"
                    >
                        <DialogPanel className="w-full max-w-md transform overflow-hidden rounded-xl bg-white p-6 text-center align-middle shadow-xl transition-all dark:bg-[#121c2c]">
                            {/* CLOSE */}
                            <button type="button" onClick={onClose} className="absolute right-4 top-4 text-gray-400 hover:text-gray-800 dark:hover:text-white">
                                <IconX />
                            </button>

                            <Dialog.Title as="h3" className="text-lg font-semibold leading-6 text-gray-900 dark:text-white">
                                Confirm Logout
                            </Dialog.Title>
                            <div className="mt-4 text-sm text-gray-600 dark:text-gray-300">Are you sure you want to logout?</div>

                            <div className="mt-6 flex justify-center gap-4">
                                <button type="button" onClick={onClose} className="btn btn-outline-primary">
                                    Cancel
                                </button>
                                <button type="button" onClick={handleLogout} className="btn btn-danger disabled:opacity-50" disabled={logout.isPending}>
                                    {logout.isPending ? <IconLoader /> : 'Logout'}
                                </button>
                            </div>
                        </DialogPanel>
                    </TransitionChild>
                </div>
            </Dialog>
        </Transition>
    );
};
