import { type ReactNode } from 'react';

import { cn } from '@admin/lib/utils';

type ModalProps = {
    isOpen: boolean;
    onClose: () => void;
    title: string;
    children: ReactNode;
    primaryButtonText?: string;
    onPrimaryAction?: () => void;
    processing?: boolean;
    /** sm = 512px, md = 768px (default), lg = 896px — see admin.css */
    size?: 'sm' | 'md' | 'lg';
};

const MODAL_BOX_SIZE_CLASSES: Record<NonNullable<ModalProps['size']>, string> = {
    sm: 'admin-modal-box--sm',
    md: 'admin-modal-box--md',
    lg: 'admin-modal-box--lg',
};

export function Modal({
    isOpen,
    onClose,
    title,
    children,
    primaryButtonText = 'Save changes',
    onPrimaryAction,
    processing = false,
    size = 'md',
}: ModalProps) {
    if (!isOpen) {
        return null;
    }

    return (
        <div className="hs-overlay ti-modal open">
            <div className={cn('ti-modal-box mt-0 ease-out sm:mx-auto sm:mt-7', MODAL_BOX_SIZE_CLASSES[size])}>
                <div className="ti-modal-content">
                    <div className="ti-modal-header">
                        <h6 className="modal-title text-[1rem] font-semibold">{title}</h6>
                        <button
                            type="button"
                            className="hs-dropdown-toggle !text-[1rem] !font-semibold"
                            onClick={onClose}
                            aria-label="Close"
                        >
                            <span className="sr-only">Close</span>
                            <i className="ri-close-line" />
                        </button>
                    </div>
                    <div className="ti-modal-body max-h-[70vh] overflow-y-auto">{children}</div>
                    <div className="ti-modal-footer">
                        <button type="button" className="ti-btn ti-btn-secondary" onClick={onClose}>
                            Close
                        </button>
                        {onPrimaryAction !== undefined && (
                            <button
                                type="button"
                                className="ti-btn ti-btn-primary"
                                onClick={onPrimaryAction}
                                disabled={processing}
                            >
                                {primaryButtonText}
                            </button>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}