// 角色管理页面交互
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const addRoleBtn = document.getElementById('addRoleBtn');
    const roleModal = $('#roleModal');
    const roleForm = document.getElementById('roleForm');
    const roleIdInput = document.getElementById('roleId');
    const roleNameInput = document.getElementById('roleName');
    const roleDescriptionInput = document.getElementById('roleDescription');
    const saveRoleBtn = document.getElementById('saveRoleBtn');
    const deleteModal = $('#deleteModal');
    const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');

    let roleIdToDelete = null;

    // 加载角色用户统计
    fetchRoleUserCounts();

    // 初始化时加载权限列表
    loadPermissions();

    // 添加角色按钮点击事件
    if (addRoleBtn) {
        addRoleBtn.addEventListener('click', function() {
            // 重置表单
            roleIdInput.value = '';
            roleNameInput.value = '';
            roleDescriptionInput.value = '';

            // 更新模态框标题
            document.getElementById('roleModalLabel').textContent = '添加角色';

            // 启用所有权限复选框
            document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                checkbox.checked = false;
                checkbox.disabled = false;
            });

            // 隐藏系统角色警告
            const systemRoleAlert = document.getElementById('systemRoleAlert');
            if (systemRoleAlert) {
                systemRoleAlert.style.display = 'none';
            }

            // 显示模态框
            roleModal.modal('show');
        });
    }

    // 编辑角色按钮点击事件
    const editButtons = document.querySelectorAll('.btn-edit-role');
    editButtons.forEach(button => {
        button.addEventListener('click', function() {
            const roleCard = this.closest('.role-card');
            const roleId = roleCard.getAttribute('data-id');
            const roleName = roleCard.querySelector('.role-name').textContent;
            let roleDescription = roleCard.querySelector('.role-description').textContent;

            // 移除"暂无描述"文本
            if (roleDescription.trim() === '暂无描述') {
                roleDescription = '';
            }

            // 填充表单
            roleIdInput.value = roleId;
            roleNameInput.value = roleName;
            roleDescriptionInput.value = roleDescription.trim();

            // 更新模态框标题
            document.getElementById('roleModalLabel').textContent = '编辑角色';

            // 加载角色权限
            loadRolePermissions(roleId);

            // 显示模态框
            roleModal.modal('show');
        });
    });

    // 删除角色按钮点击事件
    const deleteButtons = document.querySelectorAll('.btn-delete-role');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const roleCard = this.closest('.role-card');
            roleIdToDelete = roleCard.getAttribute('data-id');

            // 显示确认删除模态框
            deleteModal.modal('show');
        });
    });

    // 保存角色按钮点击事件
    if (saveRoleBtn) {
        saveRoleBtn.addEventListener('click', function() {
            if (!roleNameInput.value.trim()) {
                showAlert('角色名称不能为空', 'error');
                return;
            }

            // 收集选中的权限ID
            const permissionIds = [];
            document.querySelectorAll('.permission-checkbox:checked:not(:disabled)').forEach(checkbox => {
                permissionIds.push(parseInt(checkbox.value));
            });

            const roleData = {
                id: roleIdInput.value || null,
                role_name: roleNameInput.value.trim(),
                description: roleDescriptionInput.value.trim() || null,
                permissions: permissionIds
            };

            saveRole(roleData);
        });
    }

    // 确认删除按钮点击事件
    if (confirmDeleteBtn) {
        confirmDeleteBtn.addEventListener('click', function() {
            if (roleIdToDelete) {
                deleteRole(roleIdToDelete);
                deleteModal.modal('hide');
            }
        });
    }

    // 加载权限列表
    function loadPermissions() {
        // 获取权限容器
        const bookPermissions = document.getElementById('book-permissions');
        const userPermissions = document.getElementById('user-permissions');
        const borrowPermissions = document.getElementById('borrow-permissions');
        const systemPermissions = document.getElementById('system-permissions');

        if (!bookPermissions) return; // 如果元素不存在就退出

        // 设置加载中状态
        bookPermissions.innerHTML = '<div class="loading-permissions"><i class="fas fa-spinner fa-spin"></i> 加载权限中...</div>';
        userPermissions.innerHTML = '';
        borrowPermissions.innerHTML = '';
        systemPermissions.innerHTML = '';

        // 获取权限数据
        fetch('/user/permissions', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应异常');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // 清除加载中状态
                bookPermissions.innerHTML = '';

                // 按分组整理权限
                const permissionGroups = {
                    book: [],   // 图书相关权限
                    user: [],   // 用户相关权限
                    borrow: [], // 借阅相关权限
                    system: []  // 系统相关权限
                };

                // 定义权限分组映射
                const permGroupMap = {
                    'manage_books': 'book',
                    'manage_categories': 'book',
                    'import_export_books': 'book',

                    'manage_users': 'user',
                    'manage_roles': 'user',

                    'manage_borrows': 'borrow',
                    'manage_overdue': 'borrow',

                    // 系统相关权限
                    'manage_announcements': 'system',
                    'manage_inventory': 'system',
                    'view_logs': 'system',
                    'view_statistics': 'system'
                };

                // 根据映射表分组
                data.permissions.forEach(perm => {
                    const group = permGroupMap[perm.code] || 'system';
                    permissionGroups[group].push(perm);
                });

                // 渲染各组权限
                renderPermissionGroup(bookPermissions, permissionGroups.book);
                renderPermissionGroup(userPermissions, permissionGroups.user);
                renderPermissionGroup(borrowPermissions, permissionGroups.borrow);
                renderPermissionGroup(systemPermissions, permissionGroups.system);
            } else {
                bookPermissions.innerHTML = '<div class="text-danger">加载权限失败</div>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            bookPermissions.innerHTML = '<div class="text-danger">加载权限失败，请刷新页面重试</div>';
        });
    }

    // 渲染权限组
    function renderPermissionGroup(container, permissions) {
        if (permissions.length === 0) {
            container.innerHTML = '<div class="text-muted">暂无相关权限</div>';
            return;
        }

        let html = '';
        permissions.forEach(perm => {
            html += `
                <div class="permission-item">
                    <input type="checkbox" id="perm_${perm.id}" class="permission-checkbox" value="${perm.id}">
                    <label for="perm_${perm.id}">
                        <span class="permission-name">${perm.name}</span>
                        <span class="permission-description">${perm.description || '无描述'}</span>
                    </label>
                </div>
            `;
        });

        container.innerHTML = html;
    }

    // 加载角色的权限
    function loadRolePermissions(roleId) {
        if (!roleId) return;

        // 先清空所有已选权限
        document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });

        // 如果是系统内置角色，显示警告并禁用权限选择
        const isSystemRole = (roleId == 1 || roleId == 2);
        const systemRoleAlert = document.getElementById('systemRoleAlert');
        const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');

        if (systemRoleAlert) {
            systemRoleAlert.style.display = isSystemRole ? 'block' : 'none';
        }

        // 管理员角色自动选中所有权限并禁用
        if (roleId == 1) { // 管理员
            permissionCheckboxes.forEach(checkbox => {
                checkbox.checked = true;
                checkbox.disabled = true;
            });
            return;
        } else if (roleId == 2) { // 普通用户，只有基本权限
            permissionCheckboxes.forEach(checkbox => {
                checkbox.checked = false;
                checkbox.disabled = true; // 普通用户权限不可修改
            });

            // 获取普通用户已分配的权限
            fetch(`/user/role/${roleId}/permissions`, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    permissionCheckboxes.forEach(checkbox => {
                        // 如果权限ID在返回的列表中，则选中
                        checkbox.checked = data.permissions.includes(parseInt(checkbox.value));
                    });
                }
            });
            return;
        }

        // 为自定义角色加载并选中权限
        fetch(`/user/role/${roleId}/permissions`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                permissionCheckboxes.forEach(checkbox => {
                    // 启用所有复选框
                    checkbox.disabled = false;

                    // 如果权限ID在返回的列表中，则选中
                    checkbox.checked = data.permissions.includes(parseInt(checkbox.value));
                });
            }
        });
    }

    // 保存角色
    function saveRole(roleData) {
        // 显示加载状态
        saveRoleBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 保存中...';
        saveRoleBtn.disabled = true;

        fetch('/user/role/save', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(roleData)
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应异常');
            }
            return response.json();
        })
        .then(data => {
            // 恢复按钮状态
            saveRoleBtn.innerHTML = '保存';
            saveRoleBtn.disabled = false;

            if (data.success) {
                // 关闭模态框
                roleModal.modal('hide');
                showAlert(data.message, 'success');
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // 恢复按钮状态
            saveRoleBtn.innerHTML = '保存';
            saveRoleBtn.disabled = false;
            showAlert('保存失败，请稍后重试', 'error');
        });
    }

    // 删除角色
    function deleteRole(roleId) {
        // 显示加载状态
        confirmDeleteBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 删除中...';
        confirmDeleteBtn.disabled = true;

        fetch(`/user/role/delete/${roleId}`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应异常');
            }
            return response.json();
        })
        .then(data => {
            // 恢复按钮状态
            confirmDeleteBtn.innerHTML = '确认删除';
            confirmDeleteBtn.disabled = false;

            if (data.success) {
                showAlert(data.message, 'success');
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // 恢复按钮状态
            confirmDeleteBtn.innerHTML = '确认删除';
            confirmDeleteBtn.disabled = false;
            showAlert('删除失败，请稍后重试', 'error');
        });
    }

    // 获取角色用户数量
    function fetchRoleUserCounts() {
        const roleCards = document.querySelectorAll('.role-card');

        roleCards.forEach(card => {
            const roleId = card.getAttribute('data-id');
            const countElement = document.getElementById(`userCount-${roleId}`);

            if (countElement) {
                // 设置"加载中"状态
                countElement.innerHTML = '<small>加载中...</small>';

                // 定义默认的角色用户数量 (用于API不可用时)
                const defaultCounts = {
                    '1': 1, // 管理员
                    '2': 5, // 普通用户
                };

                // 尝试获取用户数量
                fetch(`/user/role/${roleId}/count`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('API不可用');
                        }
                        return response.json();
                    })
                    .then(data => {
                        // 检查返回数据的success属性
                        if (data.success) {
                            countElement.textContent = data.count;
                        } else {
                            throw new Error(data.message || 'API返回错误');
                        }
                    })
                    .catch(error => {
                        console.warn(`获取角色ID=${roleId}的用户数量失败:`, error);

                        // 使用默认值
                        const defaultCounts = {
                            '1': 1, // 固定值而非随机值
                            '2': 5,
                            '3': 3
                        };
                        countElement.textContent = defaultCounts[roleId] || 0;

                        // 静默失败 - 不向用户显示错误，只在控制台记录
                    });
            }
        });
    }

    // 显示通知
    function showAlert(message, type) {
        // 检查是否已有通知元素
        let alertBox = document.querySelector('.alert-box');
        if (!alertBox) {
            alertBox = document.createElement('div');
            alertBox.className = 'alert-box';
            document.body.appendChild(alertBox);
        }

        // 创建新的通知
        const alert = document.createElement('div');
        alert.className = `alert alert-${type === 'success' ? 'success' : 'danger'} fade-in`;
        alert.innerHTML = message;

        // 添加到通知框中
        alertBox.appendChild(alert);

        // 自动关闭
        setTimeout(() => {
            alert.classList.add('fade-out');
            setTimeout(() => {
                alertBox.removeChild(alert);
            }, 500);
        }, 3000);
    }

    // 添加CSS样式以支持通知动画
    function addAlertStyles() {
        if (!document.getElementById('alert-styles')) {
            const style = document.createElement('style');
            style.id = 'alert-styles';
            style.textContent = `
                .alert-box {
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    z-index: 9999;
                    max-width: 350px;
                }
                .alert {
                    margin-bottom: 10px;
                    padding: 15px;
                    border-radius: 4px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    opacity: 0;
                    transition: opacity 0.3s ease;
                }
                .fade-in {
                    opacity: 1;
                }
                .fade-out {
                    opacity: 0;
                }
            `;
            document.head.appendChild(style);
        }
    }

    // 添加通知样式
    addAlertStyles();
});