import * as React from 'react';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@admin/components/ui/dialog';
import { Button } from '@admin/components/ui/button';
import { cn } from '@admin/lib/utils';

interface ModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    description?: string;
    children: React.ReactNode;
    footer?: React.ReactNode;
    size?: 'sm' | 'md' | 'lg' | 'xl';
    className?: string;
}

interface ModalFooterProps {
    onCancel?: () => void;
    onConfirm?: () => void;
    cancelText?: string;
    confirmText?: string;
    isLoading?: boolean;
    confirmVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
    children?: React.ReactNode;
}

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

export function Modal({
    open,
    onOpenChange,
    title,
    description,
    children,
    footer,
    size = 'md',
    className,
}: ModalProps) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className={cn(sizeClasses[size], className)}>
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    {description && <DialogDescription>{description}</DialogDescription>}
                </DialogHeader>
                
                <div className="py-4">{children}</div>
                
                {footer && <DialogFooter>{footer}</DialogFooter>}
            </DialogContent>
        </Dialog>
    );
}

export function ModalFooter({
    onCancel,
    onConfirm,
    cancelText = 'Cancel',
    confirmText = 'Confirm',
    isLoading = false,
    confirmVariant = 'default',
    children,
}: ModalFooterProps) {
    if (children) {
        return <>{children}</>;
    }

    return (
        <>
            {onCancel && (
                <Button
                    variant="outline"
                    onClick={onCancel}
                    disabled={isLoading}
                >
                    {cancelText}
                </Button>
            )}
            {onConfirm && (
                <Button
                    variant={confirmVariant}
                    onClick={onConfirm}
                    disabled={isLoading}
                >
                    {isLoading ? 'Loading...' : confirmText}
                </Button>
            )}
        </>
    );
}

// Hook for managing modal state
export function useModal(initialState = false) {
    const [isOpen, setIsOpen] = React.useState(initialState);

    const openModal = () => setIsOpen(true);
    const closeModal = () => setIsOpen(false);
    const toggleModal = () => setIsOpen(!isOpen);

    return {
        isOpen,
        openModal,
        closeModal,
        toggleModal,
        setIsOpen,
    };
}