/**
 * MobileProfilePage - 手机端个人中心组件
 * 
 * 功能特性:
 * - 头像展示与上传
 * - 个人信息编辑
 * - 账号设置
 * - 会员信息
 * - 使用统计
 * - 退出登录
 * 
 * @example
 * const profile = new MobileProfilePage('profile-modal', {
 *     apiBaseUrl: '',
 *     onLogout: () => { location.reload(); }
 * });
 * profile.show();
 */

class MobileProfilePage {
    constructor(containerId, options = {}) {
        this.containerId = containerId;
        this.container = document.getElementById(containerId);
        this.options = {
            apiBaseUrl: options.apiBaseUrl || '',
            onLogout: options.onLogout || null,
            onEdit: options.onEdit || null
        };
        this.userInfo = null;
    }
    
    /**
     * 显示个人中心弹窗
     */
    async show() {
        if (!this.container) {
            console.error('[个人中心] 容器不存在');
            return;
        }
        
        // 加载用户信息
        await this.loadUserInfo();
        
        // 渲染界面
        this.render();
    }
    
    /**
     * 加载用户信息
     */
    async loadUserInfo() {
        const token = localStorage.getItem('authToken');
        
        if (!token) {
            console.log('[个人中心] 未登录');
            return;
        }
        
        try {
            // ✅ 修复：调用后端 API 获取真实用户信息
            console.log('[个人中心] 正在调用 get_user_info API...');
            
            // 使用callBackend统一接口
            if (typeof window.callBackend === 'function') {
                const userInfo = await window.callBackend('get_user_info', {});
                
                this.userInfo = {
                    username: userInfo.username || userInfo.email || '未知用户',
                    phone: userInfo.phone || '未绑定',
                    email: userInfo.email || '未设置',
                    avatar: userInfo.avatar || null,
                    vipLevel: userInfo.vip_level || userInfo.level || '普通会员',
                    createTime: userInfo.created_at || userInfo.create_time || '-',
                    balance: userInfo.balance || 0,
                    total_tasks: userInfo.total_tasks || 0
                };
                
                // 保存到localStorage供其他组件使用
                localStorage.setItem('username', this.userInfo.username);
                localStorage.setItem('phone', this.userInfo.phone);
                localStorage.setItem('user_level', this.userInfo.vipLevel);
                
                console.log('[个人中心] 用户信息加载成功:', this.userInfo);
            } else {
                console.warn('[个人中心] callBackend不可用，使用临时数据');
                // Fallback方案
                this.userInfo = {
                    username: localStorage.getItem('username') || '用户',
                    phone: localStorage.getItem('phone') || '未绑定',
                    vipLevel: localStorage.getItem('user_level') || 'VIP'
                };
            }
            
        } catch (error) {
            console.error('[个人中心] 加载失败:', error);
            // 错误处理：使用缓存数据
            this.userInfo = {
                username: localStorage.getItem('username') || '用户',
                phone: localStorage.getItem('phone') || '未绑定',
                vipLevel: localStorage.getItem('user_level') || 'VIP'
            };
        }
    }
    
    /**
     * 渲染个人中心界面
     */
    render() {
        const hasLogin = !!localStorage.getItem('authToken');
        
        if (!hasLogin) {
            this.renderLoginPrompt();
            return;
        }
        
        this.renderProfile();
    }
    
    /**
     * 渲染登录提示
     */
    renderLoginPrompt() {
        this.container.style.display = 'block';
        this.container.innerHTML = `
            <div style="
                position:fixed;top:0;left:0;width:100%;height:100%;
                background:rgba(0,0,0,0.5);z-index:9999;
            " onclick="this.parentElement.style.display='none'">
                <div style="
                    position:absolute;top:50%;left:50%;
                    transform:translate(-50%,-50%);
                    background:white;padding:30px;
                    border-radius:20px;min-width:85%;max-width:400px;
                ">
                    <h2 style="margin-bottom:20px;text-align:center;">🔐 请先登录</h2>
                    <p style="color:#666;margin-bottom:30px;text-align:center;">
                        登录后可以享受个性化服务、查看历史记录等
                    </p>
                    <button onclick="showLogin()" style="
                        width:100%;padding:12px;
                        background:linear-gradient(135deg,#667eea,#764ba2);
                        color:white;border:none;border-radius:8px;
                        cursor:pointer;font-size:16px;font-weight:600;
                    ">立即登录</button>
                    <button onclick="this.closest('#profile-modal').style.display='none'" style="
                        width:100%;padding:12px;margin-top:10px;
                        background:#f5f5f5;color:#666;
                        border:none;border-radius:8px;
                        cursor:pointer;font-size:16px;
                    ">取消</button>
                </div>
            </div>
        `;
    }
    
    /**
     * 渲染个人中心主界面
     */
    renderProfile() {
        this.container.style.display = 'block';
        
        const user = this.userInfo || {};
        
        this.container.innerHTML = `
            <div style="
                position:fixed;top:0;left:0;width:100%;height:100%;
                background:rgba(0,0,0,0.5);z-index:9999;
                backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
            " onclick="if(event.target===this)this.parentElement.style.display='none'">
                <div style="
                    position:absolute;top:50%;left:50%;
                    transform:translate(-50%,-50%);
                    background:white;padding:30px;
                    border-radius:20px;min-width:85%;max-width:400px;
                    box-shadow:0 10px 40px rgba(0,0,0,0.2);
                ">
                    <!-- 关闭按钮 -->
                    <button onclick="this.closest('#profile-modal').style.display='none'" style="
                        position:absolute;top:15px;right:15px;
                        width:30px;height:30px;border-radius:50%;
                        background:#f5f5f5;border:none;
                        font-size:20px;color:#666;cursor:pointer;
                    ">&times;</button>
                    
                    <!-- 头像区域 -->
                    <div style="text-align:center;margin-bottom:25px;">
                        <div style="
                            width:80px;height:80px;border-radius:50%;
                            background:linear-gradient(135deg,#667eea,#764ba2);
                            margin:0 auto 15px;
                            display:flex;align-items:center;justify-content:center;
                            font-size:40px;color:white;
                            box-shadow:0 4px 15px rgba(102,126,234,0.3);
                        ">${user.avatar || '👤'}</div>
                        
                        <h2 style="margin:0;font-size:20px;color:#333;">${user.username || '用户'}</h2>
                        <span style="
                            display:inline-block;margin-top:8px;padding:4px 12px;
                            background:linear-gradient(135deg,#f093fb,#f5576c);
                            color:white;border-radius:12px;font-size:12px;
                        ">${user.vipLevel || '普通会员'}</span>
                    </div>
                    
                    <!-- 信息列表 -->
                    <div style="
                        background:#f8f9fa;border-radius:12px;
                        padding:15px;margin-bottom:20px;
                    ">
                        <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e9ecef;">
                            <span style="color:#666;">用户名</span>
                            <span style="color:#333;font-weight:600;">${user.username || '-'}</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e9ecef;">
                            <span style="color:#666;">手机号</span>
                            <span style="color:#333;font-weight:600;">${user.phone || '-'}</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;padding:10px 0;">
                            <span style="color:#666;">注册时间</span>
                            <span style="color:#333;font-weight:600;">${user.createTime || '-'}</span>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div style="display:flex;flex-direction:column;gap:10px;">
                        <button onclick="handleEditProfile()" style="
                            width:100%;padding:12px;
                            background:linear-gradient(135deg,#667eea,#764ba2);
                            color:white;border:none;border-radius:8px;
                            cursor:pointer;font-size:16px;font-weight:600;
                            transition:all 0.3s ease;
                        " onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 4px 12px rgba(102,126,234,0.3)'"
                           onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='none'">
                            ✏️ 编辑资料
                        </button>
                        
                        <button onclick="handleLogout()" style="
                            width:100%;padding:12px;
                            background:#f44336;color:white;
                            border:none;border-radius:8px;
                            cursor:pointer;font-size:16px;font-weight:600;
                            transition:all 0.3s ease;
                        " onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 4px 12px rgba(244,67,54,0.3)'"
                           onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='none'">
                            🚪 退出登录
                        </button>
                        
                        <button onclick="this.closest('#profile-modal').style.display='none'" style="
                            width:100%;padding:12px;
                            background:#f5f5f5;color:#666;
                            border:none;border-radius:8px;
                            cursor:pointer;font-size:16px;
                        ">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        `;
    }
    
    /**
     * 隐藏个人中心
     */
    hide() {
        if (this.container) {
            this.container.style.display = 'none';
        }
    }
}

// 全局函数
function handleEditProfile() {
    console.log('[个人中心] 编辑资料');
    alert('编辑功能开发中...');
}

function handleLogout() {
    if (confirm('确定要退出登录吗？')) {
        localStorage.removeItem('authToken');
        location.reload();
    }
}

// 导出到全局
window.MobileProfilePage = MobileProfilePage;
window.handleEditProfile = handleEditProfile;
window.handleLogout = handleLogout;