{% extends "base.html" %}
{% load app_tags %}

{% block title %}
  Search - Yamtrack
{% endblock title %}

{% block content %}
  <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-8 gap-y-4">
    <h2 class="text-2xl font-bold">Search Results</h2>
    <div class="flex items-center flex-wrap gap-x-4 gap-y-2">
      <span class="text-sm text-gray-400">Source:</span>
      <div class="flex gap-x-2">
        {% if media_type == MediaTypes.MANGA.value %}
          <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type={{ MediaTypes.MANGA.value }}"
             class="px-3 py-1.5 text-sm rounded-md transition-colors duration-200 cursor-pointer {% if request.GET.source != Sources.MANGAUPDATES.value %}bg-indigo-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            MyAnimeList
          </a>
          <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type={{ MediaTypes.MANGA.value }}&source={{ Sources.MANGAUPDATES.value }}"
             class="px-3 py-1.5 text-sm rounded-md transition-colors duration-200 cursor-pointer {% if request.GET.source == Sources.MANGAUPDATES.value %}bg-indigo-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            MangaUpdates
          </a>
        {% elif media_type == MediaTypes.BOOK.value %}
          <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type={{ MediaTypes.BOOK.value }}"
             class="px-3 py-1.5 text-sm rounded-md transition-colors duration-200 cursor-pointer {% if request.GET.source != Sources.OPENLIBRARY.value %}bg-indigo-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            Hardcover
          </a>
          <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type={{ MediaTypes.BOOK.value }}&source={{ Sources.OPENLIBRARY.value }}"
             class="px-3 py-1.5 text-sm rounded-md transition-colors duration-200 cursor-pointer {% if request.GET.source == Sources.OPENLIBRARY.value %}bg-indigo-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            Open Library
          </a>
        {% else %}
          <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type={{ media_type }}"
             class="px-3 py-1.5 text-sm rounded-md transition-colors duration-200 w-max cursor-pointer bg-indigo-600 text-white">
            {{ media_type|default_source }}
          </a>
        {% endif %}
      </div>
    </div>
  </div>

  {% if data.results %}
    <div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
      {% for item in data.results %}
        {% include "app/components/media_card.html" with item=item title=item.title %}
      {% endfor %}
    </div>

    {% if data.total_pages > 1 %}
      <div class="flex flex-wrap justify-center items-center mt-8 gap-x-2 gap-y-3">
        {# Previous button #}
        {% if data.page > 1 %}
          <a href="?q={{ request.GET.q }}&media_type={{ media_type }}{% if source %}&source={{ source }}{% endif %}&page={{ data.page|add:'-1' }}"
             class="p-2 rounded-md bg-[#2a2f35] text-white hover:bg-[#39404b]">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-5 h-5">
              <path d="m15 18-6-6 6-6"></path>
            </svg>
          </a>
        {% else %}
          <button class="p-2 rounded-md bg-gray-700 text-gray-500 cursor-not-allowed"
                  disabled>
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-5 h-5">
              <path d="m15 18-6-6 6-6"></path>
            </svg>
          </button>
        {% endif %}

        {# Page numbers with ellipses #}
        {% get_pagination_range data.page data.total_pages 2 as pages %}
        {% for page_num in pages %}
          {% if page_num %}
            <a href="?q={{ request.GET.q }}&media_type={{ media_type }}{% if source %}&source={{ source }}{% endif %}&page={{ page_num }}"
               class="w-10 h-10 rounded-md {% if data.page == page_num %}bg-indigo-600{% else %}bg-[#2a2f35] hover:bg-[#39404b]{% endif %} text-white flex items-center justify-center">
              {{ page_num }}
            </a>
          {% else %}
            {# Ellipsis #}
            <span class="flex items-center justify-center w-10 h-10 text-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg"
                   width="24"
                   height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   class="w-5 h-5">
                <circle cx="12" cy="12" r="1"></circle>
                <circle cx="19" cy="12" r="1"></circle>
                <circle cx="5" cy="12" r="1"></circle>
              </svg>
            </span>
          {% endif %}
        {% endfor %}

        {# Next button #}
        {% if data.page < data.total_pages %}
          <a href="?q={{ request.GET.q }}&media_type={{ media_type }}{% if source %}&source={{ source }}{% endif %}&page={{ data.page|add:'1' }}"
             class="p-2 rounded-md bg-[#2a2f35] text-white hover:bg-[#39404b]">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-5 h-5">
              <path d="m9 18 6-6-6-6"></path>
            </svg>
          </a>
        {% else %}
          <button class="p-2 rounded-md bg-gray-700 text-gray-500 cursor-not-allowed"
                  disabled>
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-5 h-5">
              <path d="m9 18 6-6-6-6"></path>
            </svg>
          </button>
        {% endif %}
      </div>

      {# Page info text #}
      <div class="text-center text-sm text-gray-400 mt-3">
        Page {{ data.page }} of {{ data.total_pages }} ({{ data.total_results }} results)
      </div>
    {% endif %}
  {% else %}
    <div class="flex flex-col items-center justify-center py-32 px-4 bg-[#2a2f35] rounded-lg">
      <div class="bg-[#39404b] rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="w-8 h-8 text-gray-400">
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.3-4.3"></path>
        </svg>
      </div>
      <h3 class="text-xl font-semibold mb-2">No results found</h3>
      <p class="text-gray-400 text-center max-w-md mb-8">
        We couldn't find any matches for "{{ request.GET.q }}". Try checking your spelling or using different keywords.
      </p>
    </div>
  {% endif %}
{% endblock content %}
