// 用户个人中心页面交互
document.addEventListener('DOMContentLoaded', function() {
    // 获取表单对象
    const profileForm = document.getElementById('profileForm');
    const passwordForm = document.getElementById('passwordForm');

    // 表单验证逻辑
    if (profileForm) {
        profileForm.addEventListener('submit', function(event) {
            let valid = true;

            // 清除之前的错误提示
            clearValidationErrors();

            // 验证邮箱
            const emailField = document.getElementById('email');
            if (emailField.value.trim() !== '') {
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailPattern.test(emailField.value.trim())) {
                    showError(emailField, '请输入有效的邮箱地址');
                    valid = false;
                }
            }

            // 验证手机号
            const phoneField = document.getElementById('phone');
            if (phoneField.value.trim() !== '') {
                const phonePattern = /^1[3456789]\d{9}$/;
                if (!phonePattern.test(phoneField.value.trim())) {
                    showError(phoneField, '请输入有效的手机号码');
                    valid = false;
                }
            }

            if (!valid) {
                event.preventDefault();
            }
        });
    }

    // 密码修改表单验证
    if (passwordForm) {
        passwordForm.addEventListener('submit', function(event) {
            let valid = true;

            // 清除之前的错误提示
            clearValidationErrors();

            // 验证当前密码
            const currentPasswordField = document.getElementById('current_password');
            if (currentPasswordField.value.trim() === '') {
                showError(currentPasswordField, '请输入当前密码');
                valid = false;
            }

            // 验证新密码
            const newPasswordField = document.getElementById('new_password');
            if (newPasswordField.value.trim() === '') {
                showError(newPasswordField, '请输入新密码');
                valid = false;
            } else if (newPasswordField.value.length < 6) {
                showError(newPasswordField, '密码长度至少为6个字符');
                valid = false;
            }

            // 验证确认密码
            const confirmPasswordField = document.getElementById('confirm_password');
            if (confirmPasswordField.value.trim() === '') {
                showError(confirmPasswordField, '请确认新密码');
                valid = false;
            } else if (confirmPasswordField.value !== newPasswordField.value) {
                showError(confirmPasswordField, '两次输入的密码不一致');
                valid = false;
            }

            if (!valid) {
                event.preventDefault();
            }
        });
    }

    // 获取用户统计数据
    fetchUserStats();

    // 获取用户活动记录
    const activityFilter = document.getElementById('activityFilter');
    if (activityFilter) {
        // 初始加载
        fetchUserActivities('all');

        // 监听过滤器变化
        activityFilter.addEventListener('change', function() {
            fetchUserActivities(this.value);
        });
    }

    // 处理URL中的tab参数
    const urlParams = new URLSearchParams(window.location.search);
    const tabParam = urlParams.get('tab');
    if (tabParam) {
        const tabElement = document.getElementById(`${tabParam}-tab`);
        if (tabElement) {
            $('#profileTabs a[href="#' + tabParam + '"]').tab('show');
        }
    }

    // 清除表单验证错误
    function clearValidationErrors() {
        const invalidFields = document.querySelectorAll('.is-invalid');
        const feedbackElements = document.querySelectorAll('.invalid-feedback');

        invalidFields.forEach(field => {
            field.classList.remove('is-invalid');
        });

        feedbackElements.forEach(element => {
            element.parentNode.removeChild(element);
        });
    }

    // 显示错误消息
    function showError(field, message) {
        field.classList.add('is-invalid');

        const feedback = document.createElement('div');
        feedback.className = 'invalid-feedback';
        feedback.innerText = message;

        field.parentNode.appendChild(feedback);
    }

    // 获取用户统计数据
    function fetchUserStats() {
        // 这里使用虚拟数据，实际应用中应当从后端获取
        // fetch('/api/user/stats')
        // .then(response => response.json())
        // .then(data => {
        //     updateUserStats(data);
        // });

        // 模拟数据
        setTimeout(() => {
            const mockData = {
                borrow: 2,
                returned: 15,
                overdue: 0
            };
            updateUserStats(mockData);
        }, 500);
    }

    // 更新用户统计显示
    function updateUserStats(data) {
        const borrowCount = document.getElementById('borrowCount');
        const returnedCount = document.getElementById('returnedCount');
        const overdueCount = document.getElementById('overdueCount');

        if (borrowCount) borrowCount.textContent = data.borrow;
        if (returnedCount) returnedCount.textContent = data.returned;
        if (overdueCount) overdueCount.textContent = data.overdue;
    }

    // 获取用户活动记录
    function fetchUserActivities(type) {
        const timelineContainer = document.getElementById('activityTimeline');
        if (!timelineContainer) return;

        // 显示加载中
        timelineContainer.innerHTML = `
            <div class="timeline-loading">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <p>加载中...</p>
            </div>
        `;

        // 实际应用中应当从后端获取
        // fetch(`/api/user/activities?type=${type}`)
        // .then(response => response.json())
        // .then(data => {
        //     renderActivityTimeline(data, timelineContainer);
        // });

        // 模拟数据
        setTimeout(() => {
            const mockActivities = [
                {
                    id: 1,
                    type: 'login',
                    title: '系统登录',
                    details: '成功登录系统',
                    time: '2023-04-28 15:30:22',
                    ip: '192.168.1.1'
                },
                {
                    id: 2,
                    type: 'borrow',
                    title: '借阅图书',
                    details: '借阅《JavaScript高级编程》',
                    time: '2023-04-27 11:45:10',
                    book_id: 101
                },
                {
                    id: 3,
                    type: 'return',
                    title: '归还图书',
                    details: '归还《Python数据分析》',
                    time: '2023-04-26 09:15:33',
                    book_id: 95
                },
                {
                    id: 4,
                    type: 'login',
                    title: '系统登录',
                    details: '成功登录系统',
                    time: '2023-04-25 08:22:15',
                    ip: '192.168.1.1'
                }
            ];

            // 根据筛选条件过滤活动
            let filteredActivities = mockActivities;
            if (type !== 'all') {
                filteredActivities = mockActivities.filter(activity => activity.type === type);
            }

            renderActivityTimeline(filteredActivities, timelineContainer);
        }, 800);
    }

    // 渲染活动时间线
    function renderActivityTimeline(activities, container) {
        if (!activities || activities.length === 0) {
            container.innerHTML = '<div class="text-center p-4">暂无活动记录</div>';
            return;
        }

        let timelineHTML = '';

        activities.forEach((activity, index) => {
            let iconClass = 'fas fa-info';

            if (activity.type === 'login') {
                iconClass = 'fas fa-sign-in-alt';
            } else if (activity.type === 'borrow') {
                iconClass = 'fas fa-book';
            } else if (activity.type === 'return') {
                iconClass = 'fas fa-undo';
            }

            const isLast = index === activities.length - 1;

            timelineHTML += `
                <div class="timeline-item ${isLast ? 'last' : ''} timeline-type-${activity.type}">
                    <div class="timeline-icon">
                        <i class="${iconClass}"></i>
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-header">
                            <h5 class="timeline-title">${activity.title}</h5>
                            <div class="timeline-time">${activity.time}</div>
                        </div>
                        <div class="timeline-details">
                            ${activity.details}
                            ${activity.ip ? `<div class="text-muted small">IP: ${activity.ip}</div>` : ''}
                        </div>
                    </div>
                </div>
            `;
        });

        container.innerHTML = timelineHTML;
    }
});
