<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Search - anipop-demo (Redesign)</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">
  <!-- Shared Header Styles -->
  <link href="/shared/header.css" rel="stylesheet">
  <style>
    /* Theme & base (kept similar to original) */
    :root {
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --primary-light: #3b82f6;
      --dark: #1e293b;
      --darker: #0f172a;
      --light: #f8fafc;
      --gray: #64748b;
      --border: #334155;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Vazir', 'Poppins', sans-serif;
      background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
      color: var(--light);
      min-height: 100vh;
      line-height: 1.5;
      font-size: 14px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 12px;
    }
    
    header {
      text-align: center;
      margin-bottom: 15px;
    }
    
    .logo {
      font-size: 1.6rem;
      margin-bottom: 3px;
      color: var(--primary);
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    
    .logo i {
      color: var(--primary);
      font-size: 1.4rem;
    }
    
    .tagline {
      font-size: 0.75rem;
      opacity: 0.7;
      margin-bottom: 3px;
    }
    
    .back-button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      background: var(--dark);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--light);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.75rem;
      transition: all 0.2s ease;
      margin-bottom: 12px;
    }
    
    .back-button:hover {
      background: var(--primary);
      border-color: var(--primary);
    }
    
    .search-header {
      margin-bottom: 15px;
    }
    
    .search-header h1 {
      font-size: 1.2rem;
      margin-bottom: 8px;
      color: var(--primary);
    }
    
    .search-form {
      display: flex;
      gap: 6px;
      margin-bottom: 15px;
      max-width: 100%;
    }
    
    .search-input {
      flex: 1;
      padding: 8px 12px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--dark);
      color: white;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      min-width: 0;
    }
    
    .search-button {
      padding: 8px 16px;
      background: var(--primary);
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      transition: background 0.2s ease;
      white-space: nowrap;
    }
    
    .search-button:hover {
      background: var(--primary-dark);
    }
    
    .search-stats {
      margin-bottom: 12px;
      font-size: 0.8rem;
      opacity: 0.8;
    }
    
    .active-filters {
      margin-bottom: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .filter-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      background: var(--primary);
      border-radius: 3px;
      font-size: 0.75rem;
      color: white;
    }
    
    .filter-tag .remove {
      cursor: pointer;
      opacity: 0.8;
    }
    
    .filter-tag .remove:hover {
      opacity: 1;
    }
    
    /* ===== NEW: Top bar with most relevant songs ===== */
    .top-bar-wrap {
      margin-bottom: 20px;
    }
    
    .top-bar-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .top-bar-title h3 {
      margin: 0;
      color: var(--primary);
      font-size: 1rem;
    }
    
    .top-bar-info {
      font-size: 0.8rem;
      opacity: 0.8;
    }
    
    .top-bar {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 12px;
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(30, 41, 59, 0.5));
      border: 1px solid rgba(37, 99, 235, 0.2);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    /* Top item (for the top 10) */
    .top-item {
      flex: 0 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      background: rgba(20, 20, 25, 0.8);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
      min-height: 120px;
      width: 140px;
    }
    
    .top-item:hover {
      transform: translateY(-5px);
      border-color: var(--primary);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }
    
    .top-cover-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(3px) brightness(0.4);
      transform: scale(1.05);
      z-index: 0;
      pointer-events: none;
    }
    
    .top-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding: 10px;
      height: 100%;
      justify-content: space-between;
    }
    
    .top-cover {
      width: 50px;
      height: 50px;
      object-fit: cover;
      border-radius: 6px;
      margin-bottom: 8px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      align-self: center;
    }
    
    .top-info {
      flex: 1;
      text-align: center;
    }
    
    .top-title {
      font-weight: 600;
      font-size: 0.8rem;
      margin-bottom: 4px;
      color: white;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .top-artist {
      opacity: 0.9;
      font-size: 0.7rem;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    
    .top-relevance {
      font-size: 0.7rem;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 12px;
      display: inline-block;
      margin-top: 4px;
    }
    
    /* Special styles for top 3 items */
    .top-item.top-1 {
      width: 180px;
      min-height: 160px;
      border: 2px solid gold;
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    }
    
    .top-item.top-1 .top-cover {
      width: 70px;
      height: 70px;
      border: 2px solid gold;
    }
    
    .top-item.top-1 .top-title {
      font-size: 0.9rem;
      font-weight: 700;
    }
    
    .top-item.top-2 {
      width: 160px;
      min-height: 140px;
      border: 2px solid silver;
      box-shadow: 0 0 12px rgba(192, 192, 192, 0.3);
    }
    
    .top-item.top-2 .top-cover {
      width: 60px;
      height: 60px;
      border: 2px solid silver;
    }
    
    .top-item.top-2 .top-title {
      font-weight: 700;
    }
    
    .top-item.top-3 {
      width: 150px;
      min-height: 130px;
      border: 2px solid #cd7f32;
      box-shadow: 0 0 10px rgba(205, 127, 50, 0.3);
    }
    
    .top-item.top-3 .top-cover {
      width: 55px;
      height: 55px;
      border: 2px solid #cd7f32;
    }
    
    .top-item.top-3 .top-title {
      font-weight: 700;
    }
    
    /* Search sections */
    .search-section {
      margin-bottom: 20px;
    }
    
    .search-section h3 {
      margin-bottom: 10px;
      color: var(--primary);
      font-size: 1rem;
      border-bottom: 1px solid var(--primary);
      padding-bottom: 4px;
    }
    
    /* Categories and subcategories - smaller and compact */
    .categories-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }
    
    .category-item, .subcategory-item {
      background: var(--dark);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.8rem;
      position: relative;
      overflow: hidden;
    }
    
    .category-item:hover, .subcategory-item:hover {
      background: var(--primary);
      border-color: var(--primary);
    }
    
    .category-name, .subcategory-name {
      font-weight: 600;
      color: var(--light);
      margin-bottom: 2px;
      font-size: 0.85rem;
    }
    
    .category-count, .subcategory-count {
      font-size: 0.7rem;
      opacity: 0.8;
    }
    
    /* See More button */
    .see-more-container {
      text-align: center;
      margin: 10px 0;
    }
    
    .see-more-btn {
      padding: 6px 12px;
      background: var(--dark);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--light);
      cursor: pointer;
      font-size: 0.75rem;
      transition: all 0.2s ease;
    }
    
    .see-more-btn:hover {
      background: var(--primary);
      border-color: var(--primary);
    }
    
    /* Songs grid - 5 columns on desktop for smaller items */
    .songs-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      margin-bottom: 15px;
    }
    
    .song-item {
      position: relative;
      display: flex;
      flex-direction: column;
      background: rgba(20, 20, 25, 0.7);
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
      overflow: hidden;
      min-height: 80px;
    }
    
    .song-item:hover {
      transform: translateY(-1px);
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .song-cover-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(1px) brightness(0.3);
      transform: scale(1.02);
      z-index: 0;
      pointer-events: none;
    }
    
    .song-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding: 6px;
      height: 100%;
      justify-content: space-between;
    }
    
    .song-main-info {
      flex: 1;
    }
    
    .song-cover {
      width: 30px;
      height: 30px;
      object-fit: cover;
      border-radius: 3px;
      margin-bottom: 5px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .song-title {
      font-weight: 600;
      font-size: 0.7rem;
      margin-bottom: 2px;
      color: white;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .song-artist {
      opacity: 0.9;
      font-size: 0.65rem;
      margin-bottom: 2px;
      line-height: 1.2;
    }
    
    .song-meta {
      font-size: 0.6rem;
      opacity: 0.7;
      line-height: 1.2;
    }
    
    .song-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
    }
    
    .song-duration {
      opacity: 0.8;
      font-size: 0.65rem;
    }
    
    .song-relevance {
      font-size: 0.6rem;
      opacity: 0.6;
    }
    
    /* Pagination */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      margin-top: 20px;
      padding: 12px 0;
      flex-wrap: wrap;
    }
    
    .pagination button {
      padding: 6px 10px;
      background: var(--dark);
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--light);
      cursor: pointer;
      font-size: 0.75rem;
      transition: all 0.2s ease;
    }
    
    .pagination button:hover:not(:disabled) {
      background: var(--primary);
      border-color: var(--primary);
    }
    
    .pagination button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    
    .pagination-info {
      font-size: 0.75rem;
      opacity: 0.7;
      margin: 0 8px;
    }
    
    .page-numbers {
      display: flex;
      gap: 3px;
    }
    
    .page-number {
      padding: 6px 10px;
      background: var(--dark);
      border: 1px solid var(--border);
      border-radius: 3px;
      cursor: pointer;
      font-size: 0.75rem;
      transition: all 0.2s ease;
    }
    
    .page-number.active {
      background: var(--primary);
      border-color: var(--primary);
    }
    
    .page-number:hover:not(.active) {
      background: var(--primary-light);
      border-color: var(--primary-light);
    }
    
    /* No results and loading */
    .no-results {
      text-align: center;
      padding: 40px 12px;
      opacity: 0.7;
      font-size: 0.85rem;
    }
    
    .no-results i {
      font-size: 2rem;
      margin-bottom: 12px;
      opacity: 0.5;
    }
    
    .loading {
      text-align: center;
      padding: 40px 12px;
    }
    
    .spinner {
      width: 25px;
      height: 25px;
      border: 2px solid var(--border);
      border-top: 2px solid var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 12px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* Footer */
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      padding: 12px;
      border-top: 1px solid var(--border);
      font-size: 0.75rem;
    }
    
    .about-section {
      opacity: 0.6;
      max-width: 200px;
    }
    
    .copyright {
      opacity: 0.7;
      text-align: right;
    }
    
    /* Error message */
    .error-message {
      background: #dc2626;
      color: white;
      padding: 10px 12px;
      border-radius: 4px;
      margin-bottom: 12px;
      font-size: 0.8rem;
    }
    
    /* Mobile Optimizations */
    @media (max-width: 1024px) {
      .songs-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    
    @media (max-width: 768px) {
      .container {
        padding: 8px;
      }
      
      .logo {
        font-size: 1.4rem;
      }
      
      .logo i {
        font-size: 1.2rem;
      }
      
      .categories-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 6px;
      }
      
      .category-item, .subcategory-item {
        padding: 8px;
        font-size: 0.75rem;
      }
      
      .category-name, .subcategory-name {
        font-size: 0.8rem;
      }
      
      .songs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }
      
      .song-item {
        min-height: 75px;
      }
      
      .song-content {
        padding: 5px;
      }
      
      .song-cover {
        width: 25px;
        height: 25px;
        margin-bottom: 4px;
      }
      
      .song-title {
        font-size: 0.65rem;
      }
      
      .song-artist {
        font-size: 0.6rem;
      }
      
      .search-form {
        flex-direction: column;
      }
      
      .search-button {
        width: 100%;
      }
      
      .footer {
        flex-direction: column;
        text-align: center;
        gap: 6px;
      }
      
      .about-section {
        max-width: 100%;
      }
      
      .pagination {
        gap: 4px;
      }
      
      .page-numbers {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 8px;
      }
      
      .pagination-info {
        width: 100%;
        text-align: center;
        margin: 8px 0;
      }
      
      .top-item {
        width: 130px;
      }
      
      .top-item.top-1 {
        width: 160px;
      }
      
      .top-item.top-2 {
        width: 150px;
      }
      
      .top-item.top-3 {
        width: 140px;
      }
    }
    
    @media (max-width: 480px) {
      .songs-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .categories-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      }
      
      .song-item {
        min-height: 70px;
      }
      
      .container {
        padding: 6px;
      }
      
      .top-item {
        width: 120px;
      }
      
      .top-item.top-1 {
        width: 150px;
      }
      
      .top-item.top-2 {
        width: 140px;
      }
      
      .top-item.top-3 {
        width: 130px;
      }
    }
    
    @media (max-width: 360px) {
      .songs-grid {
        grid-template-columns: 1fr;
      }
      
      .top-bar {
        flex-direction: column;
        overflow-x: visible;
        overflow-y: auto;
        max-height: 400px;
      }
      
      .top-item {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1><i class="fas fa-music"></i> Anipop<small class="jp-tag">音楽</small></h1>
      <div class="search-bar">
        <form id="search-form" style="display:flex;">
          <input type="text" id="search-input" placeholder="Search songs, artists, or categories..." value="">
          <i class="fas fa-search" id="search-icon"></i>
          <button type="submit" id="search-btn" style="display:none"></button>
        </form>
        <div id="search-suggestions" class="search-suggestions" role="listbox" aria-label="Suggestions"></div>
      </div>
      <div class="nav-buttons">
        <button id="btn-open-drawer" class="icon-btn" title="Menu"><i class="fas fa-bars"></i></button>
        <button title="Home" onclick="window.location.href='/'"><i class="fas fa-home"></i></button>
        <button title="Search" onclick="document.getElementById('search-input')?.focus()"><i class="fas fa-search"></i></button>
        <button id="btn-toggle-theme" class="icon-btn" title="Theme"><i class="fas fa-moon"></i></button>
        
        <!-- User menu -->
        <div class="user-menu-container" style="display:none;">
          <img src="https://dl.anipop.ir/covers/default.jpg" 
               class="user-avatar" 
               alt="Profile"
               id="user-avatar"
               style="display:none;">
          <div class="user-menu-dropdown" id="user-menu-dropdown">
            <div class="user-menu-item" onclick="window.location.href='/profile'">
              <i class="fas fa-user"></i>
              <span>Profile</span>
            </div>
            <div class="user-menu-item" onclick="window.location.href='/settings'">
              <i class="fas fa-cog"></i>
              <span>Settings</span>
            </div>
            <div class="user-menu-divider"></div>
            <div class="user-menu-item" onclick="handleLogout()">
              <i class="fas fa-sign-out-alt"></i>
              <span>Logout</span>
            </div>
          </div>
        </div>
        
        <!-- Login button -->
        <button class="login-btn" id="login-btn" style="display:none;" onclick="window.location.href='/api/auth/google'">
          <i class="fab fa-google"></i> Sign in
        </button>
      </div>
    </header>

    <!-- Drawer Navigation -->
    <div class="drawer-overlay" id="drawer-overlay"></div>
    <nav class="drawer" id="drawer">
      <div class="drawer-header">
        <div style="display:flex;align-items:center;gap:8px"><i class="fas fa-music" style="color:var(--primary)"></i><strong>Anipop</strong></div>
        <button id="btn-close-drawer" class="icon-btn" aria-label="Close Menu"><i class="fas fa-times"></i></button>
      </div>
      <div class="drawer-nav">
        <a class="drawer-link" href="/"><i class="fas fa-home"></i><span>Home</span></a>
        <a class="drawer-link" href="/search"><i class="fas fa-search"></i><span>Search</span></a>
        <a class="drawer-link" href="/download.html"><i class="fas fa-download"></i><span>Download App</span></a>
      </div>
    </nav>

    <div class="search-header">
      <h1>Search Results</h1>
      <div class="search-stats" id="search-stats"></div>
      <div class="active-filters" id="active-filters"></div>
    </div>

    <div id="search-results">
      <div class="loading" id="loading">
        <div class="spinner"></div>
        <p>Searching...</p>
      </div>
    </div>

    <div class="footer">
      <div class="about-section">
        anipop is an online music platform with an special interest in anime music and jpop
        <h3>Contact : contact@anipop.ir</h3>
      </div>
      <div class="copyright">
        Copyright © 2026 anipop.ir - All rights reserved
      </div>
    </div>
  </div>

<script>
  // Get search parameters from URL
  const urlParams = new URLSearchParams(window.location.search);
  const searchQuery = urlParams.get('q');
  const categoryFilter = urlParams.get('category');
  const pageParam = urlParams.get('page');

  // DOM Elements
  const searchInput = document.getElementById('search-input');
  const searchForm = document.getElementById('search-form');
  const searchStats = document.getElementById('search-stats');
  const searchResults = document.getElementById('search-results');
  const loading = document.getElementById('loading');
  const activeFilters = document.getElementById('active-filters');

  // Global state
  let currentSearchData = null;
  let visibleCategories = 6;
  let visibleSubcategories = 6;

  // Initialize
  document.addEventListener('DOMContentLoaded', function() {
    const headerSearchInput = document.getElementById('search-input');
    if (headerSearchInput) {
      headerSearchInput.value = searchQuery || '';
    }
    
    updateActiveFilters();
    performSearch();
  });

  // Update active filters display
  function updateActiveFilters() {
    if (!activeFilters) return;
    
    let filtersHTML = '';
    
    if (categoryFilter) {
      filtersHTML += `<div class="filter-tag">
        Category Filter <span class="remove" onclick="removeFilter('category')">×</span>
      </div>`;
    }
    
    
    activeFilters.innerHTML = filtersHTML;
  }

  // Remove specific filter
  function removeFilter(filterType) {
    const params = new URLSearchParams();
    if (searchQuery) params.set('q', searchQuery);
    
    
    window.location.href = `/search?${params.toString()}`;
  }

  // Perform search with filters and pagination
  async function performSearch() {
    try {
      showLoading(true);
      
      const params = new URLSearchParams();
      if (searchQuery) params.set('q', searchQuery);
      if (categoryFilter) params.set('category', categoryFilter);
      if (pageParam) params.set('page', pageParam);
      
      const response = await fetch(`/api/search?${params.toString()}`);
      
      if (response.status === 429) {
        throw new Error('Too many search requests. Please wait a moment and try again.');
      }
      
      if (!response.ok) {
        throw new Error(`Search failed: ${response.statusText}`);
      }
      
      const data = await response.json();
      
      // Check if there's an error in the response
      if (data.error) {
        throw new Error(data.error);
      }
      
      // Store the data for "See More" functionality
      currentSearchData = data;
      displaySearchResults(data);
      
    } catch (error) {
      console.error('Search error:', error);
      showError(error.message);
    } finally {
      showLoading(false);
    }
  }

  // Display search results
  function displaySearchResults(data) {
    if (!searchResults || !searchStats) return;
    
    // Update stats with more detailed information
    let statsText = '';
    if (data.query) {
      statsText = `Found ${data.results.categories.length} categories, ${data.results.subcategories.length} subcategories, and ${data.pagination.totalSongs} songs for "${data.query}"`;
    } else if (categoryFilter) {
      statsText = `Found ${data.pagination.totalSongs} songs`;
      statsText += ` in selected category`;
    } else {
      statsText = `Found ${data.pagination.totalSongs} songs in library`;
    }
    
    if (data.pagination.totalSongs > 0) {
      const startItem = ((data.pagination.currentPage - 1) * data.pagination.songsPerPage) + 1;
      const endItem = Math.min(startItem + data.pagination.songsPerPage - 1, data.pagination.totalSongs);
      statsText += ` (showing ${startItem}-${endItem})`;
    }
    
    searchStats.textContent = statsText;
    
    let resultsHTML = '';
    
    // Display top relevant songs (top 10 with relevance > 10%)
    const songs = data.results.songs || [];
    const threshold = 10;
    const topRelevant = songs.filter(s => (s.relevance || 0) > threshold).sort((a,b) => (b.relevance||0) - (a.relevance||0));
    
    if (topRelevant.length > 0) {
      const topTake = Math.min(10, topRelevant.length);
      const topSlice = topRelevant.slice(0, topTake);
      
      resultsHTML += `
        <div class="top-bar-wrap">
          <div class="top-bar-title">
            <h3>Top Matches</h3>
            <div class="top-bar-info">Showing ${topTake} most relevant</div>
          </div>
          <div class="top-bar">
            ${topSlice.map((item, idx) => createTopItem(item, idx)).join('')}
          </div>
        </div>
      `;
    }
    
    // Display categories with "See More"
    if (data.results.categories.length > 0) {
      const visibleCats = data.results.categories.slice(0, visibleCategories);
      const hasMoreCats = data.results.categories.length > visibleCategories;
      
      resultsHTML += createResultsSection('Categories', visibleCats, 'category');
      
      if (hasMoreCats) {
        resultsHTML += `
          <div class="see-more-container">
            <button class="see-more-btn" onclick="showMoreCategories()">
              <i class="fas fa-chevron-down"></i> Show ${data.results.categories.length - visibleCategories} More Categories
            </button>
          </div>
        `;
      }
    }
    
    
    // Display remaining songs (excluding those shown in top bar)
    const topIds = new Set((topRelevant.slice(0, 10)).map(s => s.uuid));
    const remaining = songs.filter(s => !topIds.has(s.uuid));
    
    if (remaining.length > 0) {
      resultsHTML += createResultsSection('Other Results', remaining, 'song');
      
      // Add pagination if needed
      if (data.pagination.totalPages > 1) {
        resultsHTML += createPagination(data.pagination);
      }
    }
    
    // No results
    if (data.results.categories.length === 0 && 
        songs.length === 0) {
      
      let noResultsMessage = 'No results found';
      let suggestion = 'Try different keywords or browse our categories';
      
      if (data.query) {
        noResultsMessage += ` for "${data.query}"`;
      }
      if (categoryFilter) {
        noResultsMessage += ' with the current filters';
        suggestion = 'Try removing some filters or using different keywords';
      }
      
      resultsHTML = `
        <div class="no-results">
          <i class="fas fa-search"></i>
          <h3>${noResultsMessage}</h3>
          <p>${suggestion}</p>
          <a href="/search" class="back-button" style="margin-top: 15px; display: inline-flex;">
            <i class="fas fa-times"></i> Clear All Filters
          </a>
        </div>
      `;
    }
    
    searchResults.innerHTML = resultsHTML;
    
    // Add event listeners
    setupEventListeners();
  }

  // Create top item with special styling for top 3
  function createTopItem(item, idx) {
    const rel = item.relevance || 0;
    const color = colorFromRelevance(rel);
    const orderClass = idx === 0 ? 'top-1' : (idx === 1 ? 'top-2' : (idx === 2 ? 'top-3' : ''));
    
    return `
      <div class="top-item ${orderClass}" onclick="window.location.href='/play/${item.uuid}'">
        <img class="top-cover-bg" src="${item.coverArt}" alt="${item.name}" onerror="this.src='https://dl.anipop.ir/covers/default.jpg'">
        <div class="top-content">
          <img class="top-cover" src="${item.coverArt}" alt="${item.name}" onerror="this.src='https://dl.anipop.ir/covers/default.jpg'">
          <div class="top-info">
            <div class="top-title">${escapeHtml(item.name)}</div>
            <div class="top-artist">${escapeHtml(item.artist)}</div>
            <div class="top-relevance" style="background: ${color}; color: #0f172a;">
              ${Math.round(rel)}% relevant
            </div>
          </div>
        </div>
      </div>
    `;
  }

  // Show more categories
  function showMoreCategories() {
    visibleCategories = 999; // Show all
    displaySearchResults(currentSearchData);
  }


  // Helper: color from relevance (0-100) -> green(120) to red(0)
  function colorFromRelevance(rel) {
    const clamped = Math.max(0, Math.min(100, Math.round(rel)));
    const hue = Math.round((clamped/100) * 120); // 0->red, 120->green
    return `hsl(${hue}, 85%, 45%)`;
  }

  // Create pagination controls
  function createPagination(pagination) {
    const totalPages = pagination.totalPages;
    const currentPage = pagination.currentPage;
    const maxPagesToShow = 5;
    
    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
    let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
    
    if (endPage - startPage + 1 < maxPagesToShow) {
      startPage = Math.max(1, endPage - maxPagesToShow + 1);
    }
    
    let pageNumbersHTML = '';
    for (let i = startPage; i <= endPage; i++) {
      pageNumbersHTML += `
        <button class="page-number ${i === currentPage ? 'active' : ''}" data-page="${i}">
          ${i}
        </button>
      `;
    }
    
    return `
      <div class="pagination">
        <button id="prev-page" ${currentPage === 1 ? 'disabled' : ''}>
          <i class="fas fa-chevron-left"></i> Prev
        </button>
        <div class="page-numbers">
          ${pageNumbersHTML}
        </div>
        <button id="next-page" ${currentPage === totalPages ? 'disabled' : ''}>
          Next <i class="fas fa-chevron-right"></i>
        </button>
        <div class="pagination-info">
          Page ${currentPage} of ${totalPages}
        </div>
      </div>
    `;
  }

  // Create results section
  function createResultsSection(title, items, type) {
    if (type === 'song') {
      return `
        <div class="search-section">
          <h3>${title} (${items.length} songs)</h3>
          <div class="songs-grid">
            ${items.map(item => createSearchResultItem(item, type)).join('')}
          </div>
        </div>
      `;
    } else {
      const totalItems = items.reduce((sum, item) => sum + (item.songCount || 0), 0);
      return `
        <div class="search-section">
          <h3>${title} (${items.length} items, ${totalItems} songs)</h3>
          <div class="categories-grid">
            ${items.map(item => createSearchResultItem(item, type)).join('')}
          </div>
        </div>
      `;
    }
  }

  // Create search result item
  function createSearchResultItem(item, type) {
    if (type === 'song') {
      return `
        <div class="song-item" onclick="window.location.href='/play/${item.uuid}'">
          <img class="song-cover-bg" src="${item.coverArt}" alt="${item.name}" onerror="this.src='https://dl.anipop.ir/covers/default.jpg'">
          <div class="song-content">
            <div class="song-main-info">
              <img class="song-cover" src="${item.coverArt}" alt="${item.name}" onerror="this.src='https://dl.anipop.ir/covers/default.jpg'">
              <div class="song-title">${escapeHtml(item.name)}</div>
              <div class="song-artist">${escapeHtml(item.artist)}</div>
              <div class="song-meta">${escapeHtml(item.categoryName || '')}</div>
            </div>
            <div class="song-footer">
              <div class="song-duration">${formatDuration(item.duration)}</div>
              ${item.relevance ? `<div class="song-relevance">Relevance: ${Math.round(item.relevance)}%</div>` : ''}
            </div>
          </div>
        </div>
      `;
    } else if (type === 'category') {
      return `
        <div class="category-item" onclick="filterByCategory('${item.id}')">
          <div class="category-name">${escapeHtml(item.name)}</div>
          <div class="category-count">${item.songCount || 0} songs</div>
        </div>
      `;
    }
  }

  // Escape HTML to prevent XSS
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  // Filter by category
  function filterByCategory(categoryId) {
    navigateToSearch(searchQuery, categoryId, null, 1);
  }

  // Navigate to search with parameters
  function navigateToSearch(query, category, page) {
    const params = new URLSearchParams();
    if (query) params.set('q', query);
    if (category) params.set('category', category);
    if (page > 1) params.set('page', page);
    
    window.location.href = `/search?${params.toString()}`;
  }

  // Setup event listeners
  function setupEventListeners() {
    // Pagination
    document.querySelectorAll('.page-number').forEach(button => {
      button.addEventListener('click', function() {
        const page = parseInt(this.dataset.page);
        navigateToPage(page);
      });
    });

    document.getElementById('prev-page')?.addEventListener('click', function() {
      const currentPage = parseInt(pageParam) || 1;
      if (currentPage > 1) {
        navigateToPage(currentPage - 1);
      }
    });

    document.getElementById('next-page')?.addEventListener('click', function() {
      const currentPage = parseInt(pageParam) || 1;
      const totalPages = parseInt(document.querySelector('.pagination-info')?.textContent.match(/Page \d+ of (\d+)/)?.[1]) || 1;
      if (currentPage < totalPages) {
        navigateToPage(currentPage + 1);
      }
    });
  }

  // Navigate to specific page
  function navigateToPage(page) {
    navigateToSearch(searchQuery, categoryFilter, page);
  }

  // Format duration
  function formatDuration(seconds) {
    if (!seconds) return '0:00';
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  }

  // Show/hide loading
  function showLoading(show) {
    if (loading) {
      loading.style.display = show ? 'block' : 'none';
    }
  }

  // Show error
  function showError(message) {
    if (searchResults) {
      searchResults.innerHTML = `
        <div class="error-message">
          <i class="fas fa-exclamation-triangle"></i>
          <strong>Error:</strong> ${message}
        </div>
        <div class="no-results">
          <i class="fas fa-search"></i>
          <h3>Search Failed</h3>
          <p>Please try again or check your connection</p>
          <button onclick="performSearch()" class="back-button" style="margin-top: 15px; border: none;">
            <i class="fas fa-redo"></i> Retry Search
          </button>
        </div>
      `;
    }
  }

  // Logout handler
  async function handleLogout() {
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
      window.location.reload();
    } catch (error) {
      console.error('Logout error:', error);
      window.location.reload();
    }
  }
</script>

<!-- Shared Header JavaScript -->
<script src="/shared/header.js"></script>

</body>
</html>