/**
 * 用户中心页面脚本
 */

// 使用web-auth.js中的全局webAuth实例
// const webAuth = new WebAuth(); // 已在web-auth.js中创建

// 当前Tab
let currentTab = 'profile';

// 登录历史分页
let historyPage = 1;
const historyPageSize = 10;

/**
 * 页面加载完成后初始化
 */
document.addEventListener('DOMContentLoaded', function() {
    // 检查登录状态
    if (!webAuth.isLoggedIn()) {
        window.location.href = '/';
        return;
    }

    // 初始化页面
    initUserCenter();

    // 绑定Tab切换事件
    bindTabEvents();

    // 绑定表单事件
    bindFormEvents();
});

/**
 * 初始化用户中心
 */
async function initUserCenter() {
    try {
        const userInfo = await webAuth.getUserInfo();
        if (!userInfo) {
            window.location.href = '/';
            return;
        }

        // 更新导航栏
        document.getElementById('navUsername').textContent = userInfo.username;

        // 更新侧边栏
        updateSidebar(userInfo);

        // 加载个人资料
        loadProfile(userInfo);

    } catch (error) {
        console.error('初始化用户中心失败:', error);
        alert('加载用户信息失败，请重新登录');
        window.location.href = '/';
    }
}

/**
 * 更新侧边栏
 */
function updateSidebar(userInfo) {
    // 用户头像（显示用户名首字母）
    const avatar = document.getElementById('userAvatar');
    avatar.textContent = userInfo.username.charAt(0).toUpperCase();

    // 用户名
    document.getElementById('sidebarUsername').textContent = userInfo.username;

    // 用户等级
    const levelBadge = document.getElementById('sidebarLevel');
    levelBadge.textContent = getLevelText(userInfo.level);
    levelBadge.className = 'level-badge level-' + userInfo.level;
}

/**
 * 加载个人资料
 */
function loadProfile(userInfo) {
    document.getElementById('profileUsername').textContent = userInfo.username;

    const levelBadge = document.getElementById('profileLevel');
    levelBadge.textContent = getLevelText(userInfo.level);
    levelBadge.className = 'level-badge level-' + userInfo.level;

    const statusBadge = document.getElementById('profileStatus');
    statusBadge.textContent = userInfo.is_active ? '正常' : '已禁用';
    statusBadge.className = userInfo.is_active ? 'badge bg-success' : 'badge bg-danger';

    document.getElementById('profileCreatedAt').textContent = formatDateTime(userInfo.created_at);
    document.getElementById('profileLastLogin').textContent = userInfo.last_login_at ? formatDateTime(userInfo.last_login_at) : '从未登录';
}

/**
 * 绑定Tab切换事件
 */
function bindTabEvents() {
    const navLinks = document.querySelectorAll('.sidebar .nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const tab = this.getAttribute('data-tab');
            switchTab(tab);
        });
    });
}

/**
 * 切换Tab
 */
function switchTab(tab) {
    // 更新导航状态
    document.querySelectorAll('.sidebar .nav-link').forEach(link => {
        link.classList.remove('active');
    });
    document.querySelector(`[data-tab="${tab}"]`).classList.add('active');

    // 隐藏所有内容
    document.querySelectorAll('.content-card').forEach(card => {
        card.style.display = 'none';
    });

    // 显示对应内容
    currentTab = tab;
    switch(tab) {
        case 'profile':
            document.getElementById('profileTab').style.display = 'block';
            break;
        case 'password':
            document.getElementById('passwordTab').style.display = 'block';
            break;
        case 'history':
            document.getElementById('historyTab').style.display = 'block';
            loadLoginHistory();
            break;
        case 'devices':
            document.getElementById('devicesTab').style.display = 'block';
            loadDevices();
            break;
    }
}

/**
 * 绑定表单事件
 */
function bindFormEvents() {
    // 修改密码表单
    document.getElementById('changePasswordForm').addEventListener('submit', handleChangePassword);
}

/**
 * 处理修改密码
 */
async function handleChangePassword(e) {
    e.preventDefault();

    const oldPassword = document.getElementById('oldPassword').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    // 隐藏提示
    document.getElementById('passwordError').style.display = 'none';
    document.getElementById('passwordSuccess').style.display = 'none';

    // 验证新密码
    if (newPassword !== confirmPassword) {
        showPasswordError('两次输入的新密码不一致');
        return;
    }

    if (newPassword.length < 6 || newPassword.length > 32) {
        showPasswordError('新密码长度必须在6-32个字符之间');
        return;
    }

    if (!/[a-zA-Z]/.test(newPassword) || !/[0-9]/.test(newPassword)) {
        showPasswordError('新密码必须包含字母和数字');
        return;
    }

    try {
        await webAuth.changePassword(oldPassword, newPassword, confirmPassword);
        showPasswordSuccess('密码修改成功，请重新登录');

        // 清空表单
        document.getElementById('changePasswordForm').reset();

        // 3秒后跳转到首页
        setTimeout(() => {
            window.location.href = '/';
        }, 3000);
    } catch (error) {
        showPasswordError(error.message || '修改密码失败');
    }
}

function showPasswordError(message) {
    const errorDiv = document.getElementById('passwordError');
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
}

function showPasswordSuccess(message) {
    const successDiv = document.getElementById('passwordSuccess');
    successDiv.textContent = message;
    successDiv.style.display = 'block';
}

/**
 * 加载登录历史
 */
async function loadLoginHistory() {
    try {
        const response = await fetch(`/api/v1/web-auth/login-history?page=${historyPage}&page_size=${historyPageSize}`, {
            headers: {
                'Authorization': `Bearer ${webAuth.getToken()}`
            }
        });

        if (!response.ok) {
            throw new Error('加载登录历史失败');
        }

        const data = await response.json();
        renderLoginHistory(data.items);
        renderHistoryPagination(data.total, data.page, data.page_size);
    } catch (error) {
        console.error('加载登录历史失败:', error);
        document.getElementById('loginHistoryList').innerHTML = '<div class="alert alert-danger">加载失败</div>';
    }
}

/**
 * 渲染登录历史列表
 */
function renderLoginHistory(items) {
    const container = document.getElementById('loginHistoryList');

    if (!items || items.length === 0) {
        container.innerHTML = '<div class="alert alert-info">暂无登录记录</div>';
        return;
    }

    let html = '';
    items.forEach(item => {
        html += `
            <div class="login-history-item">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="mb-2">
                            <i class="fas fa-clock text-muted me-2"></i>
                            <strong>${formatDateTime(item.login_time)}</strong>
                        </div>
                        <div class="mb-1">
                            <i class="fas fa-map-marker-alt text-muted me-2"></i>
                            IP: ${item.ip_address}
                        </div>
                        <div>
                            <i class="fas fa-desktop text-muted me-2"></i>
                            ${item.user_agent || '未知设备'}
                        </div>
                    </div>
                    <span class="badge ${item.status === 'success' ? 'bg-success' : 'bg-danger'}">
                        ${item.status === 'success' ? '成功' : '失败'}
                    </span>
                </div>
            </div>
        `;
    });

    container.innerHTML = html;
}

/**
 * 渲染登录历史分页
 */
function renderHistoryPagination(total, page, pageSize) {
    const totalPages = Math.ceil(total / pageSize);
    if (totalPages <= 1) {
        document.getElementById('historyPagination').innerHTML = '';
        return;
    }

    let html = '<ul class="pagination justify-content-center">';

    // 上一页
    html += `<li class="page-item ${page === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="changeHistoryPage(${page - 1}); return false;">上一页</a>
    </li>`;

    // 页码
    for (let i = 1; i <= totalPages; i++) {
        if (i === 1 || i === totalPages || (i >= page - 2 && i <= page + 2)) {
            html += `<li class="page-item ${i === page ? 'active' : ''}">
                <a class="page-link" href="#" onclick="changeHistoryPage(${i}); return false;">${i}</a>
            </li>`;
        } else if (i === page - 3 || i === page + 3) {
            html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
        }
    }

    // 下一页
    html += `<li class="page-item ${page === totalPages ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="changeHistoryPage(${page + 1}); return false;">下一页</a>
    </li>`;

    html += '</ul>';
    document.getElementById('historyPagination').innerHTML = html;
}

/**
 * 切换登录历史页码
 */
function changeHistoryPage(page) {
    historyPage = page;
    loadLoginHistory();
}

/**
 * 加载设备列表
 */
async function loadDevices() {
    try {
        const response = await fetch('/api/v1/web-auth/devices', {
            headers: {
                'Authorization': `Bearer ${webAuth.getToken()}`
            }
        });

        if (!response.ok) {
            throw new Error('加载设备列表失败');
        }

        const data = await response.json();
        renderDevices(data.devices);
    } catch (error) {
        console.error('加载设备列表失败:', error);
        document.getElementById('devicesList').innerHTML = '<div class="alert alert-danger">加载失败</div>';
    }
}

/**
 * 渲染设备列表
 */
function renderDevices(devices) {
    const container = document.getElementById('devicesList');

    if (!devices || devices.length === 0) {
        container.innerHTML = '<div class="alert alert-info">暂无设备记录</div>';
        return;
    }

    let html = '';
    devices.forEach(device => {
        const isCurrent = device.is_current;
        html += `
            <div class="device-item ${isCurrent ? 'current-device' : ''}">
                <div>
                    <div class="mb-2">
                        <i class="fas fa-${getDeviceIcon(device.device_type)} text-primary me-2"></i>
                        <strong>${device.device_name || '未知设备'}</strong>
                        ${isCurrent ? '<span class="badge bg-primary ms-2">当前设备</span>' : ''}
                    </div>
                    <div class="text-muted small">
                        <div>最后活跃: ${formatDateTime(device.last_active)}</div>
                        <div>IP: ${device.ip_address}</div>
                    </div>
                </div>
                ${!isCurrent ? `<button class="btn btn-sm btn-outline-danger" onclick="removeDevice('${device.device_id}')">移除</button>` : ''}
            </div>
        `;
    });

    container.innerHTML = html;
}

/**
 * 移除设备
 */
async function removeDevice(deviceId) {
    if (!confirm('确定要移除此设备吗？')) {
        return;
    }

    try {
        const response = await fetch(`/api/v1/web-auth/devices/${deviceId}`, {
            method: 'DELETE',
            headers: {
                'Authorization': `Bearer ${webAuth.getToken()}`
            }
        });

        if (!response.ok) {
            throw new Error('移除设备失败');
        }

        alert('设备已移除');
        loadDevices();
    } catch (error) {
        console.error('移除设备失败:', error);
        alert('移除设备失败');
    }
}

/**
 * 登出
 */
async function logout() {
    await webAuth.logout();
    window.location.href = '/';
}

/**
 * 工具函数：获取用户等级文本
 */
function getLevelText(level) {
    const levelMap = {
        'guest': '游客',
        'normal': '普通用户',
        'vip': 'VIP用户',
        'pro': 'PRO用户'
    };
    return levelMap[level] || level;
}

/**
 * 工具函数：格式化日期时间
 */
function formatDateTime(dateStr) {
    if (!dateStr) return '-';
    const date = new Date(dateStr);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
}

/**
 * 工具函数：获取设备图标
 */
function getDeviceIcon(deviceType) {
    const iconMap = {
        'mobile': 'mobile-alt',
        'tablet': 'tablet-alt',
        'desktop': 'desktop',
        'laptop': 'laptop'
    };
    return iconMap[deviceType] || 'desktop';
}