{% extends "base.html" %}
{% block title %}Erweiterte Suche — AniWorld Downloader{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='advanced_search.css') }}">
{% endblock %}

{% block content %}
<div class="adv-search-page-container">
  <div class="page-header adv-header">
    <h1 class="page-title">Erweiterte Suche</h1>
    <p class="page-subtitle">Entdecke neue Serien und Filme mit den TMDB Filtern</p>
  </div>

  <div class="adv-filters-container" id="advFiltersContainer">
    <!-- Basic Row (Always Visible) -->
    <div class="adv-filters-basic-row">
      <!-- Type Filter -->
      <div class="filter-group basic-filter">
        <div class="filter-buttons" id="mediaTypeFilter">
          <button class="filter-btn active" data-type="tv">Serien</button>
          <button class="filter-btn" data-type="movie">Filme</button>
        </div>
      </div>

      <!-- Genres Multi-Select Dropdown -->
      <div class="filter-group basic-filter genre-select-group">
        <div class="custom-select" id="genreSelect">
          <div class="custom-select-trigger" id="genreSelectTrigger">
            <span id="genreSelectLabel">Alle Genres</span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" style="width:16px;height:16px">
              <polyline points="6 9 12 15 18 9"></polyline>
            </svg>
          </div>
          <div class="custom-select-dropdown" id="genreSelectDropdown">
            <!-- Checkboxes will be injected here -->
          </div>
        </div>
      </div>

      <!-- Actions & Toggle -->
      <div class="filter-actions-inline">
        <button class="btn btn-secondary" id="resetFiltersBtn">Zurücksetzen</button>
        <button class="btn btn-primary adv-search-btn" id="runSearchBtn">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" class="adv-search-icon">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
          Suchen
        </button>

        <!-- Toggle Expand Button -->
        <button class="btn btn-icon toggle-adv-btn" id="advFiltersToggle" title="Erweiterte Filter anzeigen">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" class="adv-filters-chevron">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
      </div>
    </div>

    <!-- Collapsible Advanced Filters -->
    <div class="adv-filters-body" id="advFiltersBody">
      <div class="adv-filters-row main-filters-row">
        <table>
          <tr style="border-bottom:unset !important">
            <th class="filter-title">Sortierung</th>
            <th class="filter-title">Keywords</th>
            <th class="filter-title">Erscheinungsjahr</th>
            <th class="filter-title">TMDB Bewertung (<span id="voteLabel">0 - 10</span>)</th>
          </tr>
          <tr style="border-bottom:unset !important">
            <td>
              <select id="sortBy" class="keyword-input" style="cursor:pointer">
                <option value="popularity.desc">Beliebtheit (Absteigend)</option>
                <option value="popularity.asc">Beliebtheit (Aufsteigend)</option>
                <option value="vote_average.desc">Bewertung (Absteigend)</option>
                <option value="primary_release_date.desc">Release (Neuste zuerst)</option>
                <option value="primary_release_date.asc">Release (Älteste zuerst)</option>
              </select>
            </td>
            <td style="max-width: 250px;">
              <div class="keyword-search-wrap">
                <input type="text" id="keywordInput" class="keyword-input" placeholder="Keyword suchen (z.B. anime)..."
                  autocomplete="off" />
                <div class="keyword-autocomplete" id="keywordAutocomplete" style="display:none"></div>
              </div>
            </td>
            <td>
              <div class="range-inputs">
                <input type="number" id="yearMin" placeholder="Von (z.B. 2000)" min="1900" max="2099" />
                <span class="range-sep">-</span>
                <input type="number" id="yearMax" placeholder="Bis (z.B. 2024)" min="1900" max="2099" />
              </div>
            </td>
            <td>
              <div class="range-slider-wrap">
                <input type="range" id="voteMin" min="0" max="10" step="1" value="0" />
              </div>
            </td>
          </tr>
          <tr class="adv-search-no-hover">
            <td> </td>
            <td style="max-width: 250px;">
              <div class="selected-keywords" id="selectedKeywords"></div>
            </td>
            <td> </td>
            <td> </td>
          </tr>
        </table>
      </div>
    </div>

    <!-- Results Area -->
    <div class="adv-results">
      <div class="results-header">
        <h2>Ergebnisse</h2>
        <div class="pagination" id="advPagination" style="display:none">
          <button class="btn btn-secondary pagination-btn" id="prevPageBtn" title="Zurück">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" style="width:16px;height:16px;">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>
          <span id="pageIndicator" class="page-indicator">Seite 1</span>
          <button class="btn btn-secondary pagination-btn" id="nextPageBtn" title="Weiter">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" style="width:16px;height:16px;">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </div>
        <span class="results-count" id="resultsCount"></span>
      </div>
      <div class="results-grid" id="resultsGrid">
        <div class="adv-empty-state">
          Bitte wähle deine Filter und klicke auf Suchen.
        </div>
      </div>
    </div>
  </div>

  <!-- AniWorld Search Modal (pops up when clicking a TMDB result) -->
  <div class="adv-search-overlay" id="aniSearchModalOverlay" style="display:none;"
    onclick="closeAniSearchModalOutside(event)">
    <div class="ani-search-modal" id="aniSearchModal">
      <button class="close ani-search-close" onclick="closeAniSearchModal()" aria-label="Schließen">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
          stroke-linejoin="round" style="width:16px;height:16px;">
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </button>
      <div class="ani-search-container">
        <h2 id="aniSearchTitle">Suche läuft...</h2>
        <div id="aniSearchSpinner" class="spinner" style="display:none;">Suche Streams auf AniWorld, S.TO &
          FilmPalast...</div>
        <div id="aniSearchResults" class="results-poster-grid"></div>
      </div>
    </div>
  </div>
  {% include "shared_modals.html" %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}