/**
 * Message 消息通知组件
 * 自动注入必要样式，无需额外引入 CSS
 *
 * 使用方式：
 *   const message = new Message();
 *   message.create({ type: 'success', content: '操作成功' });
 *
 * 快捷方法：
 *   message.success('内容')
 *   message.warning('内容')
 *   message.danger('内容')
 *   message.info('内容')
 *   message.default('内容')
 *   message.success('操作成功', {duration: 5000, showClose: false,showProgress: false,pale: false,html: false});
 */
(function (global) {
    'use strict';

    const STYLE_ID = 'message-component-style';

    const CSS = `
/* ==================== Message Component Styles ==================== */
.message-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.message-item {
    pointer-events: auto;
    min-width: 320px;
    max-width: 600px;
    padding: 14px 18px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(-30px);
}
.message-item.message-enter {
    opacity: 1;
    transform: translateY(0);
}
.message-item.message-leave {
    opacity: 0;
    transform: translateY(-20px);
    margin-top: -58px;
}
.message-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}
.message-content {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    word-break: break-word;
}
.message-close {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s;
    margin-top: 2px;
}
.message-close:hover {
    background: rgba(0,0,0,0.06);
}
.message-close svg {
    width: 14px;
    height: 14px;
}
.message-item.message-default .message-icon { color: #6c757d; }
.message-item.message-success .message-icon { color: #28a745; }
.message-item.message-warning .message-icon { color: #e6a700; }
.message-item.message-danger .message-icon { color: #dc3545; }
.message-item.message-info .message-icon { color: #17a2b8; }
.message-item.message-pale.message-default { background: #f8f9fa; border: 1px solid #e9ecef; }
.message-item.message-pale.message-success { background: #f0f9f4; border: 1px solid #d4edda; }
.message-item.message-pale.message-warning { background: #fffbf0; border: 1px solid #ffeeba; }
.message-item.message-pale.message-danger { background: #fdf2f2; border: 1px solid #f5c6cb; }
.message-item.message-pale.message-info { background: #f0f9fb; border: 1px solid #bee5eb; }
.message-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 0 3px;
    transition: width linear;
}
.message-default .message-progress { background: #6c757d; }
.message-success .message-progress { background: #28a745; }
.message-warning .message-progress { background: #ffc107; }
.message-danger .message-progress { background: #dc3545; }
.message-info .message-progress { background: #17a2b8; }
`;

    function injectStyle() {
        if (document.getElementById(STYLE_ID)) return;
        const style = document.createElement('style');
        style.id = STYLE_ID;
        style.textContent = CSS;
        document.head.appendChild(style);
    }

    const ICONS = {
        default: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><g fill="none"><path d="M24 4c11.046 0 20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24S12.954 4 24 4zm0 2.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5zm.25 25.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3zm0-19c3.365 0 6.25 2.882 6.25 6.249c.002 2.12-.769 3.47-2.678 5.528l-1.015 1.087c-1.023 1.139-1.428 1.861-1.466 2.715l-.003.162l-.006.128l-.018.124a1.25 1.25 0 0 1-2.476-.234c-.013-1.789.677-3.012 2.308-4.785l1.027-1.098c1.358-1.492 1.828-2.373 1.827-3.626c0-1.987-1.765-3.75-3.75-3.75c-1.92 0-3.636 1.654-3.744 3.559l-.012.319A1.25 1.25 0 0 1 18 19.25c0-3.365 2.886-6.25 6.25-6.25z" fill="currentColor"></path></g></svg>`,
        success: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16zm0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14zm3.358 4.646a.5.5 0 0 1 .058.638l-.058.07l-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058l-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0z" fill="currentColor"></path></g></svg>`,
        warning: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M10 7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4A.5.5 0 0 1 10 7zm0 7.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5zM8.686 2.852a1.5 1.5 0 0 1 2.628 0l6.56 11.925A1.5 1.5 0 0 1 16.558 17H3.44a1.5 1.5 0 0 1-1.314-2.223L8.686 2.852zm1.752.482a.5.5 0 0 0-.876 0L3.003 15.26a.5.5 0 0 0 .438.741H16.56a.5.5 0 0 0 .438-.74L10.438 3.333z" fill="currentColor"></path></g></svg>`,
        danger: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28"><g fill="none"><path d="M18.28 9.72a.75.75 0 0 1 0 1.06L15.06 14l3.22 3.22a.75.75 0 1 1-1.06 1.06L14 15.06l-3.22 3.22a.75.75 0 1 1-1.06-1.06L12.94 14l-3.22-3.22a.75.75 0 1 1 1.06-1.06L14 12.94l3.22-3.22a.75.75 0 0 1 1.06 0zM26 14c0-6.627-5.373-12-12-12S2 7.373 2 14s5.373 12 12 12s12-5.373 12-12zM3.5 14C3.5 8.201 8.201 3.5 14 3.5S24.5 8.201 24.5 14S19.799 24.5 14 24.5S3.5 19.799 3.5 14z" fill="currentColor"></path></g></svg>`,
        info: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M10.492 8.91A.5.5 0 0 0 9.5 9v4.502l.008.09a.5.5 0 0 0 .992-.09V9l-.008-.09zm.307-2.16a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0zM18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0zM3 10a7 7 0 1 1 14 0a7 7 0 0 1-14 0z" fill="currentColor"></path></g></svg>`
    };

    class Message {
        constructor(options = {}) {
            injectStyle();
            this.container = null;
            this.messages = [];
            this.defaultOptions = {
                type: 'default',
                pale: false,
                duration: 3000,
                showClose: true,
                showProgress: true,
                content: '',
                html: false
            };
        }

        _ensureContainer() {
            if (!this.container || !document.body.contains(this.container)) {
                this.container = document.createElement('div');
                this.container.className = 'message-container';
                this.container.id = 'messageContainer';
                document.body.appendChild(this.container);
            }
            return this.container;
        }

        create(options) {
            const opts = { ...this.defaultOptions, ...options };
            const id = 'msg_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
            const container = this._ensureContainer();

            const el = document.createElement('div');
            el.className = `message-item message-${opts.type}`;
            if (opts.pale) el.classList.add('message-pale');
            el.id = id;

            const iconEl = document.createElement('div');
            iconEl.className = 'message-icon';
            iconEl.innerHTML = ICONS[opts.type] || ICONS.default;

            const contentEl = document.createElement('div');
            contentEl.className = 'message-content';
            if (opts.html) {
                contentEl.innerHTML = opts.content;
            } else {
                contentEl.textContent = opts.content;
            }

            el.appendChild(iconEl);
            el.appendChild(contentEl);

            if (opts.showClose) {
                const closeEl = document.createElement('div');
                closeEl.className = 'message-close';
                closeEl.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>`;
                closeEl.addEventListener('click', () => this.close(id));
                el.appendChild(closeEl);
            }

            let progressEl = null;
            if (opts.duration > 0 && opts.showProgress) {
                progressEl = document.createElement('div');
                progressEl.className = 'message-progress';
                progressEl.style.width = '100%';
                el.appendChild(progressEl);
            }

            container.appendChild(el);

            const msgInfo = {
                id,
                el,
                duration: opts.duration,
                timer: null,
                startTime: null
            };
            this.messages.push(msgInfo);

            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    el.classList.add('message-enter');
                });
            });

            if (opts.duration > 0) {
                msgInfo.startTime = Date.now();
                if (progressEl) {
                    requestAnimationFrame(() => {
                        progressEl.style.transition = `width ${opts.duration}ms linear`;
                        requestAnimationFrame(() => {
                            progressEl.style.width = '0%';
                        });
                    });
                }
                msgInfo.timer = setTimeout(() => {
                    this.close(id);
                }, opts.duration);
            }

            return id;
        }

        close(id) {
            const index = this.messages.findIndex(m => m.id === id);
            if (index === -1) return;
            const msg = this.messages[index];
            if (msg.timer) {
                clearTimeout(msg.timer);
                msg.timer = null;
            }
            msg.el.classList.remove('message-enter');
            msg.el.classList.add('message-leave');
            setTimeout(() => {
                if (msg.el.parentNode) {
                    msg.el.parentNode.removeChild(msg.el);
                }
                const idx = this.messages.findIndex(m => m.id === id);
                if (idx !== -1) this.messages.splice(idx, 1);
            }, 350);
        }

        closeAll() {
            [...this.messages].forEach(msg => this.close(msg.id));
        }

        success(content, options = {}) {
            return this.create({ ...options, type: 'success', content });
        }
        warning(content, options = {}) {
            return this.create({ ...options, type: 'warning', content });
        }
        danger(content, options = {}) {
            return this.create({ ...options, type: 'danger', content });
        }
        error(content, options = {}) {
            return this.create({ ...options, type: 'danger', content });
        }
        info(content, options = {}) {
            return this.create({ ...options, type: 'info', content });
        }
        default(content, options = {}) {
            return this.create({ ...options, type: 'default', content });
        }
    }

    global.Message = Message;
})(typeof window !== 'undefined' ? window : this);
const message = new Message();