// Filename: frontend/js/pages/keys/apiKeyList.js

import { apiKeyManager } from '../../components/apiKeyManager.js';
import { taskCenterManager, toastManager } from '../../components/taskCenter.js';
import { debounce, escapeHTML } from '../../utils/utils.js';
import { handleApiError } from '../../services/errorHandler.js'; 

/**
 * Manages the UI and state for the API Key list within a selected group.
 * This class handles fetching, rendering, and all user interactions with the API key cards.
 */
class ApiKeyList {
    /**
     * @param {HTMLElement} container - The DOM element that will contain the API key list.
     */
    constructor(container) {
        if (!container) {
            throw new Error("ApiKeyListManager requires a valid container element.");
        }

        this.elements = {
            container: container, // This is the scrollable list container now, e.g., #api-list-container
            gridContainer: null,  // Will be dynamically created inside container
            paginationContainer: document.querySelector('.pagination-controls'), // Find the pagination container
            itemsPerPageSelect: document.querySelector('.items-per-page-select'), // Find the dropdown
            selectAllCheckbox: document.getElementById('select-all'),
            batchActionButton: document.querySelector('.batch-action-btn'), // The trigger button
            batchActionPanel: document.querySelector('.batch-action-panel'), // The dropdown panel
            statusFilterSelects: document.querySelectorAll('.status-filter-select'),
            desktopSearchInput: document.getElementById('desktop-search-input'),
            mobileSearchBtn: document.getElementById('mobile-search-btn'),
            desktopQuickActionsPanel: document.getElementById('desktop-quick-actions-panel'),
            mobileQuickActionsPanel: document.getElementById('mobile-quick-actions-panel'),
            desktopMultifunctionPanel: document.getElementById('desktop-multifunction-panel'),
            mobileMultifunctionPanel: document.getElementById('mobile-multifunction-panel'),
        };
        this.state = {
            currentKeys: [], // Now holds only the keys for the current page
            selectedKeyIds: new Set(), 
            isApiKeysLoading: false,
            activeGroupId: null, 
            activeGroupName: '',
            currentPage: 1,
            itemsPerPage: 20, // Default value, will be updated from select
            totalItems: 0,
            totalPages: 1,
            filterStatus: 'all', 
            searchText: '',
        };
        this.debouncedSearch = debounce(() => {
            this.state.currentPage = 1; // Reset to page 1 for new search
            this.loadApiKeys(this.state.activeGroupId, true);
        }, 300);
        this.boundListeners = {
            handleContainerClick: this._handleContainerClick.bind(this),
            handlePaginationClick: this.handlePaginationClick.bind(this),
            handleItemsPerPageChange: this._handleItemsPerPageChange.bind(this),
            handleSelectAllChange: this._handleSelectAllChange.bind(this),
            handleStatusFilterChange: this._handleStatusFilterChange.bind(this),
            handleBatchActionClick: this._handleBatchActionClick.bind(this),
            handleDocumentClickForMenuClose: this._handleDocumentClickForMenuClose.bind(this),
            handleSearchInput: this._handleSearchInput.bind(this),
            handleSearchEnter: this._handleSearchEnter.bind(this),
            showMobileSearchModal: this._showMobileSearchModal.bind(this),
            handleGlobalClick: this._handleGlobalClick.bind(this)
        };

    }

    init() {
        if (!this.elements.container) return;
        this.elements.container.addEventListener('click', this.boundListeners.handleContainerClick);
        this.elements.paginationContainer?.addEventListener('click', this.boundListeners.handlePaginationClick);
        this.elements.selectAllCheckbox?.addEventListener('change', this.boundListeners.handleSelectAllChange);
        this.elements.batchActionPanel?.addEventListener('click', this.boundListeners.handleBatchActionClick);
        this.elements.desktopSearchInput?.addEventListener('input', this.boundListeners.handleSearchInput);
        this.elements.desktopSearchInput?.addEventListener('keydown', this.boundListeners.handleSearchEnter);
        this.elements.mobileSearchBtn?.addEventListener('click', this.boundListeners.showMobileSearchModal);
        document.addEventListener('click', this.boundListeners.handleDocumentClickForMenuClose);
        document.body.addEventListener('click', this.boundListeners.handleGlobalClick);
        const itemsPerPageSelect = this.elements.itemsPerPageSelect?.querySelector('select');
        if (itemsPerPageSelect) {
            itemsPerPageSelect.addEventListener('change', this.boundListeners.handleItemsPerPageChange);
            this.state.itemsPerPage = parseInt(itemsPerPageSelect.value, 10);
        }
        this.elements.statusFilterSelects.forEach(selectContainer => {
            const actualSelect = selectContainer.querySelector('select');
            actualSelect?.addEventListener('change', this.boundListeners.handleStatusFilterChange);
        });
        
        this._renderMultifunctionMenu();
        this._renderQuickActionsMenu();
    }

    destroy() {
        console.log("Destroying ApiKeyList instance and cleaning up listeners.");
        this.elements.container.removeEventListener('click', this.boundListeners.handleContainerClick);
        this.elements.paginationContainer?.removeEventListener('click', this.boundListeners.handlePaginationClick);
        this.elements.selectAllCheckbox?.removeEventListener('change', this.boundListeners.handleSelectAllChange);
        this.elements.batchActionPanel?.removeEventListener('click', this.boundListeners.handleBatchActionClick);
        this.elements.desktopSearchInput?.removeEventListener('input', this.boundListeners.handleSearchInput);
        this.elements.desktopSearchInput?.removeEventListener('keydown', this.boundListeners.handleSearchEnter);
        this.elements.mobileSearchBtn?.removeEventListener('click', this.boundListeners.showMobileSearchModal);
        document.removeEventListener('click', this.boundListeners.handleDocumentClickForMenuClose);
        document.body.removeEventListener('click', this.boundListeners.handleGlobalClick);

        const itemsPerPageSelect = this.elements.itemsPerPageSelect?.querySelector('select');
        if (itemsPerPageSelect) {
            itemsPerPageSelect.removeEventListener('change', this.boundListeners.handleItemsPerPageChange);
        }
        
        this.elements.statusFilterSelects.forEach(selectContainer => {
            const actualSelect = selectContainer.querySelector('select');
            actualSelect?.removeEventListener('change', this.boundListeners.handleStatusFilterChange);
        });

        this.debouncedSearch.cancel?.();

        this.elements.container.innerHTML = '';
    }

    _handleItemsPerPageChange(e) {
        this.state.itemsPerPage = parseInt(e.target.value, 10);
        this.state.currentPage = 1;
        this.loadApiKeys(this.state.activeGroupId, true);
    }
    
    _handleStatusFilterChange(e) {
        this.state.filterStatus = e.target.value;
        this.state.currentPage = 1;
        this.loadApiKeys(this.state.activeGroupId, true);
    }
    _handleDocumentClickForMenuClose(event) {
        if (!event.target.closest('.api-card')) {
            this._closeAllActionMenus();
        }
    }

    _handleGlobalClick(event) {
    this._handleQuickActionClick(event);
    this._handleMultifunctionMenuClick(event);
    this._handleDropdownToggle(event);
    // 其他可能需要全局监听的点击事件...
    }
    /**
     * Updates the active group context for the manager.
     * @param {number} groupId The new active group ID.
     */
    setActiveGroup(groupId, groupName) { // Assuming groupName comes from groupList now
        this.state.activeGroupId = groupId;
        this.state.activeGroupName = groupName || '';
        this.state.currentPage = 1; // Reset to page 1 whenever group changes
    }

    /**
     * Fetches and renders API keys for the specified group.
     * @param {number} groupId - The ID of the group to load keys for.
     * @param {boolean} [force=false] - If true, bypasses the cache and fetches from the server.
     */
    async loadApiKeys(groupId, force = false) {
        this.state.selectedKeyIds.clear();
        if (!groupId) {
            this.state.currentKeys = [];
            this.render();
            return;
        }
        this.state.isApiKeysLoading = true;
        this.render(); 
        try {
            const { currentPage, itemsPerPage, filterStatus, searchText } = this.state;
            const params = {
            page: currentPage,
            limit: itemsPerPage,
        };
            if (filterStatus !== 'all') {
            params.status = filterStatus;
        }

        if (searchText && searchText.trim() !== '') {
            params.keyword = searchText.trim();
        }

        const pageData = await apiKeyManager.getKeysForGroup(groupId, params);
            // Update state with new pagination info from the API response
            this.state.currentKeys = pageData.items;
            this.state.totalItems = pageData.total;
            this.state.totalPages = pageData.pages;
            this.state.currentPage = pageData.page;
        } catch (error) {
            toastManager.show(`加载API Keys失败: ${error.message || '未知错误'}`, 'error');
            this.state.currentKeys = [];
            this.state.totalItems = 0;
            this.state.totalPages = 1;
        } finally {
            this.state.isApiKeysLoading = false;
            this.render();
        }
    }

    /**
     * Renders the list of API keys based on the current state.
     */
    render() {
        if (this.state.isApiKeysLoading && this.state.currentKeys.length === 0) {
            this.elements.container.innerHTML = '<div class="flex items-center justify-center h-full text-zinc-500"><p>正在加载 API Keys...</p></div>';
            if (this.elements.paginationContainer) this.elements.paginationContainer.innerHTML = '';
            return;
        }
        if (!this.state.activeGroupId) {
             this.elements.container.innerHTML = '<div class="flex items-center justify-center h-full text-zinc-500"><p>请先在左侧选择一个分组</p></div>';
             if (this.elements.paginationContainer) this.elements.paginationContainer.innerHTML = '';
             return;
        }
        if (this.state.currentKeys.length === 0) {
            this.elements.container.innerHTML = '<div class="flex items-center justify-center h-full text-zinc-500"><p>该分组下还没有 API Key。</p></div>';
            if (this.elements.paginationContainer) this.elements.paginationContainer.innerHTML = '';
            return;
        }
        // Render the list of keys
        const listHtml = this.state.currentKeys.map(apiKey => this._createApiKeyCardHtml(apiKey)).join('');
        this.elements.container.innerHTML = `<div class="grid grid-cols-1 md:grid-cols-2 gap-3">${listHtml}</div>`;
        this.elements.gridContainer = this.elements.container.firstChild; // Reference the grid
        // Render the pagination controls
        if (this.elements.paginationContainer) {
            this.elements.paginationContainer.innerHTML = this._createPaginationHtml();
        }
        this._updateAllStatusIndicators();
        this._syncCardCheckboxes();
        this._syncSelectionUI();
    }

    // [NEW] Handles clicks on pagination buttons
    handlePaginationClick(event) {
        const button = event.target.closest('button[data-page]');
        if (!button || button.disabled) return;
        const newPage = parseInt(button.dataset.page, 10);
        if (newPage !== this.state.currentPage) {
            this.state.currentPage = newPage;
            this.loadApiKeys(this.state.activeGroupId, true);
        }
    }
    // [NEW] Generates the HTML for the pagination controls
    _createPaginationHtml() {
        const { currentPage, totalPages } = this.state;
        if (totalPages < 1) return '';
        const baseButtonClasses = "pagination-button px-3 py-1 rounded text-sm transition-colors duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed";
        const activeClasses = "bg-zinc-500 text-white font-semibold";
        const inactiveClasses = "hover:bg-zinc-200 dark:hover:bg-zinc-700";
        let html = '';
        const prevDisabled = currentPage <= 1 ? 'disabled' : '';
        const nextDisabled = currentPage >= totalPages ? 'disabled' : '';
        // Previous button
        html += `<button class="${baseButtonClasses} ${inactiveClasses}" data-page="${currentPage - 1}" ${prevDisabled}>
                    <i class="fas fa-chevron-left"></i>
                </button>`;
        // Page number buttons
        const pagesToShow = this._getPaginationPages(currentPage, totalPages);
        pagesToShow.forEach(page => {
            if (page === '...') {
                html += `<span class="px-3 py-1 text-zinc-400 dark:text-zinc-500 text-sm">...</span>`;
            } else {
                const pageClasses = page === currentPage ? activeClasses : inactiveClasses;
                html += `<button class="${baseButtonClasses} ${pageClasses}" data-page="${page}">${page}</button>`;
            }
        });
        html += `<button class="${baseButtonClasses} ${inactiveClasses}" data-page="${currentPage + 1}" ${nextDisabled}>
                    <i class="fas fa-chevron-right"></i>
                </button>`;
        return html;
    }
    // [NEW] Helper to determine which page numbers to show in pagination (e.g., 1 ... 5 6 7 ... 12)
    _getPaginationPages(current, total, width = 2) {
        if (total <= (width * 2) + 3) {
            return Array.from({ length: total }, (_, i) => i + 1);
        }
        const pages = [1];
        if (current > width + 2) pages.push('...');
        
        for (let i = Math.max(2, current - width); i <= Math.min(total - 1, current + width); i++) {
            pages.push(i);
        }
        if (current < total - width - 1) pages.push('...');
        pages.push(total);
        return pages;
    }

    /**
     * Handles all actions originating from within an API key card.
     * @param {Event} event - The click event.
     */
    async handleCardAction(event) {
        const button = event.target.closest('button[data-action]');
        if (!button) return;
        const action = button.dataset.action;
        const card = button.closest('.api-card');
        if (!card) return;

        // 专门处理移动端菜单的显示/隐藏逻辑
        if (action === 'toggle-menu') {
            const menu = card.querySelector('[data-menu="actions"]');
            if (menu) {
                const isMenuOpen = !menu.classList.contains('hidden');
                this._closeAllActionMenus(card); // 关闭其他菜单
                if (!isMenuOpen) {
                    menu.classList.remove('hidden'); // 打开当前菜单
                }
            }
            return;
        }
        this._closeAllActionMenus();
        const keyId = parseInt(card.dataset.keyId, 10);
        const groupId = this.state.activeGroupId;

        // 如果是移动端菜单里的操作，执行后需要关闭菜单
        const menuToClose = card.querySelector('[data-menu="actions"]');
        if (menuToClose && !menuToClose.classList.contains('hidden')) {
            this._closeAllActionMenus();
        }

        const apiKeyData = this.state.currentKeys.find(key => key.id === keyId);
        if (!apiKeyData) {
            toastManager.show('错误: 找不到该Key的数据。可能是列表已过期，请尝试刷新。', 'error');
            return;
        }
        const fullApiKey = apiKeyData.api_key;

        switch (action) {
            case 'toggle-visibility':
            case 'copy-key':
                this._handleLocalCardActions(action, button, card, fullApiKey);
                break;

            case 'set-status': {
                const newStatus = button.dataset.newStatus;
                if (!newStatus) return;
                try {
                    await apiKeyManager.updateKeyStatusInGroup(groupId, keyId, newStatus);
                    toastManager.show(`Key 状态已成功更新为 ${newStatus}`, 'success');
                } catch (error) {
                    handleApiError(error, toastManager);
                }finally {
                 await this.loadApiKeys(groupId, true);
                }
                break;
            }
            
            case 'revalidate': {
                const revalidateTask = this._createRevalidateTaskDefinition(groupId, fullApiKey);
                taskCenterManager.startTask(revalidateTask);
                break;
            }
            
            case 'delete-key': {
            const result = await Swal.fire({
                target: '#main-content-wrapper',
                width: '20rem',
                backdrop: `rgba(0,0,0,0.5)`,
                heightAuto: false,
                customClass: {
                    popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}`
                },
                
                title: '确认删除',
                html: `确定要从 <b>当前分组</b> 中移除这个Key吗？`,
                //icon: 'warning',
                
                showCancelButton: true,
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                reverseButtons: true,
                confirmButtonColor: '#d33', 
                cancelButtonColor: '#6b7280', 
                focusConfirm: false,
                focusCancel: false,

            });
            if (!result.isConfirmed) {
                return;
            }
            try {
                const unlinkResult = await apiKeyManager.unlinkKeysFromGroup(groupId, [fullApiKey]);
                if (!unlinkResult.success) { 
                    throw new Error(unlinkResult.message || '后端未能移除Key。');
                }
                toastManager.show(`成功移除 1 个Key。`, 'success');
                await this.loadApiKeys(groupId, true);
            } catch (error) {
                const errorMessage = error && error.message ? error.message : ERROR_MESSAGES['DEFAULT'];
                toastManager.show(`移除Key失败: ${errorMessage}`, 'error');
                await this.loadApiKeys(groupId, true);
            }
            break;
            }
        }
    }
    
    // --- Private Helper Methods (copied from original file) ---

    _createRevalidateTaskDefinition(groupId, fullApiKey) {
        return {
            start: () => apiKeyManager.revalidateKeys(groupId, [fullApiKey]),
            poll: (taskId) => apiKeyManager.getTaskStatus(taskId, { noCache: true }),
            onSuccess: (data) => {
                toastManager.show(`Key验证完成`, 'success');
                this.loadApiKeys(groupId, true);
            },
            onError: (data) => {
                toastManager.show(`验证任务失败: ${data.error || '未知错误'}`, 'error');
            },
            renderToastNarrative: (data, oldData, toastManager) => {
                const toastId = `task-${data.id}`;
                const progress = data.total > 0 ? (data.processed / data.total) * 100 : 0;
                toastManager.showProgressToast(toastId, `正在验证Key`, '处理中', progress);
            },
            
            renderTaskCenterItem: (data, timestamp, formatTimeAgo) => {
                const timeAgo = formatTimeAgo(timestamp);
                const maskedKey = escapeHTML(`${fullApiKey.substring(0, 4)}...${fullApiKey.substring(fullApiKey.length - 4)}`);
                let contentHtml = '';
                const isDone = !data.is_running;
                
                if (isDone) {
                    // --- Task is complete ---
                    if (data.error) {
                        // --- Case 1: The task itself failed to run ---
                        const safeError = escapeHTML(data.error);
                        contentHtml = `
                            <div class="task-item-main">
                                <div class="task-item-icon-summary text-red-500"><i class="fas fa-exclamation-triangle"></i></div>
                                <div class="task-item-content flex-grow">
                                    <p class="task-item-title">验证任务出错: ${maskedKey}</p>
                                    <p class="task-item-status text-red-500 truncate" title="${safeError}">${safeError}</p>
                                </div>
                            </div>`;
                    } else {
                        // --- Case 2: The task ran, and we have results ---
                        const result = data.result?.results?.[0]; // Get the first (and only) result
                        const isSuccess = result?.status === 'valid';
                        const iconClass = isSuccess ? 'text-green-500 fas fa-check-circle' : 'text-red-500 fas fa-times-circle';
                        const title = isSuccess ? '验证成功' : '验证失败';
                        // Safely get the message, providing a default if it's missing.
                        const safeMessage = escapeHTML(result?.message || '没有详细信息。');
                        contentHtml = `
                            <div class="task-item-main">
                                <div class="task-item-icon-summary"><i class="${iconClass}"></i></div>
                                <div class="task-item-content flex-grow">
                                    <p class="task-item-title">${title}: ${maskedKey}</p>
                                    <p class="task-item-status truncate" title="${safeMessage}">${safeMessage}</p>
                                </div>
                            </div>
                        `;
                    }
                } else {
                    // --- Case 3: Task is still running ---
                    contentHtml = `
                        <div class="task-item-main gap-3">
                            <div class="task-item-icon task-item-icon-running"><i class="fas fa-spinner animate-spin"></i></div>
                            <div class="task-item-content flex-grow">
                                <p class="task-item-title">正在验证: ${maskedKey}</p>
                                <p class="task-item-status">运行中... (${data.processed}/${data.total})</p>
                            </div>
                        </div>`;
                }
                return `${contentHtml}<div class="task-item-timestamp">${timeAgo}</div>`;
            },
        };
    }

       /**
     * Creates the HTML for a single API key card, adapting to the flat APIKeyDetails structure.
     * @param {object} item - The APIKeyDetails object from the API.
     * @returns {string} The HTML string for the card.
     */
   _createApiKeyCardHtml(item) {
       if (!item || !item.api_key) return ''; // 安全检查

       // --- 数据准备 ---
       const maskedKey = escapeHTML(`${item.api_key.substring(0, 4)}......${item.api_key.substring(item.api_key.length - 4)}`);
       const status = escapeHTML(item.status);
       const errorCount = escapeHTML(item.consecutive_error_count); 
       const keyId = escapeHTML(item.id);
       const mappingId = escapeHTML(`${item.api_key_id}-${item.key_group_id}`); 

       // --- 行为挂钩 ---
       const setActiveAction = `data-action="set-status" data-new-status="ACTIVE"`;
       const revalidateAction = `data-action="revalidate"`;
       const disableAction = `data-action="set-status" data-new-status="DISABLED"`;
       const deleteAction = `data-action="delete-key"`;

       // --- 模板渲染 ---
       return `
            <div class="api-card group relative flex items-center gap-x-3 rounded-lg p-3 bg-white dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700/60" 
                data-status="${status}" 
                data-key-id="${keyId}" 
                data-mapping-id="${mappingId}">
                <input type="checkbox" class="api-key-checkbox h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500 shrink-0">
                <span data-status-indicator class="w-2 h-2 rounded-full shrink-0"></span>
                <div class="flex-grow min-w-0">
                    <p class="font-mono text-xs font-semibold truncate">${maskedKey}</p>
                    <p class="text-xs text-zinc-400 mt-1">失败: ${errorCount} 次</p>
                </div>
                <!-- [DESKTOP ONLY] 快速操作按钮 - 在移动端(<lg)隐藏 -->
                <div class="hidden lg:flex items-center gap-x-2 text-zinc-400 text-xs z-10">
                    <button class="hover:text-blue-500" data-action="toggle-visibility" title="查看完整Key"><i class="fas fa-eye"></i></button>
                    <button class="hover:text-blue-500" data-action="copy-key" title="复制Key"><i class="fas fa-copy"></i></button>
                </div>
                <!-- [DESKTOP ONLY] Hover Menu - 在移动端(<lg)隐藏 -->
                <div class="hidden lg:flex absolute right-14 top-1/2 -translate-y-1/2 items-center bg-zinc-200 dark:bg-zinc-700 rounded-full shadow-md opacity-0 lg:group-hover:opacity-100 transition-opacity duration-200 z-20">
                    <button class="px-2 py-1 hover:text-green-500" ${setActiveAction} title="设为可用"><i class="fas fa-check-circle"></i></button>
                    <button class="px-2 py-1 hover:text-blue-500" ${revalidateAction} title="重新验证"><i class="fas fa-sync-alt"></i></button>
                    <button class="px-2 py-1 hover:text-yellow-500" ${disableAction} title="禁用"><i class="fas fa-ban"></i></button>
                    <button class="px-2 py-1 hover:text-red-500" ${deleteAction} title="从分组中移除"><i class="fas fa-trash-alt"></i></button>
                </div>
                <!-- [MOBILE ONLY] Kebab Menu and Dropdown - 在桌面端(>=lg)隐藏 -->
                <div class="relative lg:hidden">
                    <button data-action="toggle-menu" class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-700 text-zinc-500" title="更多操作">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                    <div data-menu="actions" class="absolute right-0 mt-2 w-48 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg z-30 hidden">
                        <!-- [NEW] "查看"和"复制"操作已移入移动端菜单 -->
                        <button class="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-x-3" data-action="toggle-visibility"><i class="fas fa-eye w-4"></i> 查看/隐藏 Key</button>
                        <button class="w-full text-left px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-x-3" data-action="copy-key"><i class="fas fa-copy w-4"></i> 复制 Key</button>
                        <div class="border-t border-zinc-200 dark:border-zinc-700 my-1"></div>
                        <button class="w-full text-left px-4 py-2 text-sm text-green-600 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-x-3" ${setActiveAction}><i class="fas fa-check-circle w-4"></i> 设为可用</button>
                        <button class="w-full text-left px-4 py-2 text-sm text-blue-600 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-x-3" ${revalidateAction}><i class="fas fa-sync-alt w-4"></i> 重新验证</button>
                        <button class="w-full text-left px-4 py-2 text-sm text-yellow-600 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-x-3" ${disableAction}><i class="fas fa-ban w-4"></i> 禁用</button>
                        <div class="border-t border-zinc-200 dark:border-zinc-700 my-1"></div>
                        <button class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-x-3" ${deleteAction}><i class="fas fa-trash-alt w-4"></i> 从分组中移除</button>
                    </div>
                </div>
            </div>
        `;
    }

    _handleLocalCardActions(action, button, card, fullApiKey) {
        switch (action) {
            case 'toggle-visibility': {
                const safeApiKey = escapeHTML(fullApiKey);
                    Swal.fire({
                        target: '#main-content-wrapper',
                        width: '24rem', // 适配移动端宽度
                        backdrop: `rgba(0,0,0,0.5)`,
                        heightAuto: false,
                        
                        customClass: {
                            popup: `swal2-custom-style rounded-xl ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}`,
                            htmlContainer: 'm-0 text-left', // 移除默认边距
                        },
                        
                        showConfirmButton: false,
                        showCloseButton: false,
                        html: `
                            <div class="mt-2 flex items-center justify-between rounded-md bg-zinc-100 dark:bg-zinc-700 p-3 font-mono text-sm text-zinc-800 dark:text-zinc-200">
                                <code class="break-all">${safeApiKey}</code>
                                <button id="swal-copy-key-btn" class="ml-4 p-2 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-600 text-zinc-500 dark:text-zinc-300" title="复制">
                                    <i class="far fa-copy"></i>
                                </button>
                            </div>
                        `,
                        didOpen: (modal) => {
                            const copyBtn = modal.querySelector('#swal-copy-key-btn');
                            if (copyBtn) {
                                copyBtn.addEventListener('click', () => {
                                    navigator.clipboard.writeText(fullApiKey).then(() => {
                                        toastManager.show('API Key 已复制到剪贴板。', 'success');
                                        copyBtn.innerHTML = '<i class="fas fa-check text-green-500"></i>';
                                        setTimeout(() => {
                                            copyBtn.innerHTML = '<i class="far fa-copy"></i>';
                                        }, 1500);
                                    }).catch(err => {
                                        toastManager.show(`复制失败: ${err.message}`, 'error');
                                    });
                                });
                            }
                        },
                    });
                break; 
            }
            case 'copy-key': {
                if (!fullApiKey) {
                    toastManager.show('无法找到完整的Key用于复制。', 'error');
                    break;
                }
                navigator.clipboard.writeText(fullApiKey).then(() => {
                    toastManager.show('API Key 已复制到剪贴板。', 'success');
                }).catch(err => {
                    toastManager.show(`复制失败: ${err.message}`, 'error');
                });
                break;
            }
        }
    }
    
    _updateAllStatusIndicators() {
        const allCards = this.elements.container.querySelectorAll('.api-card[data-status]');
        allCards.forEach(card => this._updateApiKeyStatusIndicator(card));
    }

    _updateApiKeyStatusIndicator(cardElement) {
        const status = cardElement.dataset.status;
        if (!status) return;
        const indicator = cardElement.querySelector('[data-status-indicator]');
        if (!indicator) return;
        const statusColors = {
            'ACTIVE': 'bg-green-500',
            'PENDING': 'bg-gray-400',
            'COOLDOWN': 'bg-yellow-500',
            'DISABLED': 'bg-orange-500',
            'BANNED': 'bg-red-500',
        };
        
        // A more robust way to remove old classes
        Object.values(statusColors).forEach(colorClass => indicator.classList.remove(colorClass));
        
        if (statusColors[status]) {
            indicator.classList.add(statusColors[status]);
        }
    }
    /**
     * [NEW HELPER] Closes all action menus, optionally ignoring one card.
     * @param {HTMLElement} [ignoreCard=null] - The card whose menu should not be closed.
     */
    _closeAllActionMenus(ignoreCard = null) {
        this.elements.container.querySelectorAll('.api-card').forEach(card => {
            if (card === ignoreCard) return;
            const menu = card.querySelector('[data-menu="actions"]');
            if (menu) {
                menu.classList.add('hidden');
            }
        });
    }
    /**
     * [NEW] A central click handler for the entire list container.
     * It delegates clicks on checkboxes or action buttons to specific handlers.
     */
    _handleContainerClick(event) {
        const target = event.target;
        // Case 1: A checkbox was clicked
        if (target.matches('.api-key-checkbox')) {
            this._handleSelectionChange(target);
            return;
        }
        // Case 2: An action button (e.g., copy, delete) was clicked
        const actionButton = target.closest('button[data-action]');
        if (actionButton) {
            // We pass the original event object to handleCardAction
            this.handleCardAction(event);
            return;
        }
    }
    /**
     * [NEW] Handles a click on an individual API key's checkbox.
     * @param {HTMLInputElement} checkbox - The checkbox element that was clicked.
     */
    _handleSelectionChange(checkbox) {
        const card = checkbox.closest('.api-card');
        if (!card) return;
        const keyId = parseInt(card.dataset.keyId, 10);
        if (isNaN(keyId)) return;
        if (checkbox.checked) {
            this.state.selectedKeyIds.add(keyId);
        } else {
            this.state.selectedKeyIds.delete(keyId);
        }
        this._syncSelectionUI();
    }
    /**
     * [NEW] Synchronizes the UI elements based on the current selection state.
     * This includes the "Select All" checkbox and batch action buttons.
     */
    _syncSelectionUI() {
        if (!this.elements.selectAllCheckbox || !this.elements.batchActionButton) return;
        const selectedCount = this.state.selectedKeyIds.size;
        const visibleKeysCount = this.state.currentKeys.length;
        // Update the main "Select All" checkbox state
        if (selectedCount === 0) {
            this.elements.selectAllCheckbox.checked = false;
            this.elements.selectAllCheckbox.indeterminate = false;
        } else if (selectedCount < visibleKeysCount) {
            this.elements.selectAllCheckbox.checked = false;
            this.elements.selectAllCheckbox.indeterminate = true;
        } else if (selectedCount === visibleKeysCount && visibleKeysCount > 0) {
            this.elements.selectAllCheckbox.checked = true;
            this.elements.selectAllCheckbox.indeterminate = false;
        }
        // Enable or disable batch action buttons
        const isDisabled = selectedCount === 0;
        if (isDisabled) {
            this.elements.batchActionButton.classList.add('is-disabled');
        } else {
            this.elements.batchActionButton.classList.remove('is-disabled');
        }
        
        // Optionally, update a counter in the UI
        this.elements.batchActionButton.style.pointerEvents = isDisabled ? 'none' : 'auto';
        this.elements.batchActionButton.style.opacity = isDisabled ? '0.5' : '1';
        const counter = this.elements.batchActionButton.querySelector('span');
        if (counter) {
            counter.textContent = isDisabled ? '批量操作' : `已选 ${selectedCount} 项`;
        }
    }
    /**
     * [NEW] Handles the change event of the main "Select All" checkbox.
     * @param {Event} event - The change event object.
     */
    _handleSelectAllChange(event) {
        const isChecked = event.target.checked;
        
        // Update the state based on all currently visible keys
        this.state.currentKeys.forEach(key => {
            if (isChecked) {
                this.state.selectedKeyIds.add(key.id);
            } else {
                this.state.selectedKeyIds.delete(key.id);
            }
        });
        // Sync the entire UI to reflect the new state
        this._syncCardCheckboxes();
        this._syncSelectionUI();
    }
    /**
     * [NEW] Ensures that the checked status of each individual card's checkbox
     * matches the selection state stored in `this.state.selectedKeyIds`.
     */
    _syncCardCheckboxes() {
        if (!this.elements.gridContainer) return;
        const checkboxes = this.elements.gridContainer.querySelectorAll('.api-key-checkbox');
        checkboxes.forEach(checkbox => {
            const card = checkbox.closest('.api-card');
            if (card) {
                const keyId = parseInt(card.dataset.keyId, 10);
                if (!isNaN(keyId)) {
                    checkbox.checked = this.state.selectedKeyIds.has(keyId);
                }
            }
        });
    }

    /**
     * [NEW] Handles clicks within the batch action dropdown panel.
     * Uses event delegation to determine which action was triggered.
     * This version is adapted for the final HTML structure.
     * @param {Event} event - The click event.
     */
    _handleBatchActionClick(event) {
        // [MODIFIED] The selector is the same, but we are now certain it's a button.
        const button = event.target.closest('button[data-batch-action]');
        if (!button) return;
        event.preventDefault(); 
        
        // Auto-close the custom select panel after an action.
        const customSelectContainer = button.closest('.custom-select');
        if (customSelectContainer) {
            const panel = customSelectContainer.querySelector('.custom-select-panel');
            if (panel) panel.classList.add('hidden');
        }
        const action = button.dataset.batchAction;
        const selectedIds = Array.from(this.state.selectedKeyIds);
        if (selectedIds.length === 0) {
            toastManager.show('没有选中任何Key。', 'warning');
            return;
        }
        switch (action) {
            case 'copy-to-clipboard':
                this._batchCopyToClipboard(selectedIds);
                break;
            case 'set-status-active':
                this._batchSetStatus('ACTIVE', selectedIds);
                break;
            case 'set-status-disabled':
                this._batchSetStatus('DISABLED', selectedIds);
                break;
            case 'revalidate':
                this._batchRevalidate(selectedIds);
                break;
            case 'delete':
                this._batchDelete(selectedIds);
                break;
            default:
                console.warn(`Unknown batch action: ${action}`);
        }
    }
    /**
     * [NEW] Helper for batch updating the status of selected keys.
     * @param {string} newStatus - The new status ('ACTIVE' or 'DISABLED').
     * @param {number[]} keyIds - An array of selected key IDs.
     */
    async _batchSetStatus(newStatus, keyIds) {
    const groupId = this.state.activeGroupId;
    const actionText = newStatus === 'ACTIVE' ? '启用' : '禁用';
    
    toastManager.show(`正在批量${actionText} ${keyIds.length} 个Key...`, 'info', 3000);
    try {
        const promises = keyIds.map(id => apiKeyManager.updateKeyStatusInGroup(groupId, id, newStatus));
        const results = await Promise.allSettled(promises);
        const fulfilledCount = results.filter(r => r.status === 'fulfilled').length;
        const rejectedCount = results.length - fulfilledCount;
        let toastMessage = `批量${actionText}操作完成。`;
        let toastType = 'success';
        if (rejectedCount > 0) {
            toastMessage = `操作完成: ${fulfilledCount} 个成功，${rejectedCount} 个失败（可能由于Key状态限制）。列表已更新。`;
            // If some succeeded, we can still consider it a partial success visually.
            toastType = fulfilledCount > 0 ? 'warning' : 'error';
        }
        
        toastManager.show(toastMessage, toastType);
    } catch (error) {

        toastManager.show(`批量${actionText}时发生网络错误: ${error.message || '未知错误'}`, 'error');
    } finally {

        await this.loadApiKeys(groupId, true); 
    }
}
    /**
     * [NEW] Helper for batch revalidating selected keys.
     * @param {number[]} keyIds - An array of selected key IDs.
     */
    _batchRevalidate(keyIds) {
        const groupId = this.state.activeGroupId;
        
        // Find the full key strings for the selected IDs
        const currentKeysMap = new Map(this.state.currentKeys.map(key => [key.id, key.api_key]));
        const keysToRevalidate = keyIds.map(id => currentKeysMap.get(id)).filter(Boolean);

        if (keysToRevalidate.length === 0) {
            toastManager.show('找不到匹配的Key进行验证。请刷新列表后重试。', 'error');
            return;
        }
        
        const revalidateTask = {
            start: () => apiKeyManager.revalidateKeys(groupId, keysToRevalidate),
            poll: (taskId) => apiKeyManager.getTaskStatus(taskId, { noCache: true }),
            onSuccess: (data) => {
                toastManager.show(`批量验证完成。`, 'success');
                this.loadApiKeys(groupId, true);
            },
            onError: (data) => {
                toastManager.show(`批量验证任务失败: ${data.error || '未知错误'}`, 'error');
            },
            renderToastNarrative: (data, oldData, toastManager) => {
                const toastId = `task-${data.id}`;
                const progress = data.total > 0 ? (data.processed / data.total) * 100 : 0;
                toastManager.showProgressToast(toastId, `正在批量验证Key`, `处理中 (${data.processed}/${data.total})`, progress);
            },

            // [MODIFIED] This is the core fix. A new, detailed renderer for the task center.
            renderTaskCenterItem: (data, timestamp, formatTimeAgo) => {
                const timeAgo = formatTimeAgo(timestamp);
                let contentHtml = '';

                // --- State 1: Task is RUNNING ---
                if (data.is_running) {
                    contentHtml = `
                        <div class="task-item-main gap-3">
                            <div class="task-item-icon task-item-icon-running"><i class="fas fa-spinner animate-spin"></i></div>
                            <div class="task-item-content flex-grow">
                                <p class="task-item-title">批量验证 ${data.total} 个Key</p>
                                <p class="task-item-status">运行中... (${data.processed}/${data.total})</p>
                            </div>
                        </div>`;
                } 
                // --- State 2: Task is COMPLETE ---
                else {
                    // Case 2a: The entire task failed before processing keys
                    if (data.error) {
                        contentHtml = `
                            <div class="task-item-main">
                                <div class="task-item-icon-summary text-red-500"><i class="fas fa-exclamation-triangle"></i></div>
                                <div class="task-item-content flex-grow">
                                    <p class="task-item-title">批量验证任务出错</p>
                                    <p class="task-item-status text-red-500 truncate" title="${data.error}">${data.error}</p>
                                </div>
                            </div>`;
                    } 
                    // Case 2b: The task ran and we have detailed results
                    else {
                        const results = data.result?.results || [];
                        const validCount = results.filter(r => r.status === 'valid').length;
                        const invalidCount = results.length - validCount;

                        const summaryTitle = `验证完成: ${validCount}个有效, ${invalidCount}个无效`;
                        
                        const overallIconClass = invalidCount > 0 
                            ? 'text-yellow-500 fas fa-exclamation-triangle' // Partial success/warning
                            : 'text-green-500 fas fa-check-circle'; // Full success

                        // Generate the detailed list of results for the expandable area
                        const detailsHtml = results.map(result => {
                            const maskedKey = escapeHTML(`${result.key.substring(0, 4)}...${result.key.substring(result.key.length - 4)}`);
                            const safeMessage = escapeHTML(result.message); 
                            if (result.status === 'valid') {
                                return `
                                    <div class="flex items-start text-xs">
                                        <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                                        <div class="flex-grow">
                                            <p class="font-mono">${maskedKey}</p>
                                            <p class="text-zinc-400">${safeMessage}</p>
                                        </div>
                                    </div>`;
                            } else {
                                return `
                                    <div class="flex items-start text-xs">
                                        <i class="fas fa-times-circle text-red-500 mt-0.5 mr-2"></i>
                                        <div class="flex-grow">
                                            <p class="font-mono">${maskedKey}</p>
                                            <p class="text-zinc-400">${safeMessage}</p>
                                        </div>
                                    </div>`;
                            }
                        }).join('');

                        contentHtml = `
                            <div class="task-item-main">
                                <div class="task-item-icon-summary"><i class="${overallIconClass}"></i></div>
                                <div class="task-item-content flex-grow">
                                    <div class="flex justify-between items-center cursor-pointer" data-task-toggle>
                                        <p class="task-item-title">${summaryTitle}</p>
                                        <i class="fas fa-chevron-down task-toggle-icon"></i>
                                    </div>
                                    <div class="task-details-content collapsed" data-task-content>
                                        <div class="task-details-body space-y-2 mt-2">
                                            ${detailsHtml}
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                    }
                }
                return `${contentHtml}<div class="task-item-timestamp">${timeAgo}</div>`;
            },
        };

        taskCenterManager.startTask(revalidateTask);
    }

    /**
     * [NEW] Helper for batch deleting (unlinking) selected keys from the group.
     * @param {number[]} keyIds - An array of selected key IDs.
     */
    async _batchDelete(keyIds) {
        const groupId = this.state.activeGroupId;
        const selectedCount = keyIds.length;
        const result = await Swal.fire({
            target: '#main-content-wrapper',
            width: '20rem',
            backdrop: `rgba(0,0,0,0.5)`,
            heightAuto: false,
            customClass: {
                popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}`
            },
            title: '确认批量移除',
            html: `确定要从 <b>当前分组</b> 中移除选中的 <b>${selectedCount}</b> 个Key吗？`,
            showCancelButton: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            reverseButtons: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6b7280',
        });
        if (!result.isConfirmed) return;
        
        const keysToDelete = this.state.currentKeys
            .filter(key => keyIds.includes(key.id))
            .map(key => key.api_key);
        if (keysToDelete.length === 0) {
            toastManager.show('找不到匹配的Key进行移除。请刷新列表后重试。', 'error');
            return;
        }
        try {
            const unlinkResult = await apiKeyManager.unlinkKeysFromGroup(groupId, keysToDelete);
            if (!unlinkResult.success) { 
                throw new Error(unlinkResult.message || '后端未能移除Keys。');
            }
            toastManager.show(`成功移除 ${keysToDelete.length} 个Key。`, 'success');
            await this.loadApiKeys(groupId, true); // Refresh list
        } catch (error) {
            const errorMessage = error && error.message ? error.message : '未知错误';
            toastManager.show(`批量移除Key失败: ${errorMessage}`, 'error');
            await this.loadApiKeys(groupId, true); // Refresh anyway
        }
    }
    /**
     * [NEW] Helper for copying all selected API keys to the clipboard.
     * @param {number[]} keyIds - An array of selected key IDs.
     */
    _batchCopyToClipboard(keyIds) {
        // Step 1: Find the full API key strings for the selected IDs from the current state.
        const currentKeysMap = new Map(this.state.currentKeys.map(key => [key.id, key.api_key]));
        const keysToCopy = keyIds.map(id => currentKeysMap.get(id)).filter(Boolean);
        if (keysToCopy.length === 0) {
            toastManager.show('没有找到可复制的Key。列表可能已过期，请刷新。', 'warning');
            return;
        }
        // Step 2: Join the keys into a single string, separated by newlines.
        // This format is easy to paste into text editors or other tools.
        const textToCopy = keysToCopy.join('\n');
        // Step 3: Use the Clipboard API to write the text.
        navigator.clipboard.writeText(textToCopy).then(() => {
            // Success feedback
            toastManager.show(`成功复制 ${keysToCopy.length} 个Key到剪贴板。`, 'success');
        }).catch(err => {
            // Error feedback
            console.error('Failed to copy keys to clipboard:', err);
            toastManager.show(`复制失败: ${err.message}`, 'error');
        });
    }


    /** [NEW] Shows the mobile search modal using SweetAlert2. */
    _showMobileSearchModal() {
        Swal.fire({
            target: '#main-content-wrapper',
            width: '24rem',
            backdrop: `rgba(0,0,0,0.5)`,
            heightAuto: false,
            customClass: {
                popup: `swal2-custom-style rounded-xl ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}`,
                htmlContainer: 'm-0', 
            },
            showConfirmButton: false, // We don't need a confirm button
            showCloseButton: false,   // A close button is user-friendly
            html: `
                <div class="flex items-center justify-between rounded-md bg-zinc-100 dark:bg-zinc-700 p-3 mt-2 font-mono text-sm text-zinc-800 dark:text-zinc-200">
                    <input type="text" id="swal-search-input" placeholder="搜索 API Key..." class="w-full focus:outline-none focus:ring-0 rounded-lg dark:placeholder-zinc-400" 
                           autocomplete="off">
                </div>
            `,
            didOpen: (modal) => {
                const input = modal.querySelector('#swal-search-input');
                if (!input) return;
                input.value = this.state.searchText;
                input.focus();
                
                // Add event listeners directly to the Swal input
                input.addEventListener('input', this._handleSearchInput.bind(this));
                input.addEventListener('keydown', (event) => {
                    this._handleSearchEnter.bind(this)(event); // Ensure correct 'this' context
                    if (event.key === 'Enter') {
                        event.preventDefault(); 
                        Swal.close();
                    }
                });
            }
        });
    }

    /** [NEW] Central handler for any search input event. */
    _handleSearchInput(event) {
        this._updateSearchStateAndSyncInputs(event.target.value);
        this.debouncedSearch();
    }

    /** Synchronizes search text across UI state and inputs. */
    _updateSearchStateAndSyncInputs(value) {
        this.state.searchText = value;
        // Sync desktop input if the event didn't come from it
        if (this.elements.desktopSearchInput && document.activeElement !== this.elements.desktopSearchInput) {
            this.elements.desktopSearchInput.value = value;
        }
    }
    /** [MODIFIED] Handles 'Enter' key press for immediate search. Bug fixed. */
    _handleSearchEnter(event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            this.debouncedSearch.cancel?.(); // Cancel any pending debounced search
            
            this.state.currentPage = 1;
            this.loadApiKeys(this.state.activeGroupId, true);
        }
    }
    
    /** Hides the mobile search overlay */
    _hideMobileSearch() {
        this.elements.mobileSearchOverlay?.classList.add('hidden');
    }


     /**
     * A private helper that returns the complete quick actions configuration.
     * This is the single, authoritative source for all quick action menu data.
     * @returns {Array<Object>} The configuration array for quick actions.
     */
    _getQuickActionsConfiguration() {
        return [
            { action: 'revalidate-invalid', text: '验证所有无效Key', icon: 'fa-rocket text-blue-500', requiresConfirm: false },
            { action: 'revalidate-all', text: '验证所有Key', icon: 'fa-sync-alt text-blue-500', requiresConfirm: true, confirmText: '此操作将对当前分组下的 **所有Key** 发起一次API请求以验证其有效性，可能会消耗大量额度。确定要继续吗？' },
            { action: 'restore-cooldown', text: '恢复所有冷却中Key', icon: 'fa-undo text-green-500', requiresConfirm: false },
            { type: 'divider' },
            { action: 'cleanup-banned', text: '删除所有失效Key', icon: 'fa-trash-alt', danger: true, requiresConfirm: true, confirmText: '确定要从当前分组中移除 **所有** 状态为 `BANNED` 的Key吗？此操作不可恢复。' }
        ];
    }

    /**
     * Renders the content of the quick actions dropdown menu into both desktop and mobile panels.
     */
    _renderQuickActionsMenu() {
        const actions = this._getQuickActionsConfiguration(); // Fetch config from the helper
        const menuHtml = actions.map(item => {
            if (item.type === 'divider') {
                return '<div class="menu-divider"></div>';
            }
            return `
                <button data-quick-action="${item.action}" class="menu-item ${item.danger ? 'menu-item-danger' : ''} whitespace-nowrap">
                    <i class="fas ${item.icon} menu-item-icon"></i>
                    <span>${item.text}</span>
                </button>
            `;
        }).join('');
        const menuWrapper = `<div class="py-1">${menuHtml}</div>`;
        if (this.elements.desktopQuickActionsPanel) {
            this.elements.desktopQuickActionsPanel.innerHTML = menuWrapper;
        }
        if (this.elements.mobileQuickActionsPanel) {
            this.elements.mobileQuickActionsPanel.innerHTML = menuWrapper;
        }
    }

    /**
     * [NEW] Handles clicks on any quick action button.
     * @param {Event} event The click event.
     */
    async _handleQuickActionClick(event) {
        const button = event.target.closest('button[data-quick-action]');
        if (!button) return;
        event.preventDefault();
        // Assume the custom-select component handles closing itself.
        const action = button.dataset.quickAction;
        const groupId = this.state.activeGroupId;
        if (!groupId) {
            toastManager.show('请先选择一个分组。', 'warning');
            return;
        }
        // Find the action config to check for confirmation
        const actionConfig = this._getQuickActionConfig(action);
        if (actionConfig && actionConfig.requiresConfirm) {
            const result = await Swal.fire({
                target: '#main-content-wrapper',
                title: '请确认操作',
                html: actionConfig.confirmText,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '确认执行',
                cancelButtonText: '取消',
                reverseButtons: true,
                confirmButtonColor: '#d33',
                customClass: { popup: `swal2-custom-style ${document.documentElement.classList.contains('dark') ? 'swal2-dark' : ''}` },
            });
            if (!result.isConfirmed) return;
        }
        this._executeQuickAction(action, groupId);
    }
    
    /** [NEW] Helper to retrieve action configuration. */
    _getQuickActionConfig(action) {
        const actions = this._getQuickActionsConfiguration(); 
        return actions.find(a => a.action === action);
    }
    /**
     * [MODIFIED] Executes the quick action by building the correct payload for the unified bulk-actions endpoint.
     * @param {string} action The action to execute.
     * @param {number} groupId The current group ID.
     */
    async _executeQuickAction(action, groupId) {
        let taskDefinition;
        let payload; // We will build a payload object instead of calling different functions
        let taskTitle;
        switch (action) {
            case 'revalidate-invalid':
                taskTitle = '验证分组无效Key';
                payload = { 
                    action: 'revalidate', 
                    filter: { 
                        // Backend should interpret 'invalid' as this set of statuses
                        status: ['disabled', 'cooldown', 'banned'] 
                    } 
                };
                break;
            case 'revalidate-all':
                taskTitle = '验证分组所有Key';
                payload = { 
                    action: 'revalidate', 
                    filter: { status: ['all'] } 
                };
                break;
            case 'restore-cooldown':
                taskTitle = '恢复冷却中Key';
                payload = { 
                    action: 'set_status', 
                    new_status: 'active', // The target status
                    filter: { status: ['cooldown'] } 
                };
                break;
            case 'cleanup-banned':
                taskTitle = '清理失效Key';
                payload = { 
                    action: 'delete', 
                    filter: { status: ['banned'] } 
                };
                break;
            default:
                toastManager.show(`未知的快速处置操作: ${action}`, 'error');
                return;
        }
        try {
            const response = await apiKeyManager.startGroupBulkActionTask(groupId, payload);
            if (response && response.id) {
                const startPromise = Promise.resolve(response);
                const taskDefinition = this._createGroupTaskDefinition(taskTitle, startPromise, groupId, action);
                taskCenterManager.startTask(taskDefinition);
            } else {
                if (response && response.result && response.result.message) {
                    toastManager.show(response.result.message, 'info');
                } else {
                    toastManager.show('操作已完成，但无任何项目被更改。', 'info');
                }
            }
        } catch (error) {
            handleApiError(error, toastManager, { prefix: `${taskTitle}时发生意外错误: ` });
        }
    }
    /**
     * [NEW] Generic task definition factory for group-level operations.
     */
    _createGroupTaskDefinition(title, startPromise, groupId, action) {
        return {
            start: () => startPromise,
            poll: (taskId) => apiKeyManager.getTaskStatus(taskId, { noCache: true }),
            onSuccess: (data) => {
                toastManager.show(`${title}任务完成。`, 'success');
                this.loadApiKeys(groupId, true);
            },
            onError: (data) => {
                const displayMessage = escapeHTML(data.error || '任务执行时发生未知错误');
                toastManager.show(`${title}任务失败: ${displayMessage}`, 'error');
            },
            renderToastNarrative: (data, oldData, toastManager) => {
                const toastId = `task-${data.id}`;
                const progress = data.total > 0 ? (data.processed / data.total) * 100 : 0;
                toastManager.showProgressToast(toastId, title, `处理中 (${data.processed}/${data.total})`, progress);
            },
            renderTaskCenterItem: (data, timestamp, formatTimeAgo) => {
                const timeAgo = formatTimeAgo(timestamp);
                let contentHtml = '';
                if (data.is_running) {
                    contentHtml = `
                        <div class="task-item-main gap-3">
                            <div class="task-item-icon task-item-icon-running"><i class="fas fa-spinner animate-spin"></i></div>
                            <div class="task-item-content flex-grow">
                                <p class="task-item-title">${title}</p>
                                <p class="task-item-status">运行中... (${data.processed}/${data.total})</p>
                            </div>
                        </div>`;
                } else if (data.error) {
                    const safeError = escapeHTML(data.error);
                    contentHtml = `
                        <div class="task-item-main">
                            <div class="task-item-icon-summary text-red-500"><i class="fas fa-exclamation-triangle"></i></div>
                            <div class="task-item-content flex-grow">
                                <p class="task-item-title">${title}任务出错</p>
                                <p class="task-item-status text-red-500 truncate" title="${safeError}">${safeError}</p>
                            </div>
                        </div>`;
                } else {
                    let summary = '任务已完成。';
                    const result = data.result || {};
                    const iconClass = 'fas fa-check-circle text-green-500';
                    switch (action) {
                        case 'cleanup-banned':
                            // For this action, backend returns `unlinked_count`
                            summary = `成功清理 ${result.unlinked_count || 0} 个失效Key。`;
                            break;
                        case 'restore-cooldown':
                            // For this action, backend returns `updated_count` and `skipped_count`
                             if (result.skipped_count > 0) {
                                summary = `完成: ${result.updated_count || 0} 个已恢复, ${result.skipped_count} 个被跳过。`;
                            } else {
                                summary = `成功恢复 ${result.updated_count || 0} 个冷却中Key。`;
                            }
                            break;
                        case 'revalidate-invalid':
                        case 'revalidate-all':
                            // For revalidation, we can show a summary of valid/invalid
                            const results = result.results || [];
                            const validCount = results.filter(r => r.status === 'valid').length;
                            const invalidCount = results.length - validCount;
                            summary = `验证完成: ${validCount}个有效, ${invalidCount}个无效。`;
                            break;
                        default:
                            summary = `处理了 ${data.processed} 个Key。`;
                    }
                    const safeSummary = escapeHTML(summary);
                    contentHtml = `
                        <div class="task-item-main">
                            <div class="task-item-icon-summary"><i class="${iconClass}"></i></div>
                            <div class="task-item-content flex-grow">
                                <p class="task-item-title">${title}</p>
                                <p class="task-item-status truncate" title="${safeSummary}">${safeSummary}</p>
                            </div>
                        </div>`;
                }
                return `${contentHtml}<div class="task-item-timestamp">${timeAgo}</div>`;
            }
        };
    }

    /**
     * [NEW] A generic handler to open/close any custom dropdown menu.
     * It uses data attributes to link triggers to panels.
     * @param {Event} event The click event.
     */
    _handleDropdownToggle(event) {
        const toggleButton = event.target.closest('[data-toggle="custom-select"]');
        
        // If the click is outside any toggle button, close all panels.
        if (!toggleButton) {
            this._closeAllDropdowns();
            return;
        }
        const targetSelector = toggleButton.dataset.target;
        const targetPanel = document.querySelector(targetSelector);
        if (!targetPanel) return;
        const isPanelOpen = !targetPanel.classList.contains('hidden');
        // First, close all other panels.
        this._closeAllDropdowns(targetPanel);
        // Then, toggle the state of the target panel.
        if (!isPanelOpen) {
            targetPanel.classList.remove('hidden');
        }
    }
    /**
     * [NEW] A helper utility to close all custom dropdown panels.
     * @param {HTMLElement} [excludePanel=null] An optional panel to exclude from closing.
     */
    _closeAllDropdowns(excludePanel = null) {
        const allPanels = document.querySelectorAll('.custom-select-panel');
        allPanels.forEach(panel => {
            if (panel !== excludePanel) {
                panel.classList.add('hidden');
            }
        });
    }

    /**
     * [NEW] Renders the content of the multifunction (export) dropdown menu.
     */
    _renderMultifunctionMenu() {
        const actions = [
            { action: 'export-all', text: '导出所有Key', icon: 'fa-file-export' },
            { action: 'export-valid', text: '导出有效Key', icon: 'fa-file-alt' },
            { action: 'export-invalid', text: '导出无效Key', icon: 'fa-file-excel' }
        ];
        const menuHtml = actions.map(item => {
            return `
                <button data-multifunction-action="${item.action}" class="menu-item whitespace-nowrap">
                    <i class="fas ${item.icon} menu-item-icon"></i>
                    <span>${item.text}</span>
                </button>
            `;
        }).join('');
        const menuWrapper = `<div class="py-1">${menuHtml}</div>`;
        if (this.elements.desktopMultifunctionPanel) {
            this.elements.desktopMultifunctionPanel.innerHTML = menuWrapper;
        }
        if (this.elements.mobileMultifunctionPanel) {
            this.elements.mobileMultifunctionPanel.innerHTML = menuWrapper;
        }
    }
    /**
     * [NEW] Handles clicks on any multifunction menu button.
     * @param {Event} event The click event.
     */
    async _handleMultifunctionMenuClick(event) {
        const button = event.target.closest('button[data-multifunction-action]');
        if (!button) return;
        event.preventDefault();
        this._closeAllDropdowns(); 
        const action = button.dataset.multifunctionAction;
        const groupId = this.state.activeGroupId;
        if (!groupId) {
            toastManager.show('请先选择一个分组。', 'warning');
            return;
        }
        let statuses = [];
        let filename = `${this.state.activeGroupName}_keys.txt`;
        switch (action) {
            case 'export-all':
                statuses = ['all'];
                filename = `${this.state.activeGroupName}_all_keys.txt`;
                break;
            case 'export-valid':
                statuses = ['active', 'cooldown'];
                filename = `${this.state.activeGroupName}_valid_keys.txt`;
                break;
            case 'export-invalid':
                statuses = ['disabled', 'banned'];
                filename = `${this.state.activeGroupName}_invalid_keys.txt`;
                break;
            default:
                return;
        }
        
        toastManager.show('正在准备导出数据...', 'info');
        try {
            const keys = await apiKeyManager.exportKeysForGroup(groupId, statuses);
            if (keys.length === 0) {
                toastManager.show('没有找到符合条件的Key可供导出。', 'warning');
                return;
            }
            this._triggerTextFileDownload(keys.join('\n'), filename);
            toastManager.show(`成功导出 ${keys.length} 个Key。`, 'success');
        } catch (error) {
            toastManager.show(`导出失败: ${error.message}`, 'error');
        }
    }
    /**
     * [NEW] A utility function to trigger a text file download in the browser.
     * @param {string} content The content of the file.
     * @param {string} filename The desired name of the file.
     */
    _triggerTextFileDownload(content, filename) {
        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }
}

export default ApiKeyList;