(function ($) {
    window.anbarakConfirm = function (options) {
        const settings = $.extend({
            title: anbarak.i18n.confirm,
            message: anbarak.i18n.are_you_sure,
            type: 'ok',
            activeButton: 'ok',
            onOk: function () { },
            onCancel: function () { },
            onClose: function () { },
            okText: anbarak.i18n.ok,
            cancelText: anbarak.i18n.cancel,
            isHtml: true
        }, options);

        let $modal = $('#micromodal-message');

        if ($modal.length === 0) {
            const modalHTML = `
            <div class="micro-modal micromodal-slide" id="micromodal-message" aria-hidden="true">
                <div class="modal__overlay" tabindex="-1" data-micromodal-close>
                    <div class="modal__container box" role="dialog" aria-modal="true" aria-labelledby="modal-title">
                        <header class="modal__header">
                            <h2 class="modal__title" id="modal-title"></h2>
                            <button class="modal__close" type="button" aria-label="Close modal" data-micromodal-close></button>
                        </header>
                        <main class="modal__content">
                            <div class="modal__message mb-5"></div>
                            <div class="modal__buttons flex gap-3"></div>
                        </main>
                    </div>
                </div>
            </div>
        `;
            $('body').append(modalHTML);
            $modal = $('#micromodal-message');
        }

        // Set title (always text, for security)
        $modal.find('.modal__title').text(settings.title);
        
        // Set message - support HTML if isHtml is true
        const $messageDiv = $modal.find('.modal__message');
        if (settings.isHtml) {
            $messageDiv.html(settings.message);
        } else {
            $messageDiv.text(settings.message);
        }

        // Generate buttons HTML
        let buttonsHTML = '';

        if (settings.type === 'ok-cancel') {
            const okButtonClass = settings.activeButton === 'ok' ? 'button--primary' : '';
            const cancelButtonClass = settings.activeButton === 'cancel' ? 'button--primary' : '';
            
            buttonsHTML = `
            <button class="button button--ok ${okButtonClass}">${settings.okText}</button>
            <button class="button button--cancel ${cancelButtonClass}" data-micromodal-close>${settings.cancelText}</button>
        `;
        } else {
            buttonsHTML = `
            <button class="button button--ok button--single button--primary">${settings.okText}</button>
        `;
        }

        $modal.find('.modal__buttons').html(buttonsHTML);

        // Store callbacks
        $modal.data('onOk', settings.onOk);
        $modal.data('onCancel', settings.onCancel);
        $modal.data('type', settings.type);
        $modal.data('on-close', settings.onClose);

        // Remove any existing event handlers
        $modal.off('click.modal');

        // Handle OK button click
        $modal.on('click.modal', '.button--ok', function (e) {
            e.preventDefault();
            const onOk = $modal.data('onOk');
            if (typeof onOk === 'function') {
                onOk();
            }
            MicroModal.close('micromodal-message');
        });

        // Handle Cancel button click
        $modal.on('click.modal', '.button--cancel', function (e) {
            e.preventDefault();
            const onCancel = $modal.data('onCancel');
            if (typeof onCancel === 'function') {
                onCancel();
            }
        });

        // Handle close events
        // const modalElement = $modal[0];
        // modalElement.addEventListener('micromodal:close', function () {
        //     const type = $modal.data('type');
        //     const onCancel = $modal.data('onCancel');
        //     if (type === 'ok-cancel' && typeof onCancel === 'function') {
        //         onCancel();
        //     }
        // }, { once: true });

        // Show modal
        MicroModal.show('micromodal-message', {
            onClose: function () {
                $modal.off('click.modal');
            },
        });
    };

    // Promise-based version
    window.anbarakConfirmAsync = function (options) {
        return new Promise((resolve, reject) => {
            const settings = $.extend({
                title: anbarak.i18n.confirm,
                message: anbarak.i18n.are_you_sure,
                type: 'ok-cancel',
                activeButton: 'ok',
                okText: anbarak.i18n.ok,
                cancelText: anbarak.i18n.cancel,
                isHtml: false
            }, options);

            window.anbarakConfirm({
                ...settings,
                onOk: () => resolve(true),
                onCancel: () => resolve(false)
            });
        });
    };
})(jQuery);
