// 现代化UI组件库
const UI = {
    // 显示通知消息
    notify(message, type = 'info', duration = 3000) {
        const container = document.getElementById('notification-container') || this.createNotificationContainer();
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <span class="notification-icon">${this.getIcon(type)}</span>
                <span class="notification-message">${message}</span>
            </div>
        `;
        container.appendChild(notification);
        setTimeout(() => notification.classList.add('show'), 10);
        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => notification.remove(), 300);
        }, duration);
    },

    // 显示确认对话框
    confirm(title, message, onConfirm, onCancel) {
        const modal = document.createElement('div');
        modal.className = 'ui-modal';
        modal.innerHTML = `
            <div class="ui-modal-overlay"></div>
            <div class="ui-modal-content ui-modal-confirm">
                <h3>${title}</h3>
                <p>${message}</p>
                <div class="ui-modal-actions">
                    <button class="ui-btn ui-btn-secondary" data-action="cancel">取消</button>
                    <button class="ui-btn ui-btn-primary" data-action="confirm">确认</button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        setTimeout(() => modal.classList.add('show'), 10);

        modal.querySelector('[data-action="confirm"]').onclick = () => {
            this.closeModal(modal);
            if (onConfirm) onConfirm();
        };
        modal.querySelector('[data-action="cancel"]').onclick = () => {
            this.closeModal(modal);
            if (onCancel) onCancel();
        };
        modal.querySelector('.ui-modal-overlay').onclick = () => {
            this.closeModal(modal);
            if (onCancel) onCancel();
        };
    },

    // 显示输入对话框
    prompt(title, placeholder, defaultValue, onConfirm, onCancel) {
        const modal = document.createElement('div');
        modal.className = 'ui-modal';
        modal.innerHTML = `
            <div class="ui-modal-overlay"></div>
            <div class="ui-modal-content ui-modal-prompt">
                <h3>${title}</h3>
                <input type="text" class="ui-input" placeholder="${placeholder}" value="${defaultValue || ''}">
                <div class="ui-modal-actions">
                    <button class="ui-btn ui-btn-secondary" data-action="cancel">取消</button>
                    <button class="ui-btn ui-btn-primary" data-action="confirm">确认</button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        setTimeout(() => modal.classList.add('show'), 10);

        const input = modal.querySelector('.ui-input');
        input.focus();
        input.select();

        const confirm = () => {
            const value = input.value.trim();
            if (value) {
                this.closeModal(modal);
                if (onConfirm) onConfirm(value);
            }
        };

        modal.querySelector('[data-action="confirm"]').onclick = confirm;
        input.onkeypress = (e) => { if (e.key === 'Enter') confirm(); };
        modal.querySelector('[data-action="cancel"]').onclick = () => {
            this.closeModal(modal);
            if (onCancel) onCancel();
        };
        modal.querySelector('.ui-modal-overlay').onclick = () => {
            this.closeModal(modal);
            if (onCancel) onCancel();
        };
    },

    // 关闭模态框
    closeModal(modal) {
        modal.classList.remove('show');
        setTimeout(() => modal.remove(), 300);
    },

    // 创建通知容器
    createNotificationContainer() {
        const container = document.createElement('div');
        container.id = 'notification-container';
        document.body.appendChild(container);
        return container;
    },

    // 获取图标
    getIcon(type) {
        const icons = {
            success: '✓',
            error: '✕',
            warning: '⚠',
            info: 'ℹ'
        };
        return icons[type] || icons.info;
    }
};