// 等级设置页面的Tab系统JavaScript逻辑

// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
    initializeSidebar();
    initializeSidebarSearch();
    // 默认打开等级设置Tab
    openLevelSettingsTab();
});

// 打开等级设置Tab（从member-tabs.js调用）
function openLevelSettingsTab() {
    if (typeof memberTabManager !== 'undefined') {
        memberTabManager.showDefaultContent();
        // 创建等级设置tab
        const content = generateLevelSettingsContent();
        memberTabManager.createTab('level-settings', '等级设置', content, false);
    }
}

// 生成等级设置表格内容
function generateLevelSettingsContent() {
    return `
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-medium text-gray-900">等级设置</h2>
            </div>
            
            <!-- 摊位名称筛选器 -->
            <div class="mb-6 flex items-center gap-4">
                <div class="flex-1 max-w-md">
                    <label class="block text-sm font-medium text-gray-700 mb-2">摊位名称</label>
                    <div class="relative">
                        <button id="stall-dropdown-btn" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white text-left flex items-center justify-between" onclick="toggleStallDropdown()">
                            <span id="dropdown-text">请选择摊位名称...</span>
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div id="stall-dropdown-list" class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg hidden">
                            <label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="时尚服装店" class="mr-2" onchange="updateSelectedStalls()">
                                时尚服装店
                            </label>
                            <label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="数码电子城" class="mr-2" onchange="updateSelectedStalls()">
                                数码电子城
                            </label>
                            <label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="美食餐厅" class="mr-2" onchange="updateSelectedStalls()">
                                美食餐厅
                            </label>
                            <label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="家居生活馆" class="mr-2" onchange="updateSelectedStalls()">
                                家居生活馆
                            </label>
                            <label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="运动健身店" class="mr-2" onchange="updateSelectedStalls()">
                                运动健身店
                            </label>
                        </div>
                        <div id="selected-stalls" class="mt-2 flex flex-wrap gap-2"></div>
                    </div>
                </div>
                <div class="mt-7 flex gap-3">
                    <button id="query-btn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors" onclick="filterStallTable()">
                        查询
                    </button>
                    <button id="batch-edit-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" onclick="openBatchLevelEditTab()">
                        批量会员等级编辑
                    </button>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                摊位名称
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                是否启用会员
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                会员等级
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">时尚服装店</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('时尚服装店')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数码电子城</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('数码电子城')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">美食餐厅</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('美食餐厅')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">家居生活馆</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('家居生活馆')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">运动健身店</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer" checked onchange="toggleSwitch(this)">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">lv1, lv2, lv3, lv4</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button class="text-green-600 hover:text-green-900 text-sm font-medium" onclick="openLevelDetailTab('运动健身店')">
                                    设置等级明细
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    `;
}

// 摊位筛选相关功能
let selectedStalls = [];
let dropdownOpen = false;

function toggleStallDropdown() {
    const dropdown = document.getElementById('stall-dropdown-list');
    const button = document.getElementById('stall-dropdown-btn');
    
    if (dropdown && button) {
        dropdownOpen = !dropdownOpen;
        if (dropdownOpen) {
            dropdown.classList.remove('hidden');
            // 添加点击外部关闭功能
            setTimeout(() => {
                document.addEventListener('click', closeDropdownOnClickOutside);
            }, 0);
        } else {
            dropdown.classList.add('hidden');
            document.removeEventListener('click', closeDropdownOnClickOutside);
        }
    }
}

function closeDropdownOnClickOutside(event) {
    const dropdown = document.getElementById('stall-dropdown-list');
    const button = document.getElementById('stall-dropdown-btn');
    
    if (dropdown && button && !dropdown.contains(event.target) && !button.contains(event.target)) {
        dropdown.classList.add('hidden');
        dropdownOpen = false;
        document.removeEventListener('click', closeDropdownOnClickOutside);
    }
}

function updateSelectedStalls() {
    const checkboxes = document.querySelectorAll('#stall-dropdown-list input[type="checkbox"]');
    selectedStalls = [];
    
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            selectedStalls.push(checkbox.value);
        }
    });
    
    updateDropdownText();
    updateSelectedStallsDisplay();
}

function updateDropdownText() {
    const dropdownText = document.getElementById('dropdown-text');
    if (dropdownText) {
        if (selectedStalls.length === 0) {
            dropdownText.textContent = '请选择摊位名称...';
        } else if (selectedStalls.length === 1) {
            dropdownText.textContent = selectedStalls[0];
        } else {
            dropdownText.textContent = `已选择 ${selectedStalls.length} 个摊位`;
        }
    }
}

function updateSelectedStallsDisplay() {
    const selectedDiv = document.getElementById('selected-stalls');
    if (!selectedDiv) return;
    
    selectedDiv.innerHTML = '';
    
    selectedStalls.forEach(stall => {
        const tag = document.createElement('span');
        tag.className = 'inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-green-100 text-green-800';
        tag.innerHTML = `
            ${stall}
            <button type="button" class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-green-200" onclick="removeSelectedStall('${stall}')">
                <svg class="w-2 h-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
            </button>
        `;
        selectedDiv.appendChild(tag);
    });
}

function removeSelectedStall(stallName) {
    selectedStalls = selectedStalls.filter(stall => stall !== stallName);
    
    // 更新checkbox状态
    const checkboxes = document.querySelectorAll('#stall-dropdown-list input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        if (checkbox.value === stallName) {
            checkbox.checked = false;
        }
    });
    
    updateDropdownText();
    updateSelectedStallsDisplay();
}

function filterStallTable() {
    const tableRows = document.querySelectorAll('#tab-content-area tbody tr');
    
    if (selectedStalls.length === 0) {
        // 如果没有选择任何摊位，显示所有行
        tableRows.forEach(row => {
            row.style.display = '';
        });
        showNotification('已显示所有摊位', 'info');
    } else {
        // 根据选择的摊位筛选表格行
        let visibleCount = 0;
        tableRows.forEach(row => {
            const stallNameCell = row.querySelector('td:first-child');
            if (stallNameCell) {
                const stallName = stallNameCell.textContent.trim();
                if (selectedStalls.includes(stallName)) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            }
        });
        showNotification(`已筛选显示 ${visibleCount} 个摊位`, 'success');
    }
}

// 导出函数
window.openLevelSettingsTab = openLevelSettingsTab;
window.generateLevelSettingsContent = generateLevelSettingsContent;
window.openBatchLevelEditTab = openBatchLevelEditTab;
window.toggleStallDropdown = toggleStallDropdown;
window.updateSelectedStalls = updateSelectedStalls;
window.removeSelectedStall = removeSelectedStall;
window.filterStallTable = filterStallTable;