class ConfirmationModal {
    constructor() {
        this.container = document.getElementById('confirmation-modal-container') || this.createContainer();
        this.currentModal = null;
        this.modalCount = 0;
    }

    createContainer() {
        const container = document.createElement('div');
        container.id = 'confirmation-modal-container';
        document.body.appendChild(container);
        return container;
    }

    show(options = {}) {
        return new Promise((resolve) => {
            const config = {
                title: 'Confirm Action',
                message: 'Are you sure you want to proceed?',
                type: 'warning', // warning, danger, info, success
                confirmText: 'Confirm',
                cancelText: 'Cancel',
                size: 'md', // sm, md, lg, xl
                ...options
            };

            const modalId = `confirmation-modal-${++this.modalCount}`;
            const modal = this.createModal(modalId, config);

            this.container.appendChild(modal);

            const bsModal = new bootstrap.Modal(modal, {
                backdrop: 'static',
                keyboard: false
            });

            // Handle confirm button
            const confirmBtn = modal.querySelector('.btn-confirm');
            confirmBtn.addEventListener('click', () => {
                bsModal.hide();
                resolve(true);
            });

            // Handle cancel button
            const cancelBtn = modal.querySelector('.btn-cancel');
            cancelBtn.addEventListener('click', () => {
                bsModal.hide();
                resolve(false);
            });

            // Handle modal close (X button or backdrop)
            modal.addEventListener('hidden.bs.modal', () => {
                modal.remove();
                if (!confirmBtn.clicked && !cancelBtn.clicked) {
                    resolve(false);
                }
            });

            // Mark buttons as clicked to differentiate from modal close
            confirmBtn.addEventListener('click', () => confirmBtn.clicked = true);
            cancelBtn.addEventListener('click', () => cancelBtn.clicked = true);

            bsModal.show();
            this.currentModal = bsModal;
        });
    }

    createModal(modalId, config) {
        const icons = {
            warning: 'fas fa-exclamation-triangle',
            danger: 'fas fa-exclamation-circle',
            info: 'fas fa-info-circle',
            success: 'fas fa-check-circle'
        };

        const buttonClasses = {
            warning: 'btn-warning',
            danger: 'btn-danger',
            info: 'btn-info',
            success: 'btn-success'
        };

        const modalHTML = `
                    <div class="modal fade confirmation-modal" id="${modalId}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-${config.size} modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <div class="confirmation-icon ${config.type}">
                                        <i class="${icons[config.type]}"></i>
                                    </div>
                                    <h4 class="confirmation-title">${config.title}</h4>
                                    <p class="confirmation-message">${config.message}</p>
                                </div>
                                <div class="modal-footer justify-content-center">
                                    <button type="button" class="btn btn-cancel">${config.cancelText}</button>
                                    <button type="button" class="btn ${buttonClasses[config.type]} btn-confirm">${config.confirmText}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

        const modalElement = document.createElement('div');
        modalElement.innerHTML = modalHTML;
        return modalElement.firstElementChild;
    }

    // Convenience methods
    warning(message, title = 'Warning') {
        return this.show({
            type: 'warning',
            title,
            message,
            confirmText: 'Proceed',
            cancelText: 'Cancel'
        });
    }

    danger(message, title = 'Confirm Delete') {
        return this.show({
            type: 'danger',
            title,
            message,
            confirmText: 'Delete',
            cancelText: 'Cancel'
        });
    }

    info(message, title = 'Information') {
        return this.show({
            type: 'info',
            title,
            message,
            confirmText: 'Continue',
            cancelText: 'Cancel'
        });
    }

    success(message, title = 'Confirm') {
        return this.show({
            type: 'success',
            title,
            message,
            confirmText: 'Confirm',
            cancelText: 'Cancel'
        });
    }
}

// Create global instance
const confirmationModal = new ConfirmationModal();

// Global function for easy use
function showConfirmation(options) {
    return confirmationModal.show(options);
}

// Convenience functions
function confirmWarning(message, title) {
    return confirmationModal.warning(message, title);
}

function confirmDanger(message, title) {
    return confirmationModal.danger(message, title);
}

function confirmInfo(message, title) {
    return confirmationModal.info(message, title);
}

function confirmSuccess(message, title) {
    return confirmationModal.success(message, title);
}