// SearchEngine Frontend - Modern UI (Multi-Tenant)

const API_BASE_URL = window.API_BASE_URL || 'http://localhost:6002';
if (document.getElementById('apiUrl')) {
    document.getElementById('apiUrl').textContent = API_BASE_URL;
}

// Get tenant ID from select
function getTenantId() {
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect) {
        return tenantSelect.value.trim();
    }
    return '170'; // Default fallback
}

// Get sku_filter_dimension (as list) from input
function getSkuFilterDimension() {
    const skuFilterInput = document.getElementById('skuFilterDimension');
    if (skuFilterInput) {
        const value = skuFilterInput.value.trim();
        if (!value.length) {
            return null;
        }
        // 支持用逗号分隔多个维度，例如：color,size 或 option1,color
        const parts = value.split(',').map(v => v.trim()).filter(v => v.length > 0);
        return parts.length > 0 ? parts : null;
    }
    return null;
}

// State Management
let state = {
    query: '',
    currentPage: 1,
    pageSize: 20,
    totalResults: 0,
    filters: {},
    rangeFilters: {},
    sortBy: '',
    sortOrder: 'desc',
    facets: null,
    lastSearchData: null,
    debug: true  // Always enable debug mode for test frontend
};

// Initialize
function initializeApp() {
    // 初始化租户下拉框和分面面板
    console.log('Initializing app...');
    initTenantSelect();
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.focus();
    }
}

// 在 DOM 加载完成后初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeApp);
} else {
    // DOM 已经加载完成，直接执行
    initializeApp();
}

// 备用初始化：如果上面的初始化失败，在 window.onload 时再试一次
window.addEventListener('load', function() {
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.options.length === 0) {
        console.log('Retrying tenant select initialization on window.load...');
        initTenantSelect();
    }
});

// 最后尝试：延迟执行，确保所有脚本都已加载
setTimeout(function() {
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.options.length === 0) {
        console.log('Final retry: Initializing tenant select after delay...');
        if (typeof getAvailableTenantIds === 'function') {
            initTenantSelect();
        } else {
            console.error('getAvailableTenantIds still not available after delay');
        }
    }
}, 100);

// Keyboard handler
function handleKeyPress(event) {
    if (event.key === 'Enter') {
        performSearch();
    }
}

// 初始化租户下拉框
function initTenantSelect() {
    const tenantSelect = document.getElementById('tenantSelect');
    if (!tenantSelect) {
        console.error('tenantSelect element not found');
        return;
    }
    
    // 检查函数是否可用
    if (typeof getAvailableTenantIds !== 'function') {
        console.error('getAvailableTenantIds function not found. Make sure tenant_facets_config.js is loaded before app.js');
        return;
    }
    
    const availableTenants = getAvailableTenantIds();
    console.log('Available tenants:', availableTenants);
    
    if (!availableTenants || availableTenants.length === 0) {
        console.warn('No tenant IDs found in configuration');
        return;
    }
    
    // 清空现有选项
    tenantSelect.innerHTML = '';
    
    // 添加选项
    availableTenants.forEach(tenantId => {
        const option = document.createElement('option');
        option.value = tenantId;
        option.textContent = tenantId;
        tenantSelect.appendChild(option);
    });
    
    // 设置默认值
    if (availableTenants.length > 0) {
        tenantSelect.value = availableTenants.includes('170') ? '170' : availableTenants[0];
    }
    
    // 初始化分面面板
    renderFacetsPanel();
}

// 租户ID改变时的处理
function onTenantIdChange() {
    renderFacetsPanel();
    // 清空当前的分面数据
    clearFacetsData();
}

// 根据当前 tenant_id 渲染分面面板结构
function renderFacetsPanel() {
    const tenantId = getTenantId();
    const config = getTenantFacetsConfig(tenantId);
    const container = document.getElementById('specificationFacetsContainer');
    
    if (!container) return;
    
    // 清空现有规格分面
    container.innerHTML = '';
    
    // 为每个规格字段创建分面行
    config.specificationFields.forEach(specField => {
        const row = document.createElement('div');
        row.className = 'filter-row';
        row.setAttribute('data-facet-field', specField.field);
        
        row.innerHTML = `
            <div class="filter-label">${escapeHtml(specField.label)}:</div>
            <div class="filter-tags" id="${specField.containerId}"></div>
        `;
        
        container.appendChild(row);
    });
}

// 清空所有分面数据（保留结构）
function clearFacetsData() {
    const allTagContainers = document.querySelectorAll('.filter-tags');
    allTagContainers.forEach(container => {
        container.innerHTML = '';
    });
}

// Escape HTML to prevent XSS
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Perform search
async function performSearch(page = 1) {
    const query = document.getElementById('searchInput').value.trim();
    const tenantId = getTenantId();
    const skuFilterDimension = getSkuFilterDimension();
    
    if (!query) {
        alert('Please enter search keywords');
        return;
    }
    
    if (!tenantId) {
        alert('Please enter tenant ID');
        return;
    }
    
    state.query = query;
    state.currentPage = page;
    state.pageSize = parseInt(document.getElementById('resultSize').value);
    
    const from = (page - 1) * state.pageSize;
    
    // Define facets
    // 使用 disjunctive 控制分面行为：
    // - 类目（category1/2/3）使用标准模式（disjunctive: false），用于层级下钻
    // - 规格（color/size/material）使用 Multi-Select 模式（disjunctive: true）
    const facets = [];

    // 一级类目分面（始终存在，用于顶层类目导航）
    facets.push({
        field: "category1_name",
        size: 15,
        type: "terms",
        disjunctive: false
    });

    // 如果已选择一级类目，则在该过滤条件下请求二级类目分面
    if (state.filters.category1_name && state.filters.category1_name.length > 0) {
        facets.push({
            field: "category2_name",
            size: 15,
            type: "terms",
            disjunctive: false
        });
    }

    // 如果已选择二级类目，则在进一步过滤条件下请求三级类目分面
    if (state.filters.category2_name && state.filters.category2_name.length > 0) {
        facets.push({
            field: "category3_name",
            size: 15,
            type: "terms",
            disjunctive: false
        });
    }

    // 规格相关分面（Multi-Select 模式）
    // 根据 tenant_id 使用不同的配置
    const tenantFacetsConfig = getTenantFacetsConfig(tenantId);
    tenantFacetsConfig.specificationFields.forEach(specField => {
        // 只发送查询参数，不包含显示相关的配置（label, containerId）
        facets.push({
            field: specField.field,
            size: specField.size,
            type: specField.type,
            disjunctive: specField.disjunctive
        });
    });
    
    // Show loading
    document.getElementById('loading').style.display = 'block';
    document.getElementById('productGrid').innerHTML = '';
    
    try {
        const response = await fetch(`${API_BASE_URL}/search/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Tenant-ID': tenantId,
            },
            body: JSON.stringify({
                query: query,
                size: state.pageSize,
                from: from,
                filters: Object.keys(state.filters).length > 0 ? state.filters : null,
                range_filters: Object.keys(state.rangeFilters).length > 0 ? state.rangeFilters : null,
                facets: facets,
                sort_by: state.sortBy || null,
                sort_order: state.sortOrder,
                sku_filter_dimension: skuFilterDimension,
                debug: state.debug
            })
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        state.lastSearchData = data;
        state.totalResults = data.total;
        state.facets = data.facets;
        
        displayResults(data);
        displayFacets(data.facets);
        displayPagination();
        displayDebugInfo(data);
        updateProductCount(data.total);
        updateClearFiltersButton();
        
    } catch (error) {
        console.error('Search error:', error);
        document.getElementById('productGrid').innerHTML = `
            <div class="error-message">
                <strong>Search Error:</strong> ${error.message}
                <br><br>
                <small>Please ensure backend service is running (${API_BASE_URL})</small>
            </div>
        `;
    } finally {
        document.getElementById('loading').style.display = 'none';
    }
}

// Display results in grid
function displayResults(data) {
    const grid = document.getElementById('productGrid');
    
    if (!data.results || data.results.length === 0) {
        grid.innerHTML = `
            <div class="no-results" style="grid-column: 1 / -1;">
                <h3>No Results Found</h3>
                <p>Try different keywords or filters</p>
            </div>
        `;
        return;
    }
    
    let html = '';
    
    data.results.forEach((result) => {
        const product = result;
        const title = product.title || product.name || 'N/A';
        const price = product.min_price || product.price || 'N/A';
        const imageUrl = product.image_url || product.imageUrl || '';
        const category = product.category || product.categoryName || '';
        const vendor = product.vendor || product.brandName || '';
        
        html += `
            <div class="product-card">
                <div class="product-image-wrapper">
                    ${imageUrl ? `
                        <img src="${escapeHtml(imageUrl)}" 
                             alt="${escapeHtml(title)}" 
                             class="product-image"
                             onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22%3E%3Crect fill=%22%23f0f0f0%22 width=%22100%22 height=%22100%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 font-size=%2214%22 text-anchor=%22middle%22 dy=%22.3em%22 fill=%22%23999%22%3ENo Image%3C/text%3E%3C/svg%3E'">
                    ` : `
                        <div style="color: #ccc; font-size: 14px;">No Image</div>
                    `}
                </div>
                
                <div class="product-price">
                    ${price !== 'N/A' ? `¥${price}` : 'N/A'}
                </div>
                
                <div class="product-title">
                    ${escapeHtml(title)}
                </div>
                
                <div class="product-meta">
                    ${category ? escapeHtml(category) : ''}
                    ${vendor ? ' | ' + escapeHtml(vendor) : ''}
                </div>
            </div>
        `;
    });
    
    grid.innerHTML = html;
}

// Display facets as filter tags (一级分类 + 三个属性分面)
function displayFacets(facets) {
    if (!facets || !Array.isArray(facets)) {
        return;
    }
    
    const tenantId = getTenantId();
    
    facets.forEach((facet) => {
        // 根据配置获取分面显示信息
        const displayConfig = getFacetDisplayConfig(tenantId, facet.field);
        
        if (!displayConfig) {
            // 如果没有配置，跳过该分面
            return;
        }
        
        const containerId = displayConfig.containerId;
        const maxDisplay = displayConfig.maxDisplay;
        
        const container = document.getElementById(containerId);
        if (!container) {
            return;
        }
        
        // 检查values是否存在且是数组
        if (!facet.values || !Array.isArray(facet.values) || facet.values.length === 0) {
            container.innerHTML = '';
            return;
        }
        
        let html = '';
        
        // 渲染分面值
        facet.values.slice(0, maxDisplay).forEach((facetValue) => {
            if (!facetValue || typeof facetValue !== 'object') {
                return;
            }
            
            const value = facetValue.value;
            const count = facetValue.count;
            
            // 允许value为0或空字符串，但不允许undefined/null
            if (value === undefined || value === null) {
                return;
            }
            
            // 检查是否已选中
            let selected = false;
            if (facet.field.startsWith('specifications.')) {
                // 检查specifications过滤
                const specName = facet.field.split('.')[1];
                if (state.filters.specifications) {
                    const specs = Array.isArray(state.filters.specifications) 
                        ? state.filters.specifications 
                        : [state.filters.specifications];
                    selected = specs.some(spec => spec && spec.name === specName && spec.value === value);
                }
            } else {
                // 检查普通字段过滤
                if (state.filters[facet.field]) {
                    selected = state.filters[facet.field].includes(value);
                }
            }
            
            html += `
                <span class="filter-tag ${selected ? 'active' : ''}" 
                      onclick="toggleFilter('${escapeAttr(facet.field)}', '${escapeAttr(String(value))}')">
                    ${escapeHtml(String(value))} (${count || 0})
                </span>
            `;
        });
        
        container.innerHTML = html;
    });
}

// Toggle filter (支持specifications嵌套过滤)
function toggleFilter(field, value) {
    // 处理specifications属性过滤 (specifications.color, specifications.size, specifications.material)
    if (field.startsWith('specifications.')) {
        const specName = field.split('.')[1]; // 提取name (color, size, material)
        
        // 初始化specifications过滤
        if (!state.filters.specifications) {
            state.filters.specifications = [];
        }
        
        // 确保是数组格式
        if (!Array.isArray(state.filters.specifications)) {
            // 如果已经是单个对象，转换为数组
            state.filters.specifications = [state.filters.specifications];
        }
        
        // 查找是否已存在相同的name和value组合
        const existingIndex = state.filters.specifications.findIndex(
            spec => spec.name === specName && spec.value === value
        );
        
        if (existingIndex > -1) {
            // 移除
            state.filters.specifications.splice(existingIndex, 1);
            if (state.filters.specifications.length === 0) {
                delete state.filters.specifications;
            } else if (state.filters.specifications.length === 1) {
                // 如果只剩一个，可以保持为数组，或转换为单个对象（API都支持）
                // 这里保持为数组，更一致
            }
        } else {
            // 添加
            state.filters.specifications.push({ name: specName, value: value });
        }
    } else {
        // 处理普通字段过滤 (category1_name 等)
        // 对类目字段使用互斥单选 + 层级重置逻辑
        const isCategoryField =
            field === 'category1_name' ||
            field === 'category2_name' ||
            field === 'category3_name';

        if (isCategoryField) {
            // 点击已选中的类目 -> 取消该层和以下层级
            const currentValues = state.filters[field] || [];
            const isAlreadySelected = currentValues.includes(value);

            if (isAlreadySelected) {
                delete state.filters[field];
                if (field === 'category1_name') {
                    delete state.filters.category2_name;
                    delete state.filters.category3_name;
                } else if (field === 'category2_name') {
                    delete state.filters.category3_name;
                }
            } else {
                // 选择新的类目值：该层级单选，下级全部重置
                state.filters[field] = [value];
                if (field === 'category1_name') {
                    delete state.filters.category2_name;
                    delete state.filters.category3_name;
                } else if (field === 'category2_name') {
                    delete state.filters.category3_name;
                }
            }
        } else {
            // 其他普通字段维持原有多选行为
            if (!state.filters[field]) {
                state.filters[field] = [];
            }
            
            const index = state.filters[field].indexOf(value);
            if (index > -1) {
                state.filters[field].splice(index, 1);
                if (state.filters[field].length === 0) {
                    delete state.filters[field];
                }
            } else {
                state.filters[field].push(value);
            }
        }
    }
    
    performSearch(1); // Reset to page 1
}

// Handle price filter (重构版 - 使用 rangeFilters)
function handlePriceFilter(value) {
    if (!value) {
        delete state.rangeFilters.min_price;
    } else {
        const priceRanges = {
            '0-50': { lt: 50 },
            '50-100': { gte: 50, lt: 100 },
            '100-200': { gte: 100, lt: 200 },
            '200+': { gte: 200 }
        };
        
        if (priceRanges[value]) {
            state.rangeFilters.min_price = priceRanges[value];
        }
    }
    
    performSearch(1);
}

// Handle time filter (重构版 - 使用 rangeFilters)
function handleTimeFilter(value) {
    if (!value) {
        delete state.rangeFilters.create_time;
    } else {
        const now = new Date();
        let fromDate;
        
        switch(value) {
            case 'today':
                fromDate = new Date(now.setHours(0, 0, 0, 0));
                break;
            case 'week':
                fromDate = new Date(now.setDate(now.getDate() - 7));
                break;
            case 'month':
                fromDate = new Date(now.setMonth(now.getMonth() - 1));
                break;
            case '3months':
                fromDate = new Date(now.setMonth(now.getMonth() - 3));
                break;
            case '6months':
                fromDate = new Date(now.setMonth(now.getMonth() - 6));
                break;
        }
        
        if (fromDate) {
            state.rangeFilters.create_time = {
                gte: fromDate.toISOString()
            };
        }
    }
    
    performSearch(1);
}

// Clear all filters
function clearAllFilters() {
    state.filters = {};
    state.rangeFilters = {};
    document.getElementById('priceFilter').value = '';
    document.getElementById('timeFilter').value = '';
    performSearch(1);
}

// Update clear filters button visibility
function updateClearFiltersButton() {
    const btn = document.getElementById('clearFiltersBtn');
    if (Object.keys(state.filters).length > 0 || Object.keys(state.rangeFilters).length > 0) {
        btn.style.display = 'inline-block';
    } else {
        btn.style.display = 'none';
    }
}

// Update product count
function updateProductCount(total) {
    document.getElementById('productCount').textContent = `${total.toLocaleString()} SPUs found`;
}

// Sort functions
function setSortByDefault() {
    // Remove active from all buttons and arrows
    document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.arrow-up, .arrow-down').forEach(a => a.classList.remove('active'));
    
    // Set default button active
    const defaultBtn = document.querySelector('.sort-btn[data-sort=""]');
    if (defaultBtn) defaultBtn.classList.add('active');
    
    state.sortBy = '';
    state.sortOrder = 'desc';
    
    performSearch(1);
}

function sortByField(field, order) {
    state.sortBy = field;
    state.sortOrder = order;
    
    // Remove active from all buttons (but keep "By default" if no sort)
    document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
    
    // Remove active from all arrows
    document.querySelectorAll('.arrow-up, .arrow-down').forEach(a => a.classList.remove('active'));
    
    // Add active to clicked arrow
    const activeArrow = document.querySelector(`.arrow-up[data-field="${field}"][data-order="${order}"], .arrow-down[data-field="${field}"][data-order="${order}"]`);
    if (activeArrow) {
        activeArrow.classList.add('active');
    }
    
    performSearch(state.currentPage);
}

// Pagination
function displayPagination() {
    const paginationDiv = document.getElementById('pagination');
    
    if (state.totalResults <= state.pageSize) {
        paginationDiv.style.display = 'none';
        return;
    }
    
    paginationDiv.style.display = 'flex';
    
    const totalPages = Math.ceil(state.totalResults / state.pageSize);
    const currentPage = state.currentPage;
    
    let html = `
        <button class="page-btn" onclick="goToPage(${currentPage - 1})" 
                ${currentPage === 1 ? 'disabled' : ''}>
            ← Previous
        </button>
    `;
    
    // Page numbers
    const maxVisible = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
    let endPage = Math.min(totalPages, startPage + maxVisible - 1);
    
    if (endPage - startPage < maxVisible - 1) {
        startPage = Math.max(1, endPage - maxVisible + 1);
    }
    
    if (startPage > 1) {
        html += `<button class="page-btn" onclick="goToPage(1)">1</button>`;
        if (startPage > 2) {
            html += `<span class="page-info">...</span>`;
        }
    }
    
    for (let i = startPage; i <= endPage; i++) {
        html += `
            <button class="page-btn ${i === currentPage ? 'active' : ''}" 
                    onclick="goToPage(${i})">
                ${i}
            </button>
        `;
    }
    
    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            html += `<span class="page-info">...</span>`;
        }
        html += `<button class="page-btn" onclick="goToPage(${totalPages})">${totalPages}</button>`;
    }
    
    html += `
        <button class="page-btn" onclick="goToPage(${currentPage + 1})" 
                ${currentPage === totalPages ? 'disabled' : ''}>
            Next →
        </button>
    `;
    
    html += `
        <span class="page-info">
            Page ${currentPage} of ${totalPages} (${state.totalResults.toLocaleString()} results)
        </span>
    `;
    
    paginationDiv.innerHTML = html;
}

function goToPage(page) {
    const totalPages = Math.ceil(state.totalResults / state.pageSize);
    if (page < 1 || page > totalPages) return;
    
    performSearch(page);
    
    // Scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// Display debug info
function displayDebugInfo(data) {
    const debugInfoDiv = document.getElementById('debugInfo');
    
    if (!state.debug || !data.debug_info) {
        // If debug mode is off or no debug info, show basic query info
        if (data.query_info) {
            let html = '<div style="padding: 10px;">';
            html += `<div><strong>original_query:</strong> ${escapeHtml(data.query_info.original_query || 'N/A')}</div>`;
            html += `<div><strong>detected_language:</strong> ${data.query_info.detected_languag}</div>`;
            html += '</div>';
            debugInfoDiv.innerHTML = html;
        } else {
            debugInfoDiv.innerHTML = '';
        }
        return;
    }
    
    // Display comprehensive debug info when debug mode is on
    const debugInfo = data.debug_info;
    let html = '<div style="padding: 10px; font-family: monospace; font-size: 12px;">';
    
    // Query Analysis
    if (debugInfo.query_analysis) {
        html += '<div style="margin-bottom: 15px;"><strong style="font-size: 14px;">Query Analysis:</strong>';
        html += `<div>original_query: ${escapeHtml(debugInfo.query_analysis.original_query || 'N/A')}</div>`;
        html += `<div>query_normalized: ${escapeHtml(debugInfo.query_analysis.query_normalized || 'N/A')}</div>`;
        html += `<div>rewritten_query: ${escapeHtml(debugInfo.query_analysis.rewritten_query || 'N/A')}</div>`;
        html += `<div>detected_language: ${debugInfo.query_analysis.detected_language}</div>`;
        html += `<div>domain: ${escapeHtml(debugInfo.query_analysis.domain || 'default')}</div>`;
        html += `<div>is_simple_query: ${debugInfo.query_analysis.is_simple_query ? 'yes' : 'no'}</div>`;
        
        if (debugInfo.query_analysis.translations && Object.keys(debugInfo.query_analysis.translations).length > 0) {
            html += '<div>translations: ';
            for (const [lang, translation] of Object.entries(debugInfo.query_analysis.translations)) {
                if (translation) {
                    html += `${lang}: ${escapeHtml(translation)}; `;
                }
            }
            html += '</div>';
        }
        
        if (debugInfo.query_analysis.boolean_ast) {
            html += `<div>boolean_ast: ${escapeHtml(debugInfo.query_analysis.boolean_ast)}</div>`;
        }
        
        html += `<div>has_vector: ${debugInfo.query_analysis.has_vector ? 'enabled' : 'disabled'}</div>`;
        html += '</div>';
    }
    
    // Feature Flags
    if (debugInfo.feature_flags) {
        html += '<div style="margin-bottom: 15px;"><strong style="font-size: 14px;">Feature Flags:</strong>';
        html += `<div>translation_enabled: ${debugInfo.feature_flags.translation_enabled ? 'enabled' : 'disabled'}</div>`;
        html += `<div>embedding_enabled: ${debugInfo.feature_flags.embedding_enabled ? 'enabled' : 'disabled'}</div>`;
        html += `<div>rerank_enabled: ${debugInfo.feature_flags.rerank_enabled ? 'enabled' : 'disabled'}</div>`;
        html += '</div>';
    }
    
    // ES Response
    if (debugInfo.es_response) {
        html += '<div style="margin-bottom: 15px;"><strong style="font-size: 14px;">ES Response:</strong>';
        html += `<div>took_ms: ${debugInfo.es_response.took_ms}ms</div>`;
        html += `<div>total_hits: ${debugInfo.es_response.total_hits}</div>`;
        html += `<div>max_score: ${debugInfo.es_response.max_score?.toFixed(3) || 0}</div>`;
        html += '</div>';
    }
    
    // Stage Timings
    if (debugInfo.stage_timings) {
        html += '<div style="margin-bottom: 15px;"><strong style="font-size: 14px;">Stage Timings:</strong>';
        for (const [stage, duration] of Object.entries(debugInfo.stage_timings)) {
            html += `<div>${stage}: ${duration.toFixed(2)}ms</div>`;
        }
        html += '</div>';
    }
    
    // ES Query
    if (debugInfo.es_query) {
        html += '<div style="margin-bottom: 15px;"><strong style="font-size: 14px;">ES Query DSL:</strong>';
        html += `<pre style="background: #f5f5f5; padding: 10px; overflow: auto; max-height: 400px;">${escapeHtml(customStringify(debugInfo.es_query))}</pre>`;
        html += '</div>';
    }
    
    html += '</div>';
    debugInfoDiv.innerHTML = html;
}

// Custom JSON stringify that compresses numeric arrays (like embeddings) to single line
function customStringify(obj) {
    return JSON.stringify(obj, (key, value) => {
        if (Array.isArray(value)) {
            // Only collapse arrays that contain numbers (like embeddings)
            if (value.every(item => typeof item === 'number')) {
                return JSON.stringify(value);
            }
        }
        return value;
    }, 2).replace(/"\[/g, '[').replace(/\]"/g, ']');
}

// Helper functions
function escapeAttr(text) {
    if (!text) return '';
    return text.replace(/'/g, "\\'").replace(/"/g, '&quot;');
}

function formatDate(dateStr) {
    if (!dateStr) return '';
    try {
        const date = new Date(dateStr);
        return date.toLocaleDateString('zh-CN');
    } catch {
        return dateStr;
    }
}