/**
 * 自定义提示弹窗工具类
 * 替代原生的 alert()，提供更美观的 UI
 */
class AlertUtils {
    constructor() {
        this.overlay = null;
        this.title = null;
        this.message = null;
        this.confirmBtn = null;
        this.closeBtn = null;
        this.box = null;
        this.resolvePromise = null;
        
        this.init();
    }

    init() {
        // 检查是否已存在
        if (document.getElementById('customAlertOverlay')) {
            this.overlay = document.getElementById('customAlertOverlay');
            this.bindElements();
            return;
        }

        // 创建 DOM 结构
        const html = `
            <div class="custom-alert-box">
                <div class="custom-alert-header">
                    <span id="customAlertTitle">提示</span>
                    <button id="customAlertClose" class="custom-alert-close">&times;</button>
                </div>
                <div class="custom-alert-body" id="customAlertMessage">
                    <!-- 消息内容 -->
                </div>
                <div class="custom-alert-footer">
                    <button id="customAlertConfirm" class="custom-alert-btn">确定</button>
                </div>
            </div>
        `;

        this.overlay = document.createElement('div');
        this.overlay.id = 'customAlertOverlay';
        this.overlay.className = 'custom-alert-overlay';
        this.overlay.innerHTML = html;
        
        document.body.appendChild(this.overlay);
        this.bindElements();
    }

    bindElements() {
        this.box = this.overlay.querySelector('.custom-alert-box');
        this.title = this.overlay.querySelector('#customAlertTitle');
        this.message = this.overlay.querySelector('#customAlertMessage');
        this.confirmBtn = this.overlay.querySelector('#customAlertConfirm');
        this.closeBtn = this.overlay.querySelector('#customAlertClose');

        // 绑定事件
        const closeHandler = () => this.hide();
        this.confirmBtn.addEventListener('click', closeHandler);
        this.closeBtn.addEventListener('click', closeHandler);
        
        // 点击遮罩层关闭（可选）
        // this.overlay.addEventListener('click', (e) => {
        //     if (e.target === this.overlay) closeHandler();
        // });
    }

    /**
     * 显示提示弹窗
     * @param {string} msg - 提示消息
     * @param {string} type - 类型: 'info' (默认), 'success', 'warning', 'error'
     * @param {string} title - 标题 (可选)
     * @returns {Promise} 点击确定后 resolve
     */
    alert(msg, type = 'info', title = null) {
        return new Promise((resolve) => {
            this.resolvePromise = resolve;
            
            // 设置内容
            this.message.textContent = msg;
            
            // 设置标题和样式
            this.box.className = 'custom-alert-box'; // 重置类名
            
            let defaultTitle = '提示';
            let typeClass = '';
            
            switch (type) {
                case 'success':
                    defaultTitle = '成功';
                    typeClass = 'custom-alert-success';
                    break;
                case 'warning':
                    defaultTitle = '警告';
                    typeClass = 'custom-alert-warning';
                    break;
                case 'error':
                    defaultTitle = '错误';
                    typeClass = 'custom-alert-error';
                    break;
                default:
                    defaultTitle = '提示';
            }
            
            if (typeClass) {
                this.box.classList.add(typeClass);
            }
            
            this.title.textContent = title || defaultTitle;
            
            // 显示
            this.overlay.classList.add('show');
        });
    }

    hide() {
        this.overlay.classList.remove('show');
        if (this.resolvePromise) {
            this.resolvePromise();
            this.resolvePromise = null;
        }
    }
}

// 导出单例
window.AlertUtils = new AlertUtils();

// 覆盖原生 alert (可选，如果希望全局替换)
// window.alert = (msg) => window.AlertUtils.alert(msg);
