// 用户个人中心页面交互
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('/user/api/stats')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            updateUserStats(data);
        })
        .catch(error => {
            console.error('Error fetching user stats:', error);
            // 出错时使用默认值
            updateUserStats({borrow: 0, returned: 0, overdue: 0});
        });
    }

    // 更新用户统计显示
    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(`/user/api/activities?type=${type}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            renderActivityTimeline(data.activities, timelineContainer);
        })
        .catch(error => {
            console.error('Error fetching activities:', error);
            timelineContainer.innerHTML = '<div class="text-center p-4">获取活动记录失败</div>';
        });
    }

    // 渲染活动时间线
    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';
            } else if (activity.type === 'other') {
                iconClass = 'fas fa-cog';
            }

            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>` : ''}
                            ${activity.target_type && activity.target_id ? `
                                <div class="text-muted small">
                                    ${activity.target_type === 'book' ? '图书ID: ' : '目标ID: '}${activity.target_id}
                                </div>` : ''}
                        </div>
                    </div>
                </div>
            `;
        });

        container.innerHTML = timelineHTML;
    }

    // 添加分页加载更多功能
    let currentPage = 1;

    function loadMoreActivities(type) {
        currentPage++;
        const timelineContainer = document.getElementById('activityTimeline');

        // 显示加载中指示器
        const loadingIndicator = document.createElement('div');
        loadingIndicator.className = 'text-center mt-3 mb-3';
        loadingIndicator.id = 'loadingMoreIndicator';
        loadingIndicator.innerHTML = `
            <div class="spinner-border spinner-border-sm text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <span class="ml-2">加载更多...</span>
        `;

        timelineContainer.appendChild(loadingIndicator);

        fetch(`/user/api/activities?type=${type}&page=${currentPage}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // 移除加载指示器
            const indicator = document.getElementById('loadingMoreIndicator');
            if (indicator) indicator.remove();

            if (data.activities && data.activities.length > 0) {
                // 添加新活动到现有时间线
                appendActivitiesToTimeline(data.activities, timelineContainer);

                // 如果已经是最后一页，隐藏加载更多按钮
                if (data.current_page >= data.pages) {
                    const loadMoreBtn = document.getElementById('loadMoreBtn');
                    if (loadMoreBtn) loadMoreBtn.style.display = 'none';
                }
            } else {
                // 没有更多活动
                const noMoreDiv = document.createElement('div');
                noMoreDiv.className = 'text-center p-3 text-muted';
                noMoreDiv.textContent = '没有更多活动记录';
                timelineContainer.appendChild(noMoreDiv);

                const loadMoreBtn = document.getElementById('loadMoreBtn');
                if (loadMoreBtn) loadMoreBtn.style.display = 'none';
            }
        })
        .catch(error => {
            console.error('Error loading more activities:', error);
            // 移除加载指示器
            const indicator = document.getElementById('loadingMoreIndicator');
            if (indicator) indicator.remove();

            // 显示错误消息
            const errorDiv = document.createElement('div');
            errorDiv.className = 'text-center p-3 text-danger';
            errorDiv.textContent = '加载更多活动失败';
            timelineContainer.appendChild(errorDiv);
        });
    }

    // 将新活动附加到现有时间线
    function appendActivitiesToTimeline(activities, container) {
        // 移除之前的 "last" 类
        const lastItems = container.querySelectorAll('.timeline-item.last');
        lastItems.forEach(item => {
            item.classList.remove('last');
        });

        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';
            } else if (activity.type === 'other') {
                iconClass = 'fas fa-cog';
            }

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

            const timelineItem = document.createElement('div');
            timelineItem.className = `timeline-item ${isLast ? 'last' : ''} timeline-type-${activity.type}`;

            timelineItem.innerHTML = `
                <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>` : ''}
                        ${activity.target_type && activity.target_id ? `
                            <div class="text-muted small">
                                ${activity.target_type === 'book' ? '图书ID: ' : '目标ID: '}${activity.target_id}
                            </div>` : ''}
                    </div>
                </div>
            `;

            container.appendChild(timelineItem);
        });

        // 如果显示了加载更多按钮，确保它在末尾
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        if (loadMoreBtn) {
            container.appendChild(loadMoreBtn);
        }
    }

    // 添加加载更多按钮点击事件
    document.body.addEventListener('click', function(e) {
        if (e.target && e.target.id === 'loadMoreBtn') {
            const activityFilter = document.getElementById('activityFilter');
            loadMoreActivities(activityFilter ? activityFilter.value : 'all');
        }
    });
});