<!-- Modern Alert/Confirm Modal Component -->
<div id="modern-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <!-- Modal Header -->
            <div class="flex items-center justify-between mb-4">
                <h3 id="modal-title" class="text-lg font-medium text-gray-900"></h3>
                <button type="button" id="modal-close" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <!-- Modal Icon -->
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full mb-4" id="modal-icon-container">
                <!-- Success Icon -->
                <svg id="modal-icon-success" class="h-8 w-8 text-green-600 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
                
                <!-- Error Icon -->
                <svg id="modal-icon-error" class="h-8 w-8 text-red-600 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
                
                <!-- Warning Icon -->
                <svg id="modal-icon-warning" class="h-8 w-8 text-yellow-600 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
                
                <!-- Info Icon -->
                <svg id="modal-icon-info" class="h-8 w-8 text-blue-600 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            
            <!-- Modal Message -->
            <div class="text-center">
                <p id="modal-message" class="text-sm text-gray-500 mb-6"></p>
            </div>
            
            <!-- Modal Buttons -->
            <div id="modal-buttons" class="flex justify-center space-x-3">
                <button id="modal-confirm" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
                    OK
                </button>
                <button id="modal-cancel" class="px-4 py-2 bg-gray-300 text-gray-700 text-base font-medium rounded-md shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 hidden">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modern Alert/Confirm JavaScript -->
<script>
class ModernModal {
    constructor() {
        this.modal = document.getElementById('modern-modal');
        this.title = document.getElementById('modal-title');
        this.message = document.getElementById('modal-message');
        this.confirmBtn = document.getElementById('modal-confirm');
        this.cancelBtn = document.getElementById('modal-cancel');
        this.closeBtn = document.getElementById('modal-close');
        this.iconContainer = document.getElementById('modal-icon-container');
        
        // Bind close events
        this.closeBtn.addEventListener('click', () => this.hide());
        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) this.hide();
        });
        
        // Handle escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && !this.modal.classList.contains('hidden')) {
                this.hide();
            }
        });
    }
    
    show(options = {}) {
        const {
            title = 'Notification',
            message = '',
            type = 'info', // success, error, warning, info
            confirmText = 'OK',
            cancelText = 'Cancel',
            showCancel = false,
            onConfirm = null,
            onCancel = null
        } = options;
        
        // Set content
        this.title.textContent = title;
        this.message.textContent = message;
        this.confirmBtn.textContent = confirmText;
        this.cancelBtn.textContent = cancelText;
        
        // Show/hide cancel button
        if (showCancel) {
            this.cancelBtn.classList.remove('hidden');
        } else {
            this.cancelBtn.classList.add('hidden');
        }
        
        // Set icon and colors based on type
        this.setIcon(type);
        this.setColors(type);
        
        // Set up button handlers
        this.confirmBtn.onclick = () => {
            if (onConfirm) onConfirm();
            this.hide();
        };
        
        this.cancelBtn.onclick = () => {
            if (onCancel) onCancel();
            this.hide();
        };
        
        // Show modal
        this.modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        
        // Focus confirm button
        setTimeout(() => this.confirmBtn.focus(), 100);
    }

    updateMessage(message) {
        this.message.textContent = message;
    }

    hide() {
        this.modal.classList.add('hidden');
        document.body.style.overflow = '';
        
        if (window.rateLimitCountdownInterval) {
            clearInterval(window.rateLimitCountdownInterval);
            window.rateLimitCountdownInterval = null;
        }
    }
    
    setIcon(type) {
        // Hide all icons
        ['success', 'error', 'warning', 'info'].forEach(iconType => {
            document.getElementById(`modal-icon-${iconType}`).classList.add('hidden');
        });
        
        // Show selected icon
        document.getElementById(`modal-icon-${type}`).classList.remove('hidden');
        
        // Set background color
        const bgColors = {
            success: 'bg-green-100',
            error: 'bg-red-100',
            warning: 'bg-yellow-100',
            info: 'bg-blue-100'
        };
        
        this.iconContainer.className = `mx-auto flex items-center justify-center h-12 w-12 rounded-full mb-4 ${bgColors[type]}`;
    }
    
    setColors(type) {
        const colors = {
            success: 'bg-green-500 hover:bg-green-700 focus:ring-green-300',
            error: 'bg-red-500 hover:bg-red-700 focus:ring-red-300',
            warning: 'bg-yellow-500 hover:bg-yellow-700 focus:ring-yellow-300',
            info: 'bg-blue-500 hover:bg-blue-700 focus:ring-blue-300'
        };
        
        this.confirmBtn.className = `px-4 py-2 ${colors[type]} text-white text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2`;
    }
    
    // Convenience methods
    alert(message, title = 'Alert', type = 'info') {
        return new Promise((resolve) => {
            this.show({
                title,
                message,
                type,
                showCancel: false,
                onConfirm: resolve
            });
        });
    }
    
    confirm(message, title = 'Confirm', type = 'warning') {
        return new Promise((resolve) => {
            this.show({
                title,
                message,
                type,
                showCancel: true,
                confirmText: 'Yes',
                cancelText: 'No',
                onConfirm: () => resolve(true),
                onCancel: () => resolve(false)
            });
        });
    }
    
    success(message, title = 'Success') {
        return this.alert(message, title, 'success');
    }
    
    error(message, title = 'Error') {
        return this.alert(message, title, 'error');
    }
    
    warning(message, title = 'Warning') {
        return this.alert(message, title, 'warning');
    }
}

// Helper function to ensure modernModal is available
window.waitForModernModal = function() {
    return new Promise((resolve) => {
        if (window.modernModal) {
            resolve(window.modernModal);
        } else {
            const checkInterval = setInterval(() => {
                if (window.modernModal) {
                    clearInterval(checkInterval);
                    resolve(window.modernModal);
                }
            }, 10);
        }
    });
};

// Create global instance when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    window.modernModal = new ModernModal();
    
    // Backward compatibility - override native alert and confirm
    window.alert = function(message) {
        return window.modernModal.alert(message);
    };

    window.confirm = function(message) {
        return window.modernModal.confirm(message);
    };
});

// Fallback for immediate access
if (document.readyState === 'loading') {
    // DOM is still loading
} else {
    // DOM is already loaded
    window.modernModal = new ModernModal();
    
    window.alert = function(message) {
        return window.modernModal.alert(message);
    };

    window.confirm = function(message) {
        return window.modernModal.confirm(message);
    };
}
</script>