/**
 * 数字人直播系统 - Loading 加载组件
 */
(function() {
    'use strict';
    
    let overlay = null;
    
    const Loading = {
        show(message = '加载中...', targetId = null) {
            // 全屏加载
            if (!targetId) {
                if (overlay) {
                    const msgEl = overlay.querySelector('.dh-loading-message');
                    if (msgEl) msgEl.textContent = message;
                    return;
                }
                
                overlay = document.createElement('div');
                overlay.style.cssText = `
                    position: fixed;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background: rgba(0,0,0,0.3);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 99990;
                `;
                overlay.innerHTML = `
                    <div style="
                        background: white;
                        padding: 30px 40px;
                        border-radius: 12px;
                        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
                        text-align: center;
                    ">
                        <div style="
                            width: 40px; height: 40px;
                            margin: 0 auto 16px;
                            border: 3px solid #e0e0e0;
                            border-top-color: #667eea;
                            border-radius: 50%;
                            animation: dhSpin 0.8s linear infinite;
                        "></div>
                        <div class="dh-loading-message" style="color: #333; font-size: 15px;">${message}</div>
                    </div>
                `;
                document.body.appendChild(overlay);
            } else {
                // 区域加载
                const target = document.getElementById(targetId);
                if (!target) return;
                target.style.position = 'relative';
                const areaOverlay = document.createElement('div');
                areaOverlay.className = 'dh-area-loading';
                areaOverlay.style.cssText = `
                    position: absolute;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background: rgba(255,255,255,0.7);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 100;
                    border-radius: 8px;
                `;
                areaOverlay.innerHTML = `
                    <div style="text-align:center;">
                        <div style="width:32px;height:32px;border:3px solid #e0e0e0;border-top-color:#667eea;border-radius:50%;animation:dhSpin 0.8s linear infinite;margin:0 auto 8px;"></div>
                        <div style="color:#666;font-size:13px;">${message}</div>
                    </div>
                `;
                target.appendChild(areaOverlay);
            }
        },
        
        hide(targetId = null) {
            if (!targetId) {
                if (overlay) {
                    overlay.remove();
                    overlay = null;
                }
            } else {
                const target = document.getElementById(targetId);
                if (target) {
                    const areaLoading = target.querySelector('.dh-area-loading');
                    if (areaLoading) areaLoading.remove();
                }
            }
        }
    };
    
    // 添加旋转动画
    const style = document.createElement('style');
    style.textContent = '@keyframes dhSpin { to { transform: rotate(360deg); } }';
    document.head.appendChild(style);
    
    window.DigitalHumanLoading = Loading;
    console.log('[数字人直播] Loading组件已加载');
})();