// 用户管理页面JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // 初始化
    initializeUserManagement();
});

// 初始化用户管理功能
function initializeUserManagement() {
    // 添加事件监听器
    setupEventListeners();
    
    // 初始化头像显示
    initializeAvatars();
    
    // 强制设置头像样式
    forceAvatarStyles();
}

// 设置事件监听器
function setupEventListeners() {
    // 搜索表单提交
    const searchForm = document.querySelector('form[method="GET"]');
    if (searchForm) {
        searchForm.addEventListener('submit', function(e) {
            // 可以在这里添加搜索前的验证
        });
    }
    
    // 状态筛选变更
    const statusSelect = document.getElementById('status');
    if (statusSelect) {
        statusSelect.addEventListener('change', function() {
            // 自动提交表单
            this.form.submit();
        });
    }
}

// 初始化头像显示
function initializeAvatars() {
    const avatars = document.querySelectorAll('.user-avatar');
    avatars.forEach(avatar => {
        avatar.onerror = function() {
            // 如果头像加载失败，替换为默认头像
            this.style.display = 'none';
            const placeholder = this.parentElement.querySelector('.user-avatar-placeholder');
            if (placeholder) {
                placeholder.style.display = 'flex';
            }
        };
    });
}

// 强制设置头像样式，覆盖Bootstrap
function forceAvatarStyles() {
    // 设置表格中的头像样式
    const tableAvatars = document.querySelectorAll('.table .user-avatar');
    tableAvatars.forEach(avatar => {
        setAvatarStyles(avatar, '48px');
    });
}

// 设置单个头像样式
function setAvatarStyles(avatar, size) {
    if (!avatar) return;
    
    // 强制设置所有相关样式
    avatar.style.setProperty('width', size, 'important');
    avatar.style.setProperty('height', size, 'important');
    avatar.style.setProperty('max-width', size, 'important');
    avatar.style.setProperty('max-height', size, 'important');
    avatar.style.setProperty('min-width', size, 'important');
    avatar.style.setProperty('min-height', size, 'important');
    avatar.style.setProperty('border-radius', '50%', 'important');
    avatar.style.setProperty('object-fit', 'cover', 'important');
    avatar.style.setProperty('border', '2px solid #f8f9fa', 'important');
    avatar.style.setProperty('display', 'block', 'important');
    avatar.style.setProperty('flex-shrink', '0', 'important');
    avatar.style.setProperty('flex-grow', '0', 'important');
    
    // 移除可能影响的Bootstrap类
    avatar.classList.remove('img-fluid', 'img-responsive', 'img-thumbnail');
    
    // 设置父元素样式
    if (avatar.parentElement) {
        avatar.parentElement.style.setProperty('width', size, 'important');
        avatar.parentElement.style.setProperty('height', size, 'important');
        avatar.parentElement.style.setProperty('overflow', 'hidden', 'important');
        avatar.parentElement.style.setProperty('flex-shrink', '0', 'important');
        avatar.parentElement.style.setProperty('flex-grow', '0', 'important');
    }
}

// 查看用户详情
function viewUser(userId) {
    // 显示模态框
    const modal = new bootstrap.Modal(document.getElementById('userDetailModal'));
    const content = document.getElementById('userDetailContent');
    
    // 显示加载状态
    content.innerHTML = `
        <div class="loading">
            <i class="bi bi-hourglass-split"></i>
            <div>加载中...</div>
        </div>
    `;
    
    modal.show();
    
    // 发送AJAX请求获取用户详情
    fetch(`/admin/users/${userId}/detail`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderUserDetail(data.user);
                // 立即强制设置头像样式
                setTimeout(() => {
                    forceModalAvatarStyles();
                }, 50);
                // 再次确保样式正确应用
                setTimeout(() => {
                    forceModalAvatarStyles();
                }, 200);
            } else {
                showError('获取用户详情失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showError('网络错误，请重试');
        });
}

// 渲染用户详情
function renderUserDetail(user) {
    const content = document.getElementById('userDetailContent');
    
    content.innerHTML = `
        <div class="user-detail">
            <div class="row">
                <div class="col-md-3 text-center">
                    <div class="user-avatar-large-wrapper">
                        ${user.avatar_url ? 
                            `<img src="${user.avatar_url}" alt="用户头像" class="avatar-large" id="modalAvatar">` :
                            `<div class="avatar-placeholder-large"><i class="bi bi-person"></i></div>`
                        }
                    </div>
                    <h5 class="mt-3">${user.nickname || user.username}</h5>
                    <span class="badge bg-${user.status === 1 ? 'success' : 'danger'}">
                        ${user.status === 1 ? '正常' : '禁用'}
                    </span>
                </div>
                <div class="col-md-9">
                    <div class="user-info-list">
                        <div class="user-info-item">
                            <span class="user-info-label">用户ID:</span>
                            <span class="user-info-value">#${user.id}</span>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-label">用户名:</span>
                            <span class="user-info-value">${user.username}</span>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-label">昵称:</span>
                            <span class="user-info-value">${user.nickname || '未设置'}</span>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-label">邮箱:</span>
                            <span class="user-info-value">${user.email || '未设置'}</span>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-label">手机号:</span>
                            <span class="user-info-value">${user.phone || '未设置'}</span>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-label">性别:</span>
                            <span class="user-info-value">${getGenderText(user.gender)}</span>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-label">生日:</span>
                            <span class="user-info-value">${user.birthday || '未设置'}</span>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-label">注册时间:</span>
                            <span class="user-info-value">${formatDateTime(user.created_at)}</span>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-label">最后更新:</span>
                            <span class="user-info-value">${formatDateTime(user.updated_at)}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
}

// 强制设置模态框中的头像样式
function forceModalAvatarStyles() {
    const modalAvatar = document.getElementById('modalAvatar');
    if (modalAvatar) {
        setAvatarStyles(modalAvatar, '80px');
        
        // 设置容器样式
        const wrapper = document.querySelector('.user-avatar-large-wrapper');
        if (wrapper) {
            wrapper.style.setProperty('width', '80px', 'important');
            wrapper.style.setProperty('height', '80px', 'important');
            wrapper.style.setProperty('margin', '0 auto', 'important');
            wrapper.style.setProperty('overflow', 'hidden', 'important');
            wrapper.style.setProperty('border-radius', '50%', 'important');
            wrapper.style.setProperty('position', 'relative', 'important');
            wrapper.style.setProperty('flex-shrink', '0', 'important');
            wrapper.style.setProperty('flex-grow', '0', 'important');
        }
    }
    
    // 通用的模态框头像处理
    const modalAvatars = document.querySelectorAll('.modal .avatar-large');
    modalAvatars.forEach(avatar => {
        setAvatarStyles(avatar, '80px');
    });
}

// 切换用户状态
function toggleUserStatus(userId, currentStatus) {
    const action = currentStatus === 1 ? '禁用' : '启用';
    const newStatus = currentStatus === 1 ? 0 : 1;
    
    if (!confirm(`确定要${action}此用户吗？`)) {
        return;
    }
    
    // 显示加载状态
    showLoading();
    
    // 发送AJAX请求
    fetch(`/admin/users/${userId}/toggle-status`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            status: newStatus
        })
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        if (data.success) {
            showSuccess(data.message);
            // 刷新页面
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            showError(data.message);
        }
    })
    .catch(error => {
        hideLoading();
        console.error('Error:', error);
        showError('网络错误，请重试');
    });
}

// 获取性别文本
function getGenderText(gender) {
    switch (gender) {
        case 1: return '男';
        case 2: return '女';
        default: return '未知';
    }
}

// 格式化日期时间
function formatDateTime(dateTimeString) {
    if (!dateTimeString) return '未知';
    
    const date = new Date(dateTimeString);
    return date.toLocaleString('zh-CN');
}

// 显示成功消息
function showSuccess(message) {
    showAlert(message, 'success');
}

// 显示错误消息
function showError(message) {
    showAlert(message, 'danger');
}

// 显示提示消息
function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // 插入到页面顶部
    const container = document.querySelector('.admin-content');
    container.insertBefore(alertDiv, container.firstChild);
    
    // 3秒后自动关闭
    setTimeout(() => {
        alertDiv.remove();
    }, 3000);
}

// 显示加载状态
function showLoading() {
    const loadingDiv = document.createElement('div');
    loadingDiv.id = 'loading-overlay';
    loadingDiv.innerHTML = `
        <div class="loading-spinner">
            <i class="bi bi-hourglass-split"></i>
            <div>处理中...</div>
        </div>
    `;
    loadingDiv.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        color: white;
    `;
    
    document.body.appendChild(loadingDiv);
}

// 隐藏加载状态
function hideLoading() {
    const loadingDiv = document.getElementById('loading-overlay');
    if (loadingDiv) {
        loadingDiv.remove();
    }
}

// 页面加载完成后强制设置头像样式
window.addEventListener('load', function() {
    forceAvatarStyles();
});

// 定时检查并修复头像样式
setInterval(function() {
    // 检查并修复表格头像
    const tableAvatars = document.querySelectorAll('.table .user-avatar');
    tableAvatars.forEach(avatar => {
        if (avatar.offsetWidth > 60 || avatar.offsetHeight > 60) {
            setAvatarStyles(avatar, '48px');
        }
    });
    
    // 检查并修复模态框头像
    const modalAvatars = document.querySelectorAll('.modal .avatar-large');
    modalAvatars.forEach(avatar => {
        if (avatar.offsetWidth > 100 || avatar.offsetHeight > 100) {
            setAvatarStyles(avatar, '80px');
        }
    });
}, 500);