// 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, '"');

  }
  

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