import { router } from '@inertiajs/react';

import { useFormResponse } from '@admin/hooks/use-form-response';

type DeleteConfirmationModalProps = {
    isOpen: boolean;
    onClose: () => void;
    itemName?: string;
    itemType?: string;
    deleteEndpoint: string;
    loadingMessage?: string;
};

/** Synto vertically centered modal — `modal.html` § Vertically Centered Modals */
export function DeleteConfirmationModal({
    isOpen,
    onClose,
    itemName = 'this item',
    itemType = 'record',
    deleteEndpoint,
    loadingMessage = 'Deleting...',
}: DeleteConfirmationModalProps) {
    if (!isOpen) {
        return null;
    }

    const handleDelete = () => {
        const action = useFormResponse({ loadingMessage });

        router.delete(deleteEndpoint, {
            onStart: action.onStart,
            onSuccess: (page) => {
                action.onSuccess(page);
                onClose();
            },
            onError: action.onError,
        });
    };

    return (
        <div className="hs-overlay ti-modal open">
            <div className="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out min-h-[calc(100%-3.5rem)] flex items-center">
                <div className="ti-modal-content">
                    <div className="ti-modal-header">
                        <h3 className="ti-modal-title flex items-center gap-1 text-danger">
                            <i className="ri-error-warning-line" aria-hidden />
                            Delete confirmation
                        </h3>
                        <button type="button" className="ti-modal-close-btn" onClick={onClose} aria-label="Close">
                            <span className="sr-only">Close</span>
                            <i className="ri-close-line text-base" aria-hidden />
                        </button>
                    </div>
                    <div className="ti-modal-body">
                        <p className="text-gray-800 dark:text-white/70">
                            Are you sure you want to delete <strong>{itemName}</strong>? This {itemType} will be removed.
                        </p>
                    </div>
                    <div className="ti-modal-footer">
                        <button
                            type="button"
                            className="ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
                            onClick={onClose}
                        >
                            Close
                        </button>
                        <button type="button" className="ti-btn ti-btn-danger" onClick={handleDelete}>
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}