{% extends "base_admin.html" %}

{% block page_title %}用户管理{% endblock %}
{% block page_css %}<link rel="stylesheet" href="/static/css/users.css?v=20260403-19">{% endblock %}
{% block body_class %}users-page{% endblock %}
{% block header_title %}用户管理{% endblock %}
{% block header_subtitle %}统一管理白名单用户、IP 与模型访问权限{% endblock %}

{% block content %}
        <section class="add-user-section">
                <div class="add-user-card">
                    <div class="section-title-group add-user-heading">
                        <h2>添加用户</h2>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>用户名 *</label>
                            <input type="text" id="newUsername" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label>IP 地址 *</label>
                            <input type="text" id="newIpAddress" placeholder="仅支持 IPv4，例如 192.168.1.1">
                        </div>
                        <div class="form-group form-submit">
                            <button class="btn btn-primary" onclick="createUser()">添加</button>
                        </div>
                    </div>
                </div>
        </section>

        <section class="users-section">
                <div class="users-data-shell">
                    <div class="section-toolbar">
                        <div class="section-heading-inline">
                            <div class="section-title-group">
                                <h2>用户列表</h2>
                            </div>
                            <div class="section-toolbar-actions">
                                <div class="chat-whitelist-inline-control" id="chatWhitelistCard">
                                    <div class="chat-whitelist-inline-meta">
                                        <span class="chat-whitelist-inline-label">Chat 白名单</span>
                                    </div>
                                    <label class="switch" aria-label="切换 Chat 白名单">
                                        <input type="checkbox" id="chatWhitelistToggle" onchange="toggleChatWhitelist(this.checked)">
                                        <span class="slider"></span>
                                    </label>
                                    <button
                                            type="button"
                                            class="field-help-button users-help-button"
                                            id="chatWhitelistHelpBtn"
                                            data-users-help-topic="whitelist"
                                            onclick="toggleUsersHelp('whitelist', event)"
                                            aria-label="查看 Chat 白名单说明"
                                        >?</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="users-batch-toolbar">
                        <div class="users-batch-controls" id="usersBatchControls" hidden>
                            <div class="users-batch-summary">
                                已选 <strong id="selectedUsersSummary">0</strong> 个
                            </div>
                            <div class="users-batch-actions">
                                <button type="button" class="btn btn-toolbar-secondary" id="batchSetModelPermissionsBtn" onclick="openPermissionModalForBatch()" disabled>设置模型权限</button>
                            </div>
                        </div>
                        <div class="section-search users-table-search" role="search" aria-label="搜索用户">
                            <div class="section-search-field">
                                <input
                                    type="text"
                                    id="userSearchInput"
                                    class="form-control"
                                    placeholder="用户名 / IP"
                                    autocomplete="off"
                                    spellcheck="false"
                                >
                                <button
                                    type="button"
                                    class="search-clear-button"
                                    id="clearUserSearchBtn"
                                    onclick="clearUserSearch()"
                                    aria-label="清空搜索"
                                    title="清空搜索"
                                    hidden
                                >&times;</button>
                            </div>
                            <button type="button" class="btn btn-primary search-submit-button" onclick="applyUserSearch()">搜索</button>
                        </div>
                    </div>
                    <div class="users-table-shell" id="usersTableContainer">
                        <div class="loading">加载用户数据...</div>
                    </div>
                    <div class="table-footer" id="tableFooter" style="display: none;">
                        <div class="right-controls">
                            <div class="pagination-controls">
                                <span id="prevBtn" class="page-nav-text disabled" onclick="prevPage()">&lt;</span>
                                <span class="page-info" id="pageInfo">第 1 页 / 共 1 页</span>
                                <span id="nextBtn" class="page-nav-text disabled" onclick="nextPage()">&gt;</span>
                            </div>
                            <div class="quick-jump">
                                <label for="pageJumpInput">跳至</label>
                                <input id="pageJumpInput" type="number" min="1" value="1">
                            </div>
                            <div class="page-size-controls">
                                <label for="pageSizeSelect">每页显示:</label>
                                <select id="pageSizeSelect" onchange="changePageSize()">
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="200">200</option>
                                </select>
                            </div>
                            <span class="total-count" id="totalCount">共 0 条</span>
                        </div>
                    </div>
                </div>
        </section>
{% endblock %}

{% block after_container %}
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <h5 class="modal-title fw-semibold" id="editModalLabel">编辑用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="mb-3">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-control" id="editUsername">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">IP 地址</label>
                        <input type="text" class="form-control" id="editIpAddress">
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="permissionModal" tabindex="-1" aria-labelledby="permissionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg permission-modal-dialog">
            <div class="modal-content border-0 shadow permission-modal-content">
                <div class="modal-header border-bottom-0">
                    <div>
                        <h5 class="modal-title fw-semibold" id="permissionModalLabel">模型权限</h5>
                        <p class="modal-subtitle mb-0" id="permissionModalSubtitle">为用户设置可访问的模型。</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0 permission-modal-body" id="permissionModalBody"></div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="savePermissionBtn" onclick="savePermissionSettings()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="permissionDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <h5 class="modal-title fw-semibold" id="permissionDetailTitle">模型列表</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <input
                        type="text"
                        class="form-control permission-detail-search"
                        id="permissionDetailSearchInput"
                        placeholder="搜索模型"
                        autocomplete="off"
                        spellcheck="false"
                    >
                    <div class="permission-detail-summary" id="permissionDetailSummary">共 0 个模型</div>
                    <div class="permission-detail-list" id="permissionDetailList"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="users-help-popover" id="usersHelpPopover" data-placement="bottom" hidden>
        <div class="users-help-popover-header">
            <div class="users-help-popover-title" id="usersHelpPopoverTitle">说明</div>
            <button type="button" class="users-help-popover-close" onclick="hideUsersHelpPopover()" aria-label="关闭说明">×</button>
        </div>
        <div class="users-help-popover-body" id="usersHelpPopoverBody"></div>
    </div>

    <div class="inline-confirm-popover floating-delete-popover" id="userDeletePopover" data-placement="bottom" hidden>
        <div class="inline-confirm-text">确认删除？</div>
        <div class="inline-confirm-actions">
            <button type="button" class="btn-action btn-edit inline-confirm-action" onclick="cancelDeleteUserConfirm(event)">取消</button>
            <button type="button" class="btn-action btn-delete inline-confirm-action" id="confirmDeleteUserBtn" onclick="confirmDeleteUser(event)">确认</button>
        </div>
    </div>
{% endblock %}

{% block page_scripts %}
    <script src="/static/js/ui-message.js?v=20260319-1"></script>
    <script>
        const initialWhitelistControlEnabled = {{ 'true' if chat_whitelist_enabled else 'false' }};
        let whitelistControlEnabled = initialWhitelistControlEnabled;
        let chatWhitelistSaving = false;
        let users = [];
        let availableModels = [];
        let selectedUserIds = new Set();
        let editingUserId = null;
        let currentPage = 1;
        let pageSize = 50;
        let totalUsers = 0;
        let jumpDebounceTimer = null;
        let currentTotalPages = 1;
        let currentSearchKeyword = '';
        let activeCustomSelect = null;
        let editModalInstance = null;
        let permissionModalInstance = null;
        let permissionDetailModalInstance = null;
        let pendingDeleteUserId = null;
        let deletingUserId = null;
        let permissionTargetUserIds = [];
        let permissionModalMode = 'single';
        let permissionDraftMode = 'all';
        let permissionDraftSelectedModels = new Set();
        let permissionDraftMixedSource = false;
        let permissionSaving = false;
        let activePermissionDetailUser = null;
        let activeUsersHelpTrigger = null;
        let activeUsersHelpTopic = null;
        let usersSortState = {
            key: 'total_tokens',
            direction: 'desc',
            type: 'number'
        };
        const usersHelpTopics = {
            whitelist: {
                title: 'Chat 白名单',
                html: `
                    <p>启用后会按 IP 校验白名单，只允许已登记用户访问 Chat。</p>
                    <p>同时会继续按用户模型权限控制 Chat 请求和 <code>/v1/models</code> 返回结果。</p>
                `
            },
            permission_allow_all: {
                title: '允许全部模型',
                html: `
                    <p>启用后会用 <code>*</code> 表示当前用户可访问全部模型。</p>
                    <p>同时会自动继承当前和后续新增的模型，不需要逐个勾选。</p>
                `
            }
        };

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        function closeAllCustomSelects() {
            document.querySelectorAll('.custom-select.open').forEach(select => {
                select.classList.remove('open');
                const trigger = select.querySelector('.custom-select-trigger');
                if (trigger) trigger.setAttribute('aria-expanded', 'false');
            });
            activeCustomSelect = null;
        }

        function normalizeNumber(value) {
            const n = Number(value);
            return Number.isFinite(n) ? n : 0;
        }

        function formatNumberFull(value) {
            return normalizeNumber(value).toLocaleString();
        }

        function formatNumberDisplay(value) {
            return normalizeNumber(value).toLocaleString();
        }

        function renderNumber(value) {
            const full = formatNumberFull(value);
            const display = formatNumberDisplay(value);
            return `<span class="numeric-value" title="${full}">${display}</span>`;
        }

        function getAvailableModelCount() {
            return Array.isArray(availableModels) ? availableModels.length : 0;
        }

        function normalizeUserPermissionState(user) {
            if (!user || user.model_permissions === '*' || user.model_permissions_mode === 'all') {
                return { mode: 'all', models: [] };
            }
            const models = Array.isArray(user.model_permissions)
                ? user.model_permissions.filter(item => typeof item === 'string' && item.trim())
                : [];
            return { mode: 'selected', models: Array.from(new Set(models)) };
        }

        function getPermissionSignature(user) {
            const state = normalizeUserPermissionState(user);
            return state.mode === 'all'
                ? 'all:*'
                : `selected:${state.models.slice().sort().join('|')}`;
        }

        function getSortedSelectedPermissionModels() {
            const selection = permissionDraftSelectedModels;
            return availableModels.filter(modelName => selection.has(modelName));
        }

        function getPermissionPreview(models, limit = 2) {
            const items = Array.isArray(models) ? models : [];
            const visible = items.slice(0, limit);
            return {
                visible: visible,
                hiddenCount: Math.max(items.length - visible.length, 0),
                total: items.length
            };
        }

        function updateBatchToolbar() {
            const controls = document.getElementById('usersBatchControls');
            const summary = document.getElementById('selectedUsersSummary');
            const batchButton = document.getElementById('batchSetModelPermissionsBtn');
            if (!controls || !summary || !batchButton) return;

            const selectedCount = selectedUserIds.size;
            controls.hidden = !whitelistControlEnabled;
            summary.textContent = String(selectedCount);
            batchButton.disabled = selectedCount === 0;
        }

        function clearUserSelections(shouldRender = true) {
            selectedUserIds = new Set();
            if (shouldRender) {
                renderUsers();
            } else {
                updateBatchToolbar();
            }
        }

        function syncUserSelectionsToCurrentPage() {
            const currentUserIds = new Set(users.map(user => Number(user.id)));
            selectedUserIds = new Set(
                Array.from(selectedUserIds).filter(userId => currentUserIds.has(Number(userId)))
            );
        }

        function areAllCurrentUsersSelected() {
            if (!users.length) return false;
            return users.every(user => selectedUserIds.has(Number(user.id)));
        }

        function toggleSelectAllUsers(checked) {
            if (!whitelistControlEnabled) return;
            if (checked) {
                selectedUserIds = new Set(users.map(user => Number(user.id)));
            } else {
                selectedUserIds = new Set();
            }
            renderUsers();
        }

        function toggleUserSelection(userId, checked) {
            const normalizedUserId = Number(userId);
            if (!whitelistControlEnabled || !Number.isFinite(normalizedUserId)) return;

            const nextSelection = new Set(selectedUserIds);
            if (checked) {
                nextSelection.add(normalizedUserId);
            } else {
                nextSelection.delete(normalizedUserId);
            }
            selectedUserIds = nextSelection;
            updateBatchToolbar();
            const selectAllToggle = document.getElementById('selectAllUsersToggle');
            if (selectAllToggle) {
                selectAllToggle.checked = areAllCurrentUsersSelected();
            }
        }

        function updateChatWhitelistUi() {
            const card = document.getElementById('chatWhitelistCard');
            const toggle = document.getElementById('chatWhitelistToggle');
            if (!card || !toggle) return;

            card.dataset.enabled = whitelistControlEnabled ? 'true' : 'false';
            card.dataset.saving = chatWhitelistSaving ? 'true' : 'false';
            toggle.checked = !!whitelistControlEnabled;
            toggle.disabled = !!chatWhitelistSaving;
            toggle.title = chatWhitelistSaving
                ? '保存中...'
                : (whitelistControlEnabled ? 'Chat 白名单已启用' : 'Chat 白名单已禁用');
            updateBatchToolbar();
        }

        function getUsersHelpPopoverElement() {
            return document.getElementById('usersHelpPopover');
        }

        function hideUsersHelpPopover() {
            const popover = getUsersHelpPopoverElement();
            if (!popover) return;
            popover.hidden = true;
            popover.style.removeProperty('top');
            popover.style.removeProperty('left');
            popover.style.removeProperty('--popover-arrow-left');
            popover.dataset.placement = 'bottom';
            activeUsersHelpTrigger = null;
            activeUsersHelpTopic = null;
        }

        function syncUsersHelpPopover() {
            const popover = getUsersHelpPopoverElement();
            const titleElement = document.getElementById('usersHelpPopoverTitle');
            const bodyElement = document.getElementById('usersHelpPopoverBody');
            const topic = activeUsersHelpTopic ? usersHelpTopics[activeUsersHelpTopic] : null;
            if (!popover || !titleElement || !bodyElement || !activeUsersHelpTrigger || !topic) return;

            titleElement.textContent = topic.title;
            bodyElement.innerHTML = topic.html;

            popover.hidden = false;

            const triggerRect = activeUsersHelpTrigger.getBoundingClientRect();
            const popoverRect = popover.getBoundingClientRect();
            const offset = 12;
            const viewportPadding = 12;
            const canPlaceBottom = triggerRect.bottom + offset + popoverRect.height <= window.innerHeight - viewportPadding;
            const shouldPlaceBottom = canPlaceBottom || triggerRect.top < popoverRect.height + viewportPadding + offset;
            const top = shouldPlaceBottom
                ? Math.min(window.innerHeight - popoverRect.height - viewportPadding, triggerRect.bottom + offset)
                : Math.max(viewportPadding, triggerRect.top - popoverRect.height - offset);
            const left = Math.min(
                window.innerWidth - popoverRect.width - viewportPadding,
                Math.max(viewportPadding, triggerRect.left + ((triggerRect.width - popoverRect.width) / 2))
            );
            const arrowLeft = Math.min(
                popoverRect.width - 18,
                Math.max(18, (triggerRect.left + (triggerRect.width / 2)) - left)
            );

            popover.dataset.placement = shouldPlaceBottom ? 'bottom' : 'top';
            popover.style.top = `${top}px`;
            popover.style.left = `${left}px`;
            popover.style.setProperty('--popover-arrow-left', `${arrowLeft}px`);
        }

        function toggleUsersHelp(topic, event) {
            event?.preventDefault();
            event?.stopPropagation();

            const normalizedTopic = String(topic || '').trim();
            const trigger = event?.currentTarget || document.querySelector(`[data-users-help-topic="${normalizedTopic}"]`);
            if (!trigger || !usersHelpTopics[normalizedTopic]) return;

            if (activeUsersHelpTrigger === trigger && activeUsersHelpTopic === normalizedTopic) {
                hideUsersHelpPopover();
                return;
            }

            activeUsersHelpTrigger = trigger;
            activeUsersHelpTopic = normalizedTopic;
            syncUsersHelpPopover();
        }

        async function toggleChatWhitelist(enabled) {
            const previous = whitelistControlEnabled;
            whitelistControlEnabled = !!enabled;
            chatWhitelistSaving = true;
            updateChatWhitelistUi();
            if (!whitelistControlEnabled) {
                clearUserSelections(false);
                closePermissionModal();
            }
            renderUsers();

            try {
                const response = await fetch('/api/providers/chat-whitelist', {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ enabled: !!enabled })
                });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '更新 Chat 白名单失败');
                }
                whitelistControlEnabled = !!result.enabled;
                if (!whitelistControlEnabled) {
                    clearUserSelections(false);
                    closePermissionModal();
                }
                showMessage(`Chat 白名单已${whitelistControlEnabled ? '启用' : '禁用'}`, 'success');
            } catch (error) {
                console.error('更新 Chat 白名单失败:', error);
                whitelistControlEnabled = previous;
                showActionError('更新 Chat 白名单', error, { fallback: '更新 Chat 白名单失败' });
            } finally {
                chatWhitelistSaving = false;
                updateChatWhitelistUi();
                renderUsers();
            }
        }

        function syncCustomSelectValue(selectId) {
            const nativeSelect = document.getElementById(selectId);
            const customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!nativeSelect || !customSelect) return;

            const trigger = customSelect.querySelector('.custom-select-trigger');
            const selectedOption = nativeSelect.options[nativeSelect.selectedIndex] || nativeSelect.options[0];
            trigger.textContent = selectedOption ? selectedOption.textContent : '请选择';

            customSelect.querySelectorAll('.custom-select-option').forEach(option => {
                option.classList.toggle('selected', option.dataset.value === nativeSelect.value);
            });
        }

        function renderCustomSelectOptions(selectId) {
            const nativeSelect = document.getElementById(selectId);
            const customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!nativeSelect || !customSelect) return;

            const menu = customSelect.querySelector('.custom-select-menu');
            menu.innerHTML = '';

            Array.from(nativeSelect.options).forEach(option => {
                const optionButton = document.createElement('button');
                optionButton.type = 'button';
                optionButton.className = 'custom-select-option';
                optionButton.textContent = option.textContent;
                optionButton.dataset.value = option.value;
                optionButton.addEventListener('click', function() {
                    if (nativeSelect.value !== option.value) {
                        nativeSelect.value = option.value;
                        nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                    syncCustomSelectValue(selectId);
                    closeAllCustomSelects();
                });
                menu.appendChild(optionButton);
            });

            syncCustomSelectValue(selectId);
        }

        function setupCustomSelect(selectId) {
            const nativeSelect = document.getElementById(selectId);
            if (!nativeSelect) return;

            nativeSelect.classList.add('native-select-hidden');

            let customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!customSelect) {
                customSelect = document.createElement('div');
                customSelect.className = 'custom-select';
                customSelect.dataset.for = selectId;
                customSelect.innerHTML = `
                    <button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false"></button>
                    <div class="custom-select-menu" role="listbox"></div>
                `;
                nativeSelect.insertAdjacentElement('afterend', customSelect);

                const trigger = customSelect.querySelector('.custom-select-trigger');
                trigger.addEventListener('click', function(event) {
                    event.stopPropagation();
                    const isOpen = customSelect.classList.contains('open');
                    closeAllCustomSelects();
                    if (!isOpen) {
                        const rect = customSelect.getBoundingClientRect();
                        const spaceBelow = window.innerHeight - rect.bottom;
                        customSelect.classList.toggle('drop-up', spaceBelow < 236);
                        customSelect.classList.add('open');
                        trigger.setAttribute('aria-expanded', 'true');
                        activeCustomSelect = customSelect;
                    }
                });

                trigger.addEventListener('keydown', function(event) {
                    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
                        event.preventDefault();
                        trigger.click();
                    } else if (event.key === 'Escape') {
                        closeAllCustomSelects();
                    }
                });

                nativeSelect.addEventListener('change', function() {
                    syncCustomSelectValue(selectId);
                });
            }

            renderCustomSelectOptions(selectId);
        }

        document.addEventListener('DOMContentLoaded', function() {
            initThemeToggle();
            updateChatWhitelistUi();
            setupCustomSelect('pageSizeSelect');
            initUserSearch();
            loadUsers();
            document.getElementById('pageSizeSelect').value = pageSize;
            syncCustomSelectValue('pageSizeSelect');

            const editModalElement = document.getElementById('editModal');
            if (editModalElement && window.bootstrap) {
                editModalInstance = new bootstrap.Modal(editModalElement);
                editModalElement.addEventListener('hidden.bs.modal', function() {
                    editingUserId = null;
                });
            }

            const permissionModalElement = document.getElementById('permissionModal');
            if (permissionModalElement && window.bootstrap) {
                permissionModalInstance = new bootstrap.Modal(permissionModalElement);
                permissionModalElement.addEventListener('hidden.bs.modal', function() {
                    permissionTargetUserIds = [];
                    permissionModalMode = 'single';
                    permissionDraftMode = 'all';
                    permissionDraftSelectedModels = new Set();
                    permissionDraftMixedSource = false;
                    permissionSaving = false;
                    hideUsersHelpPopover();
                });
            }

            const permissionDetailModalElement = document.getElementById('permissionDetailModal');
            if (permissionDetailModalElement && window.bootstrap) {
                permissionDetailModalInstance = new bootstrap.Modal(permissionDetailModalElement);
                permissionDetailModalElement.addEventListener('hidden.bs.modal', function() {
                    activePermissionDetailUser = null;
                    const searchInput = document.getElementById('permissionDetailSearchInput');
                    if (searchInput) {
                        searchInput.value = '';
                    }
                    const listElement = document.getElementById('permissionDetailList');
                    if (listElement) {
                        listElement.innerHTML = '';
                    }
                });
            }

            const pageJumpInput = document.getElementById('pageJumpInput');
            pageJumpInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    jumpToPage(true);
                }
            });
            pageJumpInput.addEventListener('blur', function() {
                jumpToPage(true);
            });
            pageJumpInput.addEventListener('input', function() {
                clearTimeout(jumpDebounceTimer);
                jumpDebounceTimer = setTimeout(function() {
                    jumpToPage(false);
                }, 450);
            });

            const permissionDetailSearchInput = document.getElementById('permissionDetailSearchInput');
            if (permissionDetailSearchInput) {
                permissionDetailSearchInput.addEventListener('input', function() {
                    renderPermissionDetailList();
                });
            }
        });

        function initUserSearch() {
            const userSearchInput = document.getElementById('userSearchInput');
            if (!userSearchInput) return;

            userSearchInput.value = currentSearchKeyword;
            updateUserSearchUi(true);
            userSearchInput.addEventListener('input', function() {
                updateUserSearchUi();
            });
            userSearchInput.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    applyUserSearch();
                }
            });
        }

        function updateUserSearchUi(syncInput = false) {
            const userSearchInput = document.getElementById('userSearchInput');
            const clearButton = document.getElementById('clearUserSearchBtn');
            if (userSearchInput && syncInput) {
                userSearchInput.value = currentSearchKeyword;
            }
            const keywordDraft = userSearchInput ? userSearchInput.value.trim() : currentSearchKeyword;
            if (clearButton) {
                clearButton.hidden = !keywordDraft;
            }
        }

        function applyUserSearch() {
            const userSearchInput = document.getElementById('userSearchInput');
            const nextKeyword = userSearchInput ? userSearchInput.value.trim() : '';
            currentSearchKeyword = nextKeyword;
            currentPage = 1;
            updateUserSearchUi();
            loadUsers();
        }

        function clearUserSearch() {
            const userSearchInput = document.getElementById('userSearchInput');
            if (!currentSearchKeyword && !userSearchInput?.value.trim()) {
                return;
            }

            currentSearchKeyword = '';
            if (userSearchInput) {
                userSearchInput.value = '';
            }
            currentPage = 1;
            updateUserSearchUi();
            loadUsers();
            userSearchInput?.focus();
        }

        document.addEventListener('click', function(event) {
            if (!event.target.closest('.custom-select')) {
                closeAllCustomSelects();
            }
            if (!event.target.closest('.inline-confirm-wrap') && !event.target.closest('#userDeletePopover')) {
                closeDeleteUserConfirm();
            }
            if (!event.target.closest('[data-users-help-topic]') && !event.target.closest('#usersHelpPopover')) {
                hideUsersHelpPopover();
            }
        });

        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeAllCustomSelects();
                closeDeleteUserConfirm();
                hideUsersHelpPopover();
            }
        });

        window.addEventListener('resize', function() {
            closeDeleteUserConfirm(false);
            hideUsersHelpPopover();
        });

        window.addEventListener('scroll', function() {
            closeDeleteUserConfirm(false);
            hideUsersHelpPopover();
        }, true);

        function getUserDeletePopoverElement() {
            return document.getElementById('userDeletePopover');
        }

        function getUserDeleteTrigger(userId) {
            return document.querySelector(`[data-user-delete-trigger="${userId}"]`);
        }

        function hideUserDeletePopover() {
            const popover = getUserDeletePopoverElement();
            if (!popover) return;
            popover.hidden = true;
            popover.style.removeProperty('top');
            popover.style.removeProperty('left');
            popover.style.removeProperty('--popover-arrow-left');
            popover.dataset.placement = 'bottom';
        }

        function syncDeleteUserPopover() {
            const popover = getUserDeletePopoverElement();
            if (!popover) return;

            if (pendingDeleteUserId === null) {
                hideUserDeletePopover();
                return;
            }

            const trigger = getUserDeleteTrigger(pendingDeleteUserId);
            if (!trigger) {
                pendingDeleteUserId = null;
                deletingUserId = null;
                hideUserDeletePopover();
                return;
            }

            popover.hidden = false;
            const confirmButton = document.getElementById('confirmDeleteUserBtn');
            if (confirmButton) {
                confirmButton.disabled = deletingUserId === pendingDeleteUserId;
                confirmButton.textContent = deletingUserId === pendingDeleteUserId ? '删除中...' : '确认';
            }

            const triggerRect = trigger.getBoundingClientRect();
            const popoverRect = popover.getBoundingClientRect();
            const viewportPadding = 12;
            const offset = 10;
            const canPlaceBottom = triggerRect.bottom + offset + popoverRect.height <= window.innerHeight - viewportPadding;
            const shouldPlaceBottom = canPlaceBottom || triggerRect.top < popoverRect.height + viewportPadding + offset;
            const top = shouldPlaceBottom
                ? Math.min(window.innerHeight - popoverRect.height - viewportPadding, triggerRect.bottom + offset)
                : Math.max(viewportPadding, triggerRect.top - popoverRect.height - offset);
            const left = Math.min(
                window.innerWidth - popoverRect.width - viewportPadding,
                Math.max(viewportPadding, triggerRect.left + ((triggerRect.width - popoverRect.width) / 2))
            );
            const arrowLeft = Math.min(
                popoverRect.width - 18,
                Math.max(18, triggerRect.left + (triggerRect.width / 2) - left)
            );

            popover.dataset.placement = shouldPlaceBottom ? 'bottom' : 'top';
            popover.style.top = `${top}px`;
            popover.style.left = `${left}px`;
            popover.style.setProperty('--popover-arrow-left', `${arrowLeft}px`);
        }

        async function loadUsers() {
            try {
                pendingDeleteUserId = null;
                deletingUserId = null;
                hideUserDeletePopover();

                const params = new URLSearchParams({
                    page: currentPage,
                    page_size: pageSize
                });
                if (currentSearchKeyword) {
                    params.set('keyword', currentSearchKeyword);
                }
                const response = await fetch(`/api/users?${params}`);
                const data = await response.json();

                if (Array.isArray(data)) {
                    users = data;
                    totalUsers = data.length;
                } else {
                    users = data.users || [];
                    totalUsers = data.total || users.length;
                    availableModels = Array.isArray(data.available_models) ? data.available_models : [];
                }

                syncUserSelectionsToCurrentPage();
                applyUsersSort();
                updateUserSearchUi();
                renderUsers();
                updatePagination();
            } catch (error) {
                console.error('加载用户失败:', error);
                document.getElementById('usersTableContainer').innerHTML =
                    '<div class="error">加载用户数据失败</div>';
                document.getElementById('tableFooter').style.display = 'none';
                updateBatchToolbar();
            }
        }

        function normalizeSortNumber(value) {
            const n = Number(value);
            return Number.isFinite(n) ? n : 0;
        }

        function parseLocalDateTime(value) {
            if (value instanceof Date) {
                return Number.isFinite(value.getTime()) ? value : null;
            }
            if (value === null || value === undefined) {
                return null;
            }

            const text = String(value).trim();
            if (!text) {
                return null;
            }

            const match = text.match(
                /^(\d{4})-(\d{2})-(\d{2})[\sT](\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,6}))?$/
            );
            if (!match) {
                return null;
            }

            const microseconds = (match[7] || '').padEnd(6, '0').slice(0, 6);
            const milliseconds = Math.floor(Number(microseconds) / 1000);
            const date = new Date(
                Number(match[1]),
                Number(match[2]) - 1,
                Number(match[3]),
                Number(match[4]),
                Number(match[5]),
                Number(match[6]),
                milliseconds
            );
            return Number.isFinite(date.getTime()) ? date : null;
        }

        function normalizeSortDate(value) {
            const date = parseLocalDateTime(value);
            const t = date ? date.getTime() : Number.NaN;
            return Number.isFinite(t) ? t : 0;
        }

        function compareSortValues(leftValue, rightValue, type) {
            if (type === 'number' || type === 'date') {
                return leftValue - rightValue;
            }
            return String(leftValue).localeCompare(String(rightValue), 'zh-CN', {
                sensitivity: 'base',
                numeric: true
            });
        }

        function getUserSortValue(user, key, type) {
            const value = user?.[key];
            if (type === 'number') return normalizeSortNumber(value);
            if (type === 'date') return normalizeSortDate(value);
            return value ?? '';
        }

        function getSortIndicator(activeKey, activeDirection, key) {
            if (activeKey !== key) return '';
            return activeDirection === 'asc' ? '&uarr;' : '&darr;';
        }

        function getAriaSort(activeKey, activeDirection, key) {
            if (activeKey !== key) return 'none';
            return activeDirection === 'asc' ? 'ascending' : 'descending';
        }

        function applyUsersSort() {
            const { key, direction, type } = usersSortState;
            users = users
                .map((user, index) => ({ user, index }))
                .sort((left, right) => {
                    const leftValue = getUserSortValue(left.user, key, type);
                    const rightValue = getUserSortValue(right.user, key, type);
                    const result = compareSortValues(leftValue, rightValue, type);
                    if (result !== 0) {
                        return direction === 'asc' ? result : -result;
                    }
                    return left.index - right.index;
                })
                .map(item => item.user);
        }

        function toggleUsersSort(key, type) {
            if (usersSortState.key === key) {
                usersSortState.direction = usersSortState.direction === 'asc' ? 'desc' : 'asc';
            } else {
                usersSortState.key = key;
                usersSortState.type = type;
                usersSortState.direction = type === 'string' ? 'asc' : 'desc';
            }
            applyUsersSort();
            renderUsers();
        }

        function renderModelPermissionSummary(user) {
            const permissionState = normalizeUserPermissionState(user);
            if (permissionState.mode === 'all') {
                return `
                    <div class="model-permission-summary">
                        <span class="permission-chip permission-chip-all" title="全部模型">*</span>
                    </div>
                `;
            }

            if (!permissionState.models.length) {
                return `
                    <div class="model-permission-summary">
                        <span class="permission-chip permission-chip-empty" title="当前未授权任何模型">未授权模型</span>
                    </div>
                `;
            }

            const preview = getPermissionPreview(permissionState.models, 2);
            const chips = preview.visible
                .map(modelName => `<span class="permission-chip" title="${escapeHtml(modelName)}">${escapeHtml(modelName)}</span>`)
                .join('');
            const encodedUserId = Number(user.id);
            const summaryBar = preview.hiddenCount > 0
                ? `
                    <div class="permission-summary-bar">
                        <button class="permission-more" type="button" onclick="openPermissionDetail(${encodedUserId})">+${preview.hiddenCount}</button>
                        <button class="btn-inline" type="button" onclick="openPermissionDetail(${encodedUserId})">查看全部</button>
                    </div>
                `
                : '';
            return `<div class="model-permission-summary">${chips}${summaryBar}</div>`;
        }

        function renderPermissionDetailList() {
            const listElement = document.getElementById('permissionDetailList');
            const summaryElement = document.getElementById('permissionDetailSummary');
            const searchInput = document.getElementById('permissionDetailSearchInput');
            if (!listElement || !summaryElement) return;

            const permissionState = normalizeUserPermissionState(activePermissionDetailUser);
            const allModels = permissionState.mode === 'all'
                ? availableModels.slice()
                : permissionState.models.slice();
            const query = (searchInput?.value || '').trim().toLowerCase();
            const filteredModels = query
                ? allModels.filter(modelName => String(modelName).toLowerCase().includes(query))
                : allModels;

            summaryElement.textContent = query
                ? `共 ${allModels.length} 个模型，筛选后 ${filteredModels.length} 个`
                : `共 ${allModels.length} 个模型`;

            if (!filteredModels.length) {
                listElement.innerHTML = '<div class="permission-list-empty">没有匹配的模型</div>';
                return;
            }

            listElement.innerHTML = filteredModels
                .map(modelName => `<span class="permission-chip permission-chip-detail" title="${escapeHtml(modelName)}">${escapeHtml(modelName)}</span>`)
                .join('');
        }

        function openPermissionDetail(userId) {
            const user = users.find(item => Number(item.id) === Number(userId));
            if (!user || !permissionDetailModalInstance) return;

            activePermissionDetailUser = user;
            const identity = [user.username, user.ip_address].filter(Boolean).join(' · ');
            document.getElementById('permissionDetailTitle').textContent = `${identity} - 模型列表`;
            document.getElementById('permissionDetailSearchInput').value = '';
            renderPermissionDetailList();
            permissionDetailModalInstance.show();
        }

        function renderUsers() {
            const container = document.getElementById('usersTableContainer');
            const showPermissionControls = whitelistControlEnabled;

            if (users.length === 0) {
                container.innerHTML = `<div class="empty-state">${currentSearchKeyword ? '未找到匹配的用户' : '暂无用户数据'}</div>`;
                document.getElementById('tableFooter').style.display = 'none';
                updateBatchToolbar();
                return;
            }

            let html = `
                <table class="users-table">
                    <thead>
                        <tr>
                            ${showPermissionControls ? `
                            <th class="select-col">
                                <input
                                    type="checkbox"
                                    class="user-table-checkbox"
                                    id="selectAllUsersToggle"
                                    ${areAllCurrentUsersSelected() ? 'checked' : ''}
                                    onchange="toggleSelectAllUsers(this.checked)"
                                    aria-label="选择当前页全部用户"
                                >
                            </th>` : ''}
                            <th class="sortable-th" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'username')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('username', 'string')">
                                    用户名 <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'username')}</span>
                                </button>
                            </th>
                            <th class="sortable-th" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'ip_address')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('ip_address', 'string')">
                                    IP 地址 <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'ip_address')}</span>
                                </button>
                            </th>
                            ${showPermissionControls ? `
                            <th class="sortable-th permission-col" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'allowed_models_count')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('allowed_models_count', 'number')">
                                    模型权限 <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'allowed_models_count')}</span>
                                </button>
                            </th>` : ''}
                            <th class="sortable-th num-col" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'prompt_tokens')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('prompt_tokens', 'number')">
                                    输入token <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'prompt_tokens')}</span>
                                </button>
                            </th>
                            <th class="sortable-th num-col" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'completion_tokens')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('completion_tokens', 'number')">
                                    输出token <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'completion_tokens')}</span>
                                </button>
                            </th>
                            <th class="sortable-th num-col" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'total_tokens')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('total_tokens', 'number')">
                                    总 Token <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'total_tokens')}</span>
                                </button>
                            </th>
                            <th class="sortable-th num-col" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'total_request_count')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('total_request_count', 'number')">
                                    总请求数 <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'total_request_count')}</span>
                                </button>
                            </th>
                            ${showPermissionControls ? `
                            <th class="sortable-th" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'whitelist_access_enabled')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('whitelist_access_enabled', 'number')">
                                    白名单访问 <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'whitelist_access_enabled')}</span>
                                </button>
                            </th>` : ''}
                            <th class="sortable-th" aria-sort="${getAriaSort(usersSortState.key, usersSortState.direction, 'created_at')}">
                                <button type="button" class="sort-button" onclick="toggleUsersSort('created_at', 'date')">
                                    创建时间 <span class="sort-indicator">${getSortIndicator(usersSortState.key, usersSortState.direction, 'created_at')}</span>
                                </button>
                            </th>
                            <th class="actions-col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            users.forEach(user => {
                const whitelistEnabled = !!user.whitelist_access_enabled;
                const isDeletePending = pendingDeleteUserId === user.id;
                const isSelected = selectedUserIds.has(Number(user.id));

                html += `
                    <tr>
                        ${showPermissionControls ? `
                        <td class="select-col">
                            <input
                                type="checkbox"
                                class="user-table-checkbox"
                                ${isSelected ? 'checked' : ''}
                                onchange="toggleUserSelection(${Number(user.id)}, this.checked)"
                                aria-label="选择用户 ${escapeHtml(user.username)}"
                            >
                        </td>` : ''}
                        <td>${escapeHtml(user.username)}</td>
                        <td><span class="ip-address">${escapeHtml(user.ip_address)}</span></td>
                        ${showPermissionControls ? `<td class="permission-col">${renderModelPermissionSummary(user)}</td>` : ''}
                        <td class="num-col">${renderNumber(user.prompt_tokens || 0)}</td>
                        <td class="num-col">${renderNumber(user.completion_tokens || 0)}</td>
                        <td class="num-col">${renderNumber(user.total_tokens || 0)}</td>
                        <td class="num-col">${renderNumber(user.total_request_count || 0)}</td>
                        ${showPermissionControls ? `
                        <td>
                            <label class="switch">
                                <input type="checkbox" ${whitelistEnabled ? 'checked' : ''} onchange="toggleUser(${Number(user.id)})">
                                <span class="slider"></span>
                            </label>
                        </td>` : ''}
                        <td>${formatDateTime(user.created_at)}</td>
                        <td class="actions-col">
                            <div class="action-buttons">
                                <button class="btn-action btn-edit" onclick="openEditModal(${Number(user.id)})">编辑</button>
                                ${showPermissionControls ? `<button class="btn-action btn-model" onclick="openPermissionModalForUser(${Number(user.id)})">模型权限</button>` : ''}
                                <div class="inline-confirm-wrap">
                                    <button
                                        type="button"
                                        class="btn-action btn-delete ${isDeletePending ? 'is-active' : ''}"
                                        data-user-delete-trigger="${Number(user.id)}"
                                        onclick="toggleDeleteUserConfirm(${Number(user.id)}, event)"
                                    >删除</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                `;
            });

            html += '</tbody></table>';
            container.innerHTML = html;
            syncDeleteUserPopover();
            updateBatchToolbar();
        }

        function updatePagination() {
            const totalPages = Math.ceil(totalUsers / pageSize) || 1;
            currentTotalPages = totalPages;
            document.getElementById('pageInfo').textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
            document.getElementById('prevBtn').classList.toggle('disabled', currentPage <= 1);
            document.getElementById('nextBtn').classList.toggle('disabled', currentPage >= totalPages);
            document.getElementById('totalCount').textContent = `共 ${totalUsers} 条`;
            document.getElementById('pageSizeSelect').value = pageSize;
            syncCustomSelectValue('pageSizeSelect');
            const pageJumpInput = document.getElementById('pageJumpInput');
            pageJumpInput.max = totalPages;
            pageJumpInput.value = currentPage;
            document.getElementById('tableFooter').style.display = 'flex';
        }

        function jumpToPage(force = false) {
            const totalPages = Math.ceil(totalUsers / pageSize) || 1;
            const input = document.getElementById('pageJumpInput');
            const page = parseInt(input.value, 10);
            if (Number.isNaN(page)) {
                if (force) input.value = currentPage;
                return;
            }
            const target = Math.min(totalPages, Math.max(1, page));
            if (target === currentPage) {
                input.value = currentPage;
                return;
            }
            currentPage = target;
            loadUsers();
        }

        function prevPage() {
            if (currentPage <= 1) return;
            currentPage--;
            loadUsers();
        }

        function nextPage() {
            if (currentPage >= currentTotalPages) return;
            currentPage++;
            loadUsers();
        }

        function changePageSize() {
            const newPageSize = parseInt(document.getElementById('pageSizeSelect').value, 10);
            if (newPageSize !== pageSize) {
                pageSize = newPageSize;
                currentPage = 1;
                loadUsers();
            }
        }

        async function createUser() {
            const username = document.getElementById('newUsername').value.trim();
            const ipAddress = document.getElementById('newIpAddress').value.trim();

            if (!username) {
                showMessage('请输入用户名', 'error');
                return;
            }

            if (!ipAddress) {
                showMessage('请输入IP地址', 'error');
                return;
            }

            try {
                const response = await fetch('/api/users', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        username: username,
                        ip_address: ipAddress
                    })
                });

                const result = await response.json();

                if (response.ok) {
                    showMessage('用户创建成功', 'success');
                    document.getElementById('newUsername').value = '';
                    document.getElementById('newIpAddress').value = '';
                    loadUsers();
                } else {
                    showActionError('创建用户', result.error, { fallback: '创建用户失败' });
                }
            } catch (error) {
                console.error('创建用户失败:', error);
                showMessage('创建用户失败', 'error');
            }
        }

        function openEditModal(userId) {
            const user = users.find(item => Number(item.id) === Number(userId));
            if (!user) return;

            editingUserId = Number(userId);
            document.getElementById('editUsername').value = user.username;
            document.getElementById('editIpAddress').value = user.ip_address;

            if (editModalInstance) {
                editModalInstance.show();
            }
        }

        function closeEditModal() {
            if (editModalInstance) {
                editModalInstance.hide();
            }
            editingUserId = null;
        }

        async function saveUser() {
            if (!editingUserId) return;

            const username = document.getElementById('editUsername').value.trim();
            const ipAddress = document.getElementById('editIpAddress').value.trim();

            if (!username) {
                showMessage('请输入用户名', 'error');
                return;
            }

            if (!ipAddress) {
                showMessage('请输入IP地址', 'error');
                return;
            }

            try {
                const response = await fetch(`/api/users/${editingUserId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        username: username,
                        ip_address: ipAddress
                    })
                });

                const result = await response.json();

                if (response.ok) {
                    showMessage('用户更新成功', 'success');
                    closeEditModal();
                    loadUsers();
                } else {
                    showActionError('更新用户', result.error, { fallback: '更新用户失败' });
                }
            } catch (error) {
                console.error('更新用户失败:', error);
                showMessage('更新用户失败', 'error');
            }
        }

        async function toggleUser(userId) {
            try {
                const response = await fetch(`/api/users/${userId}/toggle`, {
                    method: 'POST'
                });

                const result = await response.json();

                if (response.ok) {
                    loadUsers();
                } else {
                    console.error('切换白名单访问状态失败:', result.error || '切换失败');
                    loadUsers();
                }
            } catch (error) {
                console.error('切换白名单访问状态失败:', error);
            }
        }

        function renderPermissionModalBody() {
            const body = document.getElementById('permissionModalBody');
            if (!body) return;

            const selectedCount = permissionDraftMode === 'all'
                ? getAvailableModelCount()
                : permissionDraftSelectedModels.size;
            const bodyHtml = `
                <div class="permission-mode-card" id="permissionModeCard">
                    <div class="permission-mode-copy">
                        <div class="permission-mode-heading">
                            <span class="permission-mode-label permission-mode-label-row">
                                <span>允许全部模型</span>
                                <button
                                    type="button"
                                    class="field-help-button"
                                    data-users-help-topic="permission_allow_all"
                                    onclick="toggleUsersHelp('permission_allow_all', event)"
                                    aria-label="查看允许全部模型说明"
                                >?</button>
                            </span>
                        </div>
                        <p class="permission-mode-description">
                            ${permissionDraftMode === 'all'
                                ? '开启后自动继承当前与后续新增模型，无需单独维护。'
                                : '关闭后，仅允许访问下方勾选的模型，可通过搜索与快捷操作快速调整。'}
                        </p>
                    </div>
                    <label class="switch permission-mode-switch" aria-label="切换全部模型权限">
                        <input type="checkbox" id="permissionAllowAllToggle" ${permissionDraftMode === 'all' ? 'checked' : ''} ${permissionSaving ? 'disabled' : ''} onchange="togglePermissionMode(this.checked)">
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="permission-picker" id="permissionPicker" ${permissionDraftMode === 'all' ? 'hidden data-disabled="true"' : ''}>
                    <div class="permission-picker-header">
                        <div class="permission-picker-title-group">
                            <span class="permission-picker-title">选择可访问模型</span>
                            <span class="permission-picker-note" id="permissionModelCatalogMeta">模型变化后，刷新时会自动清理已删除项。</span>
                        </div>
                        <div class="permission-picker-stats" aria-live="polite">
                            <span class="permission-picker-stats-label">已选</span>
                            <strong id="permissionSelectedCount">${selectedCount}</strong>
                            <span class="permission-picker-stats-total">/ ${getAvailableModelCount()}</span>
                        </div>
                    </div>
                    <div class="permission-picker-toolbar">
                        <div class="permission-picker-search">
                            <input
                                type="text"
                                class="form-control"
                                id="permissionModelSearchInput"
                                placeholder="搜索模型，例如 demo/gpt-4.1"
                                autocomplete="off"
                                spellcheck="false"
                            >
                        </div>
                        <div class="permission-picker-actions">
                            <button type="button" class="btn btn-toolbar-secondary" id="selectPermissionModelsBtn" onclick="selectVisiblePermissionModels(true)">全部选中</button>
                            <button type="button" class="btn btn-toolbar-secondary" id="clearPermissionModelsBtn" onclick="selectVisiblePermissionModels(false)">全部取消</button>
                        </div>
                    </div>
                    <div class="permission-model-list" id="permissionModelList"></div>
                </div>
                <div class="permission-empty-state" id="permissionEmptyState" ${getAvailableModelCount() > 0 ? 'hidden' : ''}>当前还没有可配置模型，请先到 Provider 管理里配置模型列表。</div>
            `;
            body.innerHTML = bodyHtml;
            const searchInput = document.getElementById('permissionModelSearchInput');
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    renderPermissionModelOptions();
                });
            }
            updatePermissionPickerActionLabels();
            renderPermissionModelOptions();
        }

        function closePermissionModal() {
            if (permissionModalInstance) {
                permissionModalInstance.hide();
            }
        }

        function openPermissionModalForUser(userId) {
            if (!whitelistControlEnabled) {
                showMessage('请先启用 Chat 白名单，再设置模型权限', 'error');
                return;
            }

            const user = users.find(item => Number(item.id) === Number(userId));
            if (!user) return;

            permissionModalMode = 'single';
            permissionTargetUserIds = [Number(userId)];
            permissionDraftMixedSource = false;
            const currentState = normalizeUserPermissionState(user);
            permissionDraftMode = currentState.mode;
            permissionDraftSelectedModels = new Set(currentState.models);
            updatePermissionModalUi();
            if (permissionModalInstance) {
                permissionModalInstance.show();
            }
        }

        function openPermissionModalForBatch() {
            if (!whitelistControlEnabled) {
                showMessage('请先启用 Chat 白名单，再设置模型权限', 'error');
                return;
            }

            const selectedIds = Array.from(selectedUserIds);
            if (!selectedIds.length) {
                showMessage('请先选择需要批量设置的用户', 'error');
                return;
            }

            const selectedUsers = users.filter(user => selectedUserIds.has(Number(user.id)));
            const signatures = selectedUsers.map(getPermissionSignature);
            const allSame = signatures.length > 0 && signatures.every(signature => signature === signatures[0]);
            const seedState = allSame
                ? normalizeUserPermissionState(selectedUsers[0])
                : { mode: 'all', models: [] };

            permissionModalMode = 'batch';
            permissionTargetUserIds = selectedIds;
            permissionDraftMixedSource = !allSame;
            permissionDraftMode = seedState.mode;
            permissionDraftSelectedModels = new Set(seedState.models);
            updatePermissionModalUi();
            if (permissionModalInstance) {
                permissionModalInstance.show();
            }
        }

        function togglePermissionMode(allowAll) {
            permissionDraftMode = allowAll ? 'all' : 'selected';
            updatePermissionModalUi();
        }

        function getFilteredPermissionModels() {
            const searchInput = document.getElementById('permissionModelSearchInput');
            const keyword = searchInput ? searchInput.value.trim().toLowerCase() : '';
            if (!keyword) return availableModels.slice();
            return availableModels.filter(modelName => modelName.toLowerCase().includes(keyword));
        }

        function renderPermissionModelOptions() {
            const listElement = document.getElementById('permissionModelList');
            const selectedCountLabel = document.getElementById('permissionSelectedCount');
            if (!listElement) return;

            const visibleModels = getFilteredPermissionModels();
            const selectedCount = permissionDraftMode === 'all'
                ? getAvailableModelCount()
                : permissionDraftSelectedModels.size;
            if (selectedCountLabel) {
                selectedCountLabel.textContent = String(selectedCount);
            }
            updatePermissionPickerActionLabels();

            if (!visibleModels.length) {
                listElement.innerHTML = '<div class="permission-list-empty">没有匹配的模型</div>';
                return;
            }

            listElement.innerHTML = visibleModels.map(modelName => {
                const isSelected = permissionDraftSelectedModels.has(modelName);
                const optionClassName = [
                    'permission-model-option',
                    isSelected ? 'is-selected' : '',
                    permissionDraftMode === 'all' ? 'is-disabled' : ''
                ].filter(Boolean).join(' ');
                return `
                <label class="${optionClassName}">
                    <input
                        type="checkbox"
                        class="permission-model-checkbox"
                        value="${escapeHtml(modelName)}"
                        ${isSelected ? 'checked' : ''}
                        ${permissionDraftMode === 'all' ? 'disabled' : ''}
                        onchange='togglePermissionModelSelection(${JSON.stringify(modelName)}, this.checked)'
                    >
                    <span class="permission-model-text">${escapeHtml(modelName)}</span>
                </label>
            `;
            }).join('');
        }

        function updatePermissionPickerActionLabels() {
            const searchInput = document.getElementById('permissionModelSearchInput');
            const selectButton = document.getElementById('selectPermissionModelsBtn');
            const clearButton = document.getElementById('clearPermissionModelsBtn');
            if (!selectButton || !clearButton) return;

            const hasKeyword = Boolean(searchInput && searchInput.value.trim());
            selectButton.textContent = hasKeyword ? '选中搜索结果' : '全部选中';
            clearButton.textContent = hasKeyword ? '取消结果选中' : '全部取消';
        }

        function updatePermissionModalUi() {
            const title = document.getElementById('permissionModalLabel');
            const subtitle = document.getElementById('permissionModalSubtitle');
            const saveButton = document.getElementById('savePermissionBtn');

            if (title) {
                title.textContent = permissionModalMode === 'batch' ? '批量设置模型权限' : '模型权限';
            }
            if (subtitle) {
                if (permissionModalMode === 'batch') {
                    subtitle.textContent = permissionDraftMixedSource
                        ? `已选择 ${permissionTargetUserIds.length} 个用户，当前权限不一致，保存后将统一覆盖。`
                        : `已选择 ${permissionTargetUserIds.length} 个用户，将统一应用下方权限。`;
                } else {
                    subtitle.textContent = '设置该用户可访问的模型。';
                }
            }
            if (saveButton) {
                saveButton.disabled = permissionSaving;
                saveButton.textContent = permissionSaving ? '保存中...' : '保存';
            }

            renderPermissionModalBody();
        }

        function togglePermissionModelSelection(modelName, checked) {
            const normalizedModelName = String(modelName || '').trim();
            if (!normalizedModelName) return;

            if (checked) {
                permissionDraftSelectedModels.add(normalizedModelName);
            } else {
                permissionDraftSelectedModels.delete(normalizedModelName);
            }
            renderPermissionModelOptions();
        }

        function selectVisiblePermissionModels(checked) {
            if (permissionDraftMode === 'all') {
                return;
            }

            const visibleModels = getFilteredPermissionModels();
            visibleModels.forEach(modelName => {
                if (checked) {
                    permissionDraftSelectedModels.add(modelName);
                } else {
                    permissionDraftSelectedModels.delete(modelName);
                }
            });
            renderPermissionModelOptions();
        }

        async function savePermissionSettings() {
            if (!permissionTargetUserIds.length || permissionSaving) return;

            const payload = permissionDraftMode === 'all'
                ? '*'
                : getSortedSelectedPermissionModels();

            permissionSaving = true;
            updatePermissionModalUi();

            try {
                let response;
                if (permissionModalMode === 'batch') {
                    response = await fetch('/api/users/batch', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            action: 'set_model_permissions',
                            user_ids: permissionTargetUserIds,
                            model_permissions: payload
                        })
                    });
                } else {
                    response = await fetch(`/api/users/${permissionTargetUserIds[0]}`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            model_permissions: payload
                        })
                    });
                }

                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '保存模型权限失败');
                }

                showMessage(
                    permissionModalMode === 'batch'
                        ? `已批量更新 ${permissionTargetUserIds.length} 个用户的模型权限`
                        : '模型权限更新成功',
                    'success'
                );
                if (permissionModalMode === 'batch') {
                    clearUserSelections(false);
                }
                closePermissionModal();
                await loadUsers();
            } catch (error) {
                console.error('保存模型权限失败:', error);
                showActionError(
                    permissionModalMode === 'batch' ? '批量设置模型权限' : '更新模型权限',
                    error,
                    { fallback: permissionModalMode === 'batch' ? '批量设置模型权限失败' : '更新模型权限失败' }
                );
            } finally {
                permissionSaving = false;
                updatePermissionModalUi();
            }
        }

        function toggleDeleteUserConfirm(userId, event) {
            event?.stopPropagation();
            if (deletingUserId !== null) return;

            pendingDeleteUserId = pendingDeleteUserId === userId ? null : userId;
            if (pendingDeleteUserId !== userId) {
                deletingUserId = null;
            }
            renderUsers();
        }

        function cancelDeleteUserConfirm(event) {
            event?.stopPropagation();
            closeDeleteUserConfirm(true);
        }

        function closeDeleteUserConfirm(shouldRender = true) {
            if (pendingDeleteUserId === null && deletingUserId === null) return;
            if (deletingUserId !== null) {
                return;
            }
            pendingDeleteUserId = null;
            hideUserDeletePopover();
            if (shouldRender) {
                renderUsers();
            } else {
                document.querySelectorAll('[data-user-delete-trigger].is-active').forEach(element => {
                    element.classList.remove('is-active');
                });
            }
        }

        async function confirmDeleteUser(event) {
            event?.stopPropagation();
            const userId = pendingDeleteUserId;
            if (pendingDeleteUserId !== userId || deletingUserId === userId) return;

            deletingUserId = userId;
            syncDeleteUserPopover();
            renderUsers();

            try {
                const response = await fetch(`/api/users/${userId}`, {
                    method: 'DELETE'
                });

                const result = await response.json();

                if (response.ok) {
                    pendingDeleteUserId = null;
                    deletingUserId = null;
                    hideUserDeletePopover();
                    selectedUserIds.delete(Number(userId));
                    showMessage('用户删除成功', 'success');
                    await loadUsers();
                } else {
                    deletingUserId = null;
                    syncDeleteUserPopover();
                    renderUsers();
                    showActionError('删除用户', result.error, { fallback: '删除用户失败' });
                }
            } catch (error) {
                console.error('删除用户失败:', error);
                deletingUserId = null;
                syncDeleteUserPopover();
                renderUsers();
                showMessage('删除用户失败', 'error');
            }
        }

        function formatDateTime(value) {
            const date = parseLocalDateTime(value);
            if (!date) {
                return '-';
            }
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }
    </script>
{% endblock %}