{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-pages.css"}}">

{{template "admin-hero-styles" .}}

<details class="admin-hero">
    <summary class="admin-hero-bar">
        <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-user'></i></span>
        <span class="admin-hero-intro">{{T "admin_users_page_hint"}}</span>
        <span class="admin-hero-toggle">
            <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>
            {{template "admin-hero-help-meta" .}}
        </span>
    </summary>
    <div class="admin-hero-body">
            <ul class="admin-hero-field-grid">
                <li class="admin-hero-field-item"><strong>{{T "admin_users_usage_search"}}</strong>{{T "admin_users_usage_search_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_users_usage_manage"}}</strong>{{T "admin_users_usage_manage_desc"}}</li>
            </ul>
    </div>
</details>
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <!-- 搜索栏 -->
        <div class="d-flex gap-2 align-items-center flex-wrap">
            <button class="btn btn-primary btn-sm" onclick="showAddUser()">
                <i class='bx bx-plus'></i> {{T "admin_users_add"}}
            </button>
            <div class="flex-grow-1" style="min-width: 200px;">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class='bx bx-search'></i></span>
                    <input type="text" class="form-control form-control-sm" id="searchKeyword" placeholder="{{T "admin_users_search_placeholder"}}" value="{{.Keyword}}">
                </div>
            </div>
            <div style="min-width: 150px;">
                <select class="form-select form-select-sm" id="filterGroup">
                    <option value="">{{T "admin_users_all_groups"}}</option>
                    {{range .Groups}}
                    <option value="{{.gid}}" {{if eq $.GidFilter (printf "%d" .gid)}}selected{{end}}>{{.group_name}}</option>
                    {{end}}
                </select>
            </div>
        </div>
    </div>
    <div class="card-body">
        

        <div class="table-responsive" data-nc-privacy-menu>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th width="60">{{T "admin_users_col_id"}}</th>
                        <th>{{T "admin_users_col_user"}}</th>
                        <th>{{T "admin_users_col_group"}}</th>
                        <th>{{T "admin_users_col_balance"}}</th>
                        <th>{{T "admin_users_col_dates"}}</th>
                        <th>{{T "admin_users_col_ip"}}</th>
                        <th width="60" class="text-center">{{T "admin_users_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody id="userList">
                    {{if .Data}}
                    {{range .Data}}
                    <tr data-id="{{.userid}}">
                        <td>{{.userid}}</td>
                        <td>
                            <div><strong>{{privacy "username" .username}}</strong></div>
                            {{if .nickname}}<div class="text-muted small">{{privacy "text" .nickname}}</div>{{end}}
                            <div class="text-muted small">{{privacy "email" .email}}</div>
                        </td>
                        <td>
                            {{$gid := .gid}}
                            {{$found := false}}
                            {{range $.Groups}}
                                {{if eq .gid $gid}}
                                    {{$found = true}}
                                    {{if eq $gid 1}}<span class="badge bg-danger">{{.group_name}}</span>
                                    {{else if eq $gid 4}}<span class="badge bg-secondary">{{.group_name}}</span>
                                    {{else if eq $gid 8}}<span class="badge bg-success">{{.group_name}}</span>
                                    {{else if eq $gid 9}}<span class="badge bg-primary">{{.group_name}}</span>
                                    {{else}}<span class="badge bg-secondary">{{.group_name}}</span>{{end}}
                                {{end}}
                            {{end}}
                            {{if not $found}}<span class="badge bg-secondary">{{T "admin_unknown"}}</span>{{end}}
                        </td>
                        <td>{{printf "%.2f" .money}}</td>
                        <td>
                            <div class="small">
                                <div><i class='bx bx-calendar'></i> {{T "admin_users_reg"}}: {{if .reg_time_str}}{{.reg_time_str}}{{else}}-{{end}}</div>
                                <div class="text-muted mt-1"><i class='bx bx-time'></i> {{T "admin_users_login"}}: {{if .last_login_str}}{{.last_login_str}}{{else}}-{{end}}</div>
                            </div>
                        </td>
                        <td class="small">
                            {{if .last_login_ip_str}}
                            <div>{{privacy "ip" .last_login_ip_str}}</div>
                            {{if .last_login_ip_geo}}<div class="text-muted mt-1"><i class='bx bx-map'></i> {{.last_login_ip_geo}}</div>{{end}}
                            {{else}}-{{end}}
                        </td>
                        <td class="text-center">
                            <div class="dropdown table-action-dropdown">
                                <button class="btn btn-action-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bx bx-dots-vertical-rounded" style="font-size:1.15rem;"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="javascript:;" onclick="editUser('{{.userid}}')"><i class="bx bx-edit"></i> {{T "admin_btn_edit"}}</a></li>
                                    <li><a class="dropdown-item text-danger user-action-delete" href="javascript:;" data-userid="{{.userid}}" data-username="{{.username}}"><i class="bx bx-trash"></i> {{T "admin_btn_delete"}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {{end}}
                    {{else}}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">{{T "admin_users_no_users"}}</td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        {{if .Pagination}}
        <nav aria-label="pagination">
            <ul class="pagination justify-content-center" id="initialPagination">
                {{$currentPage := .Pagination.CurrentPage}}
                {{$totalPages := .Pagination.TotalPages}}
                {{$prevPage := sub $currentPage 1}}
                {{$nextPage := add $currentPage 1}}
                {{if gt $currentPage 1}}
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPage(1); return false;">
                        <i class='bx bx-first-page'></i> {{T "admin_pagination_first"}}
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPage('{{$prevPage}}'); return false;">
                        <i class='bx bx-chevron-left'></i> {{T "admin_pagination_prev"}}
                    </a>
                </li>
                {{end}}
                
                <li class="page-item">
                    <span class="page-link">{{T "admin_pagination_page"}} {{$currentPage}} / {{$totalPages}}</span>
                </li>
                
                {{if lt $currentPage $totalPages}}
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPage('{{$nextPage}}'); return false;">
                        {{T "admin_pagination_next"}} <i class='bx bx-chevron-right'></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" onclick="goToPage('{{$totalPages}}'); return false;">
                        {{T "admin_pagination_last"}} <i class='bx bx-last-page'></i>
                    </a>
                </li>
                {{end}}
                
                <li class="page-item disabled">
                    <span class="page-link">{{$totalPages}} {{T "admin_pagination_pages_unit"}}，{{.Pagination.TotalCount}} {{T "admin_pagination_records_unit"}}</span>
                </li>
            </ul>
        </nav>
        {{end}}
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
var UserI18n = {
    add: {{json (T "admin_users_add")}},
    edit: {{json (T "admin_users_edit")}},
    pwdHint: {{json (T "admin_users_form_password_hint")}},
    username: {{json (T "admin_users_form_username")}},
    nickname: {{json (T "admin_users_form_nickname")}},
    email: {{json (T "admin_users_form_email")}},
    password: {{json (T "admin_users_form_password")}},
    group: {{json (T "admin_users_form_group")}},
    balance: {{json (T "admin_users_form_balance")}},
    pwdRequired: {{json (T "admin_users_pwd_required")}},
    deleteConfirm: {{json (T "admin_users_delete_confirm")}},
    licenseWarn: {{json (T "admin_users_delete_license_warn")}},
    licenseDesc: {{json (T "admin_users_delete_license_desc")}},
    deleteFinal: {{json (T "admin_users_delete_final")}},
    typeDelete: {{json (T "admin_users_delete_type_delete")}},
    deleteCancelled: {{json (T "admin_users_delete_cancelled")}},
    understandDelete: {{json (T "admin_users_understand_delete")}},
    confirmAgain: {{json (T "admin_users_confirm_again")}},
    noUsers: {{json (T "admin_users_no_users")}},
    registered: {{json (T "admin_users_registered")}},
    lastLogin: {{json (T "admin_users_last_login")}},
    loadFailed: {{json (T "admin_users_load_failed")}}
};
// 用户组选项HTML
var groupOptions = '';
{{range .Groups}}
groupOptions += '<option value="{{.gid}}">{{.group_name}}</option>';
{{end}}

// 获取用户表单HTML
function getUserFormHtml(isEdit) {
    var pwdHint = isEdit ? UserI18n.pwdHint : '';
    var pwdRequired = isEdit ? '' : 'required';
    return '<form id="userForm" class="p-4" style="font-size: 0.875rem;">' +
        '<input type="hidden" id="userId" name="userid" value="0">' +
        '<div class="row mb-3">' +
            '<div class="col-md-6">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + UserI18n.username + ' <span class="text-danger">*</span></label>' +
                '<input type="text" class="form-control form-control-sm" id="username" name="username" required>' +
            '</div>' +
            '<div class="col-md-6">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + UserI18n.nickname + ' <span class="text-danger">*</span></label>' +
                '<input type="text" class="form-control form-control-sm" id="nickname" name="nickname" required>' +
            '</div>' +
        '</div>' +
        '<div class="row mb-3">' +
            '<div class="col-md-6">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + UserI18n.email + ' <span class="text-danger">*</span></label>' +
                '<input type="email" class="form-control form-control-sm" id="email" name="email" required>' +
            '</div>' +
            '<div class="col-md-6">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + UserI18n.password + ' <span class="text-muted small">' + pwdHint + '</span></label>' +
                '<input type="password" class="form-control form-control-sm" id="password" name="password" ' + pwdRequired + '>' +
            '</div>' +
        '</div>' +
        '<div class="row mb-3">' +
            '<div class="col-md-6">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + UserI18n.group + '</label>' +
                '<select class="form-select form-select-sm" id="gid" name="gid">' + groupOptions + '</select>' +
            '</div>' +
            '<div class="col-md-6">' +
                '<label class="form-label" style="font-size: 0.875rem;">' + UserI18n.balance + '</label>' +
                '<input type="number" class="form-control form-control-sm" id="money" name="money" value="0" step="0.01">' +
            '</div>' +
        '</div>' +
    '</form>';
}

// 显示模态框（使用 BootstrapModal）
function showUserModal(title, formHtml, onSave) {
    const modalId = 'user-modal-' + Date.now();
    const modalHtml = `
        <div class="modal fade" id="${modalId}" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">${title}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        ${formHtml}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">${AdminI18n.cancel}</button>
                        <button type="button" class="btn btn-primary" id="${modalId}-save">${AdminI18n.save}</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    $('body').append(modalHtml);
    const modalElement = document.getElementById(modalId);
    const modal = new bootstrap.Modal(modalElement);
    
    $('#' + modalId + '-save').on('click', function() {
        if (onSave) {
            onSave(modal);
        }
    });
    
    $(modalElement).on('hidden.bs.modal', function() {
        $(this).remove();
    });
    
    modal.show();
    return modal;
}

// 添加用户
function showAddUser() {
    showUserModal('<i class="bx bx-user-plus"></i> ' + UserI18n.add, getUserFormHtml(false), function(modal) {
        saveUser(modal);
    });
}

// 编辑用户
function editUser(id) {
    var loadId = BootstrapModal.load();
    $.get('/admin/user-get?id=' + id, function(res) {
        BootstrapModal.close(loadId);
        if (res.success) {
            var user = res.data;
            const modalId = 'user-modal-' + Date.now();
            const modalHtml = `
                <div class="modal fade" id="${modalId}" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title"><i class="bx bx-edit"></i> ${UserI18n.edit}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                ${getUserFormHtml(true)}
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">${AdminI18n.cancel}</button>
                                <button type="button" class="btn btn-primary" id="${modalId}-save">${AdminI18n.save}</button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            $('body').append(modalHtml);
            const modalElement = document.getElementById(modalId);
            const modal = new bootstrap.Modal(modalElement);
            
            // 填充表单数据
            $('#userId').val(user.userid);
            $('#username').val(user.username);
            $('#nickname').val(user.nickname || '');
            $('#email').val(user.email);
            $('#gid').val(user.gid || 4);
            $('#money').val(user.money || 0);
            
            $('#' + modalId + '-save').on('click', function() {
                saveUser(modal);
            });
            
            $(modalElement).on('hidden.bs.modal', function() {
                $(this).remove();
            });
            
            modal.show();
        } else {
            BootstrapModal.msg(res.message, {icon: 2});
        }
    });
}

// 保存用户
function saveUser(modal) {
    var data = {
        userid: $('#userId').val(),
        username: $('#username').val(),
        nickname: $('#nickname').val(),
        email: $('#email').val(),
        password: $('#password').val(),
        gid: $('#gid').val(),
        money: $('#money').val()
    };

    if (!data.username || !data.email || !data.nickname) {
        BootstrapModal.msg(AdminI18n.fillRequired, {icon: 2});
        return;
    }

    if (data.userid == 0 && !data.password) {
        BootstrapModal.msg(UserI18n.pwdRequired, {icon: 2});
        return;
    }

    var loadId = BootstrapModal.load();
    $.post('/admin/user-save', data, function(res) {
        BootstrapModal.close(loadId);
        if (res.success) {
            modal.hide();
            BootstrapModal.msg(AdminI18n.saved, {icon: 1, time: 1000});
            // 延迟刷新，确保消息能显示
            setTimeout(function() {
                location.reload();
            }, 2000);
        } else {
            BootstrapModal.msg(res.message, {icon: 2});
        }
    });
}

// 删除用户
async function deleteUser(id, username) {
    const confirmed = await BootstrapModal.confirm(UserI18n.deleteConfirm + ' "<strong>' + username + '</strong>"?<br><span class="text-danger">' + AdminI18n.cannotUndo + '</span>', {
        title: AdminI18n.confirmDelete,
        btn: [AdminI18n.delete, AdminI18n.cancel]
    });
    if (confirmed) {
        checkAndDeleteUser(id, username);
    }
}

// 检查授权记录并删除用户
function checkAndDeleteUser(id, username) {
    var loadId = BootstrapModal.load();
    $.post('/admin/user-delete', {userid: id, check_only: 1}, function(res) {
        BootstrapModal.close(loadId);
        if (res.success) {
            // 没有授权记录，直接删除
            doDeleteUser(id);
        } else if (res.error_code === 1001) {
            // 存在授权记录，需要二次确认
            BootstrapModal.confirm('<div class="text-center">' +
                '<i class="bx bx-error-circle text-warning" style="font-size: 48px;"></i>' +
                '<h5 class="mt-3 text-danger">' + UserI18n.licenseWarn + '</h5>' +
                '<p>User "<strong>' + username + '</strong>" has <strong class="text-danger">' + res.data.license_count + '</strong> license record(s).</p>' +
                '<p class="text-muted">' + UserI18n.licenseDesc + ' ' + AdminI18n.cannotUndo + '</p>' +
                '</div>', {
                title: UserI18n.confirmAgain,
                btn: [UserI18n.understandDelete, AdminI18n.cancel]
            }).then(function(confirmed) {
                if (confirmed) {
                    // 再次确认
                    BootstrapModal.prompt({
                        title: UserI18n.deleteFinal,
                        placeholder: UserI18n.typeDelete
                    }).then(function(value) {
                        if (value && value.toUpperCase() === 'DELETE') {
                            doDeleteUser(id, true);
                        } else {
                            BootstrapModal.msg(UserI18n.deleteCancelled, {icon: 2});
                        }
                    });
                }
            });
        } else {
            BootstrapModal.msg(res.message, {icon: 2});
        }
    });
}

// 执行删除用户
function doDeleteUser(id, force) {
    var loadId = BootstrapModal.load();
    $.post('/admin/user-delete', {userid: id, force: force ? 1 : 0}, function(res) {
        BootstrapModal.close(loadId);
        if (res.success) {
            BootstrapModal.msg(AdminI18n.deleted, {icon: 1, callback: function() {
                location.reload();
            }});
        } else {
            BootstrapModal.msg(res.message, {icon: 2});
        }
    });
}

// 响应式搜索（防抖处理）
var searchTimer = null;
var currentPage = 1;

// 获取用户组映射（用于渲染）
var groupMap = {};
{{range .Groups}}
groupMap[{{.gid}}] = '{{.group_name}}';
{{end}}

// 获取用户组徽章HTML
function getGroupBadge(gid) {
    var groupName = groupMap[gid] || AdminI18n.unknown;
    var badgeClass = 'bg-secondary';
    if (gid == 1) badgeClass = 'bg-danger';
    else if (gid == 4) badgeClass = 'bg-secondary';
    else if (gid == 8) badgeClass = 'bg-success';
    else if (gid == 9) badgeClass = 'bg-primary';
    return '<span class="badge ' + badgeClass + '">' + groupName + '</span>';
}

// 操作列下拉菜单 HTML
function getUserActionDropdown(user) {
    var uid = user.userid;
    return '<td class="text-center">' +
        '<div class="dropdown table-action-dropdown">' +
        '<button class="btn btn-action-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">' +
        '<i class="bx bx-dots-vertical-rounded" style="font-size:1.15rem;"></i></button>' +
        '<ul class="dropdown-menu dropdown-menu-end">' +
        '<li><a class="dropdown-item" href="javascript:;" onclick="editUser(' + uid + ')"><i class="bx bx-edit"></i>' + UserI18n.edit + '</a></li>' +
        '<li><a class="dropdown-item text-danger user-action-delete" href="javascript:;" data-userid="' + uid + '" data-username="' + String(user.username || '').replace(/"/g, '&quot;') + '"><i class="bx bx-trash"></i>' + AdminI18n.delete + '</a></li>' +
        '</ul></div></td>';
}

function formatLoginIPCell(user) {
    var ip = (user && user.last_login_ip_str) ? user.last_login_ip_str : '-';
    if (!ip || ip === '-') {
        return '-';
    }
    var wrap = (window.NCPrivacy && NCPrivacy.wrapHTML) ? function (kind, v) { return NCPrivacy.wrapHTML(kind, v || ''); } : function (_k, v) { return String(v || ''); };
    var html = '<div>' + wrap('ip', ip) + '</div>';
    if (user.last_login_ip_geo) {
        html += '<div class="text-muted mt-1"><i class=\'bx bx-map\'></i> ' + user.last_login_ip_geo + '</div>';
    }
    return html;
}

// 渲染用户列表
function renderUserList(users) {
    var html = '';
    var wrap = (window.NCPrivacy && NCPrivacy.wrapHTML) ? function (kind, v) { return NCPrivacy.wrapHTML(kind, v || ''); } : function (_k, v) { return String(v || ''); };
    if (users && users.length > 0) {
        users.forEach(function(user) {
            var groupBadge = getGroupBadge(user.gid);
            var money = parseFloat(user.money || 0);
            
            html += '<tr data-id="' + user.userid + '">' +
                '<td>' + user.userid + '</td>' +
                '<td><div><strong>' + wrap('username', user.username) + '</strong></div>' +
                (user.nickname ? '<div class="text-muted small">' + wrap('text', user.nickname) + '</div>' : '') +
                '<div class="text-muted small">' + wrap('email', user.email) + '</div></td>' +
                '<td>' + groupBadge + '</td>' +
                '<td>' + money.toFixed(2) + '</td>' +
                '<td><div class="small"><div><i class=\'bx bx-calendar\'></i> ' + UserI18n.registered + ': ' + (user.reg_time_str || '-') + '</div><div class="text-muted mt-1"><i class=\'bx bx-time\'></i> ' + UserI18n.lastLogin + ': ' + (user.last_login_str || '-') + '</div></div></td>' +
                '<td class="small">' + formatLoginIPCell(user) + '</td>' +
                getUserActionDropdown(user) +
                '</tr>';
        });
    } else {
        html = '<tr><td colspan="7" class="text-center text-muted py-4">' + UserI18n.noUsers + '</td></tr>';
    }
    $('#userList').html(html);
    if (typeof window.initTableActionDropdowns === 'function') {
        window.initTableActionDropdowns(document.getElementById('userList'));
    }
}

// 渲染分页
function renderPagination(pagination) {
    if (!pagination || pagination.total_pages <= 1) {
        $('.pagination').html('');
        return;
    }
    
    var html = '';
    var current = pagination.current_page;
    var total = pagination.total_pages;
    
    // 首页和上一页
    if (current > 1) {
        html += '<li class="page-item"><a class="page-link" href="#" onclick="goToPage(1); return false;"><i class=\'bx bx-first-page\'></i> ' + AdminI18n.first + '</a></li>';
        html += '<li class="page-item"><a class="page-link" href="#" onclick="goToPage(' + (current - 1) + '); return false;"><i class=\'bx bx-chevron-left\'></i> ' + AdminI18n.prev + '</a></li>';
    }
    
    // 当前页信息
    html += '<li class="page-item"><span class="page-link">' + AdminI18n.page + ' ' + current + ' / ' + total + '</span></li>';
    
    // 下一页和末页
    if (current < total) {
        html += '<li class="page-item"><a class="page-link" href="#" onclick="goToPage(' + (current + 1) + '); return false;">' + AdminI18n.next + ' <i class=\'bx bx-chevron-right\'></i></a></li>';
        html += '<li class="page-item"><a class="page-link" href="#" onclick="goToPage(' + total + '); return false;">' + AdminI18n.last + ' <i class=\'bx bx-last-page\'></i></a></li>';
    }
    
    // 总记录数
    html += '<li class="page-item disabled"><span class="page-link">' + total + ' ' + AdminI18n.pagesUnit + '，' + pagination.total_count + ' ' + AdminI18n.recordsUnit + '</span></li>';
    
    $('.pagination').html(html);
}

// 加载用户列表（AJAX）
function loadUserList(page) {
    var keyword = $('#searchKeyword').val();
    var gid = $('#filterGroup').val();
    
    // 显示加载状态
    $('#userList').html('<tr><td colspan="7" class="text-center py-4"><i class="bx bx-loader-alt bx-spin"></i> ' + AdminI18n.loading + '</td></tr>');
    
    // 构建URL
    var url = '/admin/users?format=json&page=' + (page || 1);
    if (keyword) url += '&keyword=' + encodeURIComponent(keyword);
    if (gid) url += '&gid=' + gid;
    
    // 更新URL（不刷新页面）
    var newUrl = '/admin/users?page=' + (page || 1);
    if (keyword) newUrl += '&keyword=' + encodeURIComponent(keyword);
    if (gid) newUrl += '&gid=' + gid;
    window.history.pushState({}, '', newUrl);
    
    // AJAX请求
    $.getJSON(url, function(res) {
        if (res.success && res.data) {
            currentPage = page || 1;
            renderUserList(res.data.users);
            renderPagination(res.data.pagination);
            
            // 更新用户组下拉框的选中状态，确保高亮显示
            if (res.data.gid_filter) {
                $('#filterGroup').val(res.data.gid_filter);
            } else {
                $('#filterGroup').val('');
            }
        } else {
            $('#userList').html('<tr><td colspan="7" class="text-center text-danger py-4">' + UserI18n.loadFailed + ': ' + (res.message || AdminI18n.failed) + '</td></tr>');
        }
    }).fail(function() {
        $('#userList').html('<tr><td colspan="7" class="text-center text-danger py-4">' + AdminI18n.requestFailed + '</td></tr>');
    });
}

// 搜索用户（响应式）
function searchUsers() {
    if (searchTimer) {
        clearTimeout(searchTimer);
    }
    searchTimer = setTimeout(function() {
        loadUserList(1);
    }, 500); // 500ms 防抖延迟
}

// 跳转到指定页面
function goToPage(page) {
    loadUserList(page);
}

// 搜索框实时搜索
$('#searchKeyword').on('input', function() {
    searchUsers();
});

// 用户组筛选
$('#filterGroup').on('change', function() {
    searchUsers();
});

// 页面加载时，从URL参数中恢复搜索条件
$(document).on('click', '.user-action-delete', function(e) {
    e.preventDefault();
    deleteUser($(this).data('userid'), $(this).data('username'));
});

$(document).ready(function() {
    var urlParams = new URLSearchParams(window.location.search);
    var keyword = urlParams.get('keyword');
    var gid = urlParams.get('gid');
    var page = parseInt(urlParams.get('page')) || 1;
    
    if (keyword) {
        $('#searchKeyword').val(keyword);
    }
    if (gid) {
        $('#filterGroup').val(gid);
    }
    
    currentPage = page;
});
</script>
{{end}}