// SearchEngine Frontend - Modern UI

const API_BASE_URL = 'http://120.76.41.98:6002';
document.getElementById('apiUrl').textContent = API_BASE_URL;

// State Management
let state = {
    query: '',
    currentPage: 1,
    pageSize: 20,
    totalResults: 0,
    filters: {},
    sortBy: '',
    sortOrder: 'desc',
    aggregations: null,
    lastSearchData: null
};

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    console.log('SearchEngine loaded');
    document.getElementById('searchInput').focus();
    
    // Setup price filter
    document.getElementById('priceFilter').addEventListener('change', function(e) {
        if (e.target.value) {
            togglePriceFilter(e.target.value);
        }
    });
});

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

// Toggle filters visibility
function toggleFilters() {
    const filterSection = document.getElementById('filterSection');
    filterSection.classList.toggle('hidden');
}

// Perform search
async function performSearch(page = 1) {
    const query = document.getElementById('searchInput').value.trim();
    
    if (!query) {
        alert('Please enter search keywords');
        return;
    }
    
    state.query = query;
    state.currentPage = page;
    state.pageSize = parseInt(document.getElementById('resultSize').value);
    
    const from = (page - 1) * state.pageSize;
    
    // Define aggregations
    const aggregations = {
        "category_stats": {
            "terms": {
                "field": "categoryName_keyword",
                "size": 15
            }
        },
        "brand_stats": {
            "terms": {
                "field": "brandName_keyword",
                "size": 15
            }
        },
        "supplier_stats": {
            "terms": {
                "field": "supplierName_keyword",
                "size": 10
            }
        },
        "price_ranges": {
            "range": {
                "field": "price",
                "ranges": [
                    {"key": "0-50", "to": 50},
                    {"key": "50-100", "from": 50, "to": 100},
                    {"key": "100-200", "from": 100, "to": 200},
                    {"key": "200+", "from": 200}
                ]
            }
        }
    };
    
    // 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',
            },
            body: JSON.stringify({
                query: query,
                size: state.pageSize,
                from: from,
                filters: Object.keys(state.filters).length > 0 ? state.filters : null,
                aggregations: aggregations,
                sort_by: state.sortBy || null,
                sort_order: state.sortOrder
            })
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        state.lastSearchData = data;
        state.totalResults = data.total;
        state.aggregations = data.aggregations;
        
        displayResults(data);
        displayAggregations(data.aggregations);
        displayPagination();
        displayQueryInfo(data.query_info);
        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.hits || data.hits.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.hits.forEach((hit) => {
        const source = hit._source;
        const score = hit._custom_score || hit._score;
        
        html += `
            <div class="product-card">
                <div class="product-image-wrapper">
                    ${source.imageUrl ? `
                        <img src="${escapeHtml(source.imageUrl)}" 
                             alt="${escapeHtml(source.name)}" 
                             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">
                    ${source.price ? `${source.price} ₽` : 'N/A'}
                </div>
                
                <div class="product-moq">
                    MOQ ${source.moq || 1} Box
                </div>
                
                <div class="product-quantity">
                    ${source.quantity || 'N/A'} pcs / Box
                </div>
                
                <div class="product-title">
                    ${escapeHtml(source.name || source.enSpuName || 'N/A')}
                </div>
                
                <div class="product-meta">
                    ${source.categoryName ? escapeHtml(source.categoryName) : ''}
                    ${source.brandName ? ' | ' + escapeHtml(source.brandName) : ''}
                </div>
            </div>
        `;
    });
    
    grid.innerHTML = html;
}

// Display aggregations as filter tags
function displayAggregations(aggregations) {
    if (!aggregations) return;
    
    // Category tags
    if (aggregations.category_stats && aggregations.category_stats.buckets) {
        const categoryTags = document.getElementById('categoryTags');
        let html = '';
        
        aggregations.category_stats.buckets.slice(0, 10).forEach(bucket => {
            const key = bucket.key;
            const count = bucket.doc_count;
            const isActive = state.filters.categoryName_keyword && 
                            state.filters.categoryName_keyword.includes(key);
            
            html += `
                <span class="filter-tag ${isActive ? 'active' : ''}" 
                      onclick="toggleFilter('categoryName_keyword', '${escapeAttr(key)}')">
                    ${escapeHtml(key)} (${count})
                </span>
            `;
        });
        
        categoryTags.innerHTML = html;
    }
    
    // Brand tags
    if (aggregations.brand_stats && aggregations.brand_stats.buckets) {
        const brandTags = document.getElementById('brandTags');
        let html = '';
        
        aggregations.brand_stats.buckets.slice(0, 10).forEach(bucket => {
            const key = bucket.key;
            const count = bucket.doc_count;
            const isActive = state.filters.brandName_keyword && 
                            state.filters.brandName_keyword.includes(key);
            
            html += `
                <span class="filter-tag ${isActive ? 'active' : ''}" 
                      onclick="toggleFilter('brandName_keyword', '${escapeAttr(key)}')">
                    ${escapeHtml(key)} (${count})
                </span>
            `;
        });
        
        brandTags.innerHTML = html;
    }
    
    // Supplier tags
    if (aggregations.supplier_stats && aggregations.supplier_stats.buckets) {
        const supplierTags = document.getElementById('supplierTags');
        let html = '';
        
        aggregations.supplier_stats.buckets.slice(0, 8).forEach(bucket => {
            const key = bucket.key;
            const count = bucket.doc_count;
            const isActive = state.filters.supplierName_keyword && 
                            state.filters.supplierName_keyword.includes(key);
            
            html += `
                <span class="filter-tag ${isActive ? 'active' : ''}" 
                      onclick="toggleFilter('supplierName_keyword', '${escapeAttr(key)}')">
                    ${escapeHtml(key)} (${count})
                </span>
            `;
        });
        
        supplierTags.innerHTML = html;
    }
}

// Toggle filter
function toggleFilter(field, value) {
    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
}

// Toggle price filter
function togglePriceFilter(value) {
    const priceRanges = {
        '0-50': { to: 50 },
        '50-100': { from: 50, to: 100 },
        '100-200': { from: 100, to: 200 },
        '200+': { from: 200 }
    };
    
    if (priceRanges[value]) {
        state.filters.price = priceRanges[value];
    }
    
    performSearch(1);
}

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

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

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

// Sort functions
function setSortBy(btn, field) {
    // Remove active from all
    document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
    
    // Set active
    btn.classList.add('active');
    
    if (field === '') {
        state.sortBy = '';
        state.sortOrder = 'desc';
    } else {
        state.sortBy = field;
    }
    
    performSearch(1);
}

function sortByField(field, order) {
    state.sortBy = field;
    state.sortOrder = order;
    
    // Update active state
    document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
    const btn = document.querySelector(`.sort-btn[data-sort="${field}"]`);
    if (btn) btn.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 query info
function displayQueryInfo(queryInfo) {
    if (!queryInfo) return;
    
    const queryInfoDiv = document.getElementById('queryInfo');
    
    let html = '<div class="info-grid">';
    
    html += `
        <div class="info-item">
            <strong>Original Query</strong>
            <span>${escapeHtml(queryInfo.original_query || 'N/A')}</span>
        </div>
        <div class="info-item">
            <strong>Rewritten Query</strong>
            <span>${escapeHtml(queryInfo.rewritten_query || 'N/A')}</span>
        </div>
        <div class="info-item">
            <strong>Detected Language</strong>
            <span>${getLanguageName(queryInfo.detected_language)}</span>
        </div>
        <div class="info-item">
            <strong>Domain</strong>
            <span>${escapeHtml(queryInfo.domain || 'default')}</span>
        </div>
    `;
    
    if (queryInfo.translations && Object.keys(queryInfo.translations).length > 0) {
        for (const [lang, translation] of Object.entries(queryInfo.translations)) {
            if (translation) {
                html += `
                    <div class="info-item">
                        <strong>Translation (${getLanguageName(lang)})</strong>
                        <span>${escapeHtml(translation)}</span>
                    </div>
                `;
            }
        }
    }
    
    if (queryInfo.has_vector) {
        html += `
            <div class="info-item">
                <strong>Semantic Search</strong>
                <span style="color: #27ae60;">✓ Enabled (Vector)</span>
            </div>
        `;
    }
    
    html += '</div>';
    
    queryInfoDiv.innerHTML = html;
}

// Helper functions
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

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

function getLanguageName(code) {
    const names = {
        'zh': '中文',
        'en': 'English',
        'ru': 'Русский',
        'ar': 'العربية',
        'ja': '日本語',
        'unknown': 'Unknown'
    };
    return names[code] || code;
}