// ConfirmModal component - confirm()-ийн оронд ашиглах баталгаажуулалтын цонх
const { useEffect, useRef } = React;

function ConfirmModal({ 
    isOpen, 
    message, 
    onConfirm,
    onCancel
}) {
    const confirmButtonRef = useRef(null);

    // Modal нээгдэх үед Confirm товч дээр focus тавих
    useEffect(() => {
        if (isOpen && confirmButtonRef.current) {
            // Богино хугацааны дараа focus тавих (modal render хийгдсэний дараа)
            setTimeout(() => {
                if (confirmButtonRef.current) {
                    confirmButtonRef.current.focus();
                }
            }, 100);
        }
    }, [isOpen]);

    // ESC товч дарахад цуцлах
    useEffect(() => {
        if (!isOpen) return;
        
        const handleKeyDown = (e) => {
            if (e.key === 'Escape') {
                onCancel();
            }
        };
        
        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
    }, [isOpen, onCancel]);

    if (!isOpen) return null;

    return (
        <div className="modal-overlay" onClick={onCancel}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '380px', borderRadius: '8px' }}>
                <div className="modal-header" style={{ padding: '12px 16px', borderBottom: '1px solid #e0e0e0' }}>
                    <h2 style={{ fontSize: '16px', fontWeight: '600', margin: 0, color: '#2c3e50' }}>Баталгаажуулалт</h2>
                    <button 
                        className="modal-close" 
                        onClick={onCancel}
                        style={{ 
                            fontSize: '20px', 
                            width: '24px', 
                            height: '24px',
                            padding: 0,
                            background: 'none',
                            border: 'none',
                            color: '#95a5a6',
                            cursor: 'pointer',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}
                    >×</button>
                </div>
                
                <div className="modal-body" style={{ padding: '16px' }}>
                    <p style={{ 
                        margin: 0, 
                        fontSize: '13px', 
                        lineHeight: '1.6',
                        whiteSpace: 'pre-wrap',
                        wordWrap: 'break-word',
                        color: '#34495e'
                    }}>
                        {message || 'Та итгэлтэй байна уу?'}
                    </p>
                </div>

                <div className="modal-footer" style={{ padding: '12px 16px', borderTop: '1px solid #e0e0e0', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
                    <button 
                        onClick={onCancel}
                        style={{ 
                            padding: '8px 20px',
                            fontSize: '13px',
                            fontWeight: '600',
                            borderRadius: '6px',
                            border: '1px solid #e0e0e0',
                            background: 'white',
                            color: '#34495e',
                            cursor: 'pointer',
                            transition: 'all 0.2s'
                        }}
                        onMouseOver={(e) => e.target.style.background = '#f8f9fa'}
                        onMouseOut={(e) => e.target.style.background = 'white'}
                    >
                        Цуцлах
                    </button>
                    <button 
                        ref={confirmButtonRef}
                        onClick={onConfirm}
                        style={{ 
                            padding: '8px 20px',
                            fontSize: '13px',
                            fontWeight: '600',
                            borderRadius: '6px',
                            border: 'none',
                            background: '#667eea',
                            color: 'white',
                            cursor: 'pointer',
                            transition: 'all 0.2s'
                        }}
                        onMouseOver={(e) => e.target.style.background = '#5568d3'}
                        onMouseOut={(e) => e.target.style.background = '#667eea'}
                        autoFocus
                    >
                        Тийм
                    </button>
                </div>
            </div>
        </div>
    );
}

// Make available globally for browser
if (typeof window !== 'undefined') {
    window.ConfirmModal = ConfirmModal;
}

// Export for Node.js/CommonJS
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        ConfirmModal
    };
}