import { Fragment } from 'react';
import { Dialog as HeadlessDialog, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';

interface DialogProps {
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    children: React.ReactNode;
    size?: 'sm' | 'md' | 'lg' | 'xl';
    showClose?: boolean;
}

const sizeClasses = {
    sm: 'max-w-md',
    md: 'max-w-lg',
    lg: 'max-w-2xl',
    xl: 'max-w-4xl',
};

export default function Dialog({
    isOpen,
    onClose,
    title,
    children,
    size = 'md',
    showClose = true,
}: DialogProps) {
    return (
        <Transition appear show={isOpen} as={Fragment}>
            <HeadlessDialog as="div" className="relative z-50" onClose={onClose}>
                <Transition.Child
                    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/50 backdrop-blur-sm" />
                </Transition.Child>

                <div className="fixed inset-0 overflow-y-auto">
                    <div className="flex min-h-full items-center justify-center p-4">
                        <Transition.Child
                            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"
                        >
                            <HeadlessDialog.Panel
                                className={`w-full ${sizeClasses[size]} transform rounded-2xl bg-white dark:bg-gray-800 p-6 text-left align-middle shadow-xl transition-all border border-gray-200 dark:border-gray-700`}
                            >
                                {title && (
                                    <div className="flex items-center justify-between mb-4">
                                        <HeadlessDialog.Title
                                            as="h3"
                                            className="text-lg font-semibold text-gray-900 dark:text-white"
                                        >
                                            {title}
                                        </HeadlessDialog.Title>
                                        {showClose && (
                                            <button
                                                onClick={onClose}
                                                className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                                            >
                                                <XMarkIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
                                            </button>
                                        )}
                                    </div>
                                )}

                                {children}
                            </HeadlessDialog.Panel>
                        </Transition.Child>
                    </div>
                </div>
            </HeadlessDialog>
        </Transition>
    );
}

// Componente auxiliar para o corpo do dialog
Dialog.Body = function DialogBody({ children, className = '' }: { children: React.ReactNode; className?: string }) {
    return <div className={`text-sm text-gray-600 dark:text-gray-300 ${className}`}>{children}</div>;
};

// Componente auxiliar para o rodapé do dialog
Dialog.Footer = function DialogFooter({ children, className = '' }: { children: React.ReactNode; className?: string }) {
    return <div className={`mt-6 flex items-center justify-end space-x-3 ${className}`}>{children}</div>;
};