{% extends 'base.html' %}
{% load static trade_offer_tags card_badge cache card_multiselect %}

{% block content %}
  <h1 class="text-center text-4xl font-bold mb-8 pt-4">
    <span class="inline leading-none" aria-hidden="true">
      <span class="inline-block relative">Welcome to</span>
      <span class="inline-block relative align-text-top">P</span><span class="inline-block relative align-text-bottom">K</span><span class="inline-block relative align-text-top">M</span><span class="inline-block relative align-text-bottom">N</span>
      <span class="inline-block relative">Trade Club</span>
    </span>
    <span aria-hidden="false" class="sr-only">Welcome to Pokemon Trade Club</span>
  </h1>
  
  <!-- Search Form Section -->
  <section id="trade-search" class="mb-8">
    <form method="post" action="{% url 'trade_offer_search' %}" class="space-y-4">
      {% csrf_token %}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          {% card_multiselect "have_cards" "I Have:" "Select some cards..." cards have_cards %}
        </div>
        <div>
          {% card_multiselect "want_cards" "I Want:" "Select some cards..." cards want_cards %}
        </div>
      </div>
      <div class="flex flex-col md:flex-row gap-4">
        <button type="submit" class="btn btn-primary grow">
          Find a Trade Offer
        </button>
        <a href="{% url 'trade_offer_create' %}" id="createTradeOfferBtn" class="btn btn-secondary grow">
          Create Trade Offer
        </a>
      </div>
    </form>
  </section>

    <!-- Market Stats Section -->
    <section aria-labelledby="stats-heading" class="mb-8">
      <h2 id="stats-heading" class="text-2xl font-semibold mb-4">Market Stats</h2>
      <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        <!-- Most Offered Cards -->
        <div>
          <div class="card card-border bg-base-100 shadow-lg">
            <div class="card-header text-base-content p-4">
              <h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Most Offered Cards</h5>
            </div>
            <div class="card-body my-4 p-0">
              {% cache 3600 most_offered_cards %}
                {% include "home/_card_list.html" with cards=most_offered_cards mode="wanted" %}
              {% endcache %}
            </div>
          </div>
        </div>
        <!-- Most Wanted Cards -->
        <div>
          <div class="card card-border bg-base-100 shadow-lg">
            <div class="card-header text-base-content p-4">
              <h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Most Wanted Cards</h5>
            </div>
            <div class="card-body my-4 p-0">
              {% cache 3600 most_wanted_cards %}
                {% include "home/_card_list.html" with cards=most_wanted_cards mode="offered" %}
              {% endcache %}
            </div>
          </div>
        </div>
        <!-- Least Offered Cards (Last Group) -->
        <div class="col-span-2 md:col-span-1">
          <div class="card card-border bg-base-100 shadow-lg">
            <div class="card-header text-base-content p-4">
              <h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Least Offered Cards</h5>
            </div>
            <div class="card-body my-4 p-0">
              {% cache 3600 least_offered_cards %}
                {% include "home/_card_list.html" with cards=least_offered_cards mode="wanted" %}
              {% endcache %}
            </div>
          </div>
        </div>
      </div>
    </section>
  
  <!-- Featured Offers and Recent Offers Section -->
  <section class="mb-8">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Featured Offers -->
        <div>
          {% cache 60 featured_offers %}
            <div class="p-4 text-center ">
              <h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Featured Offers</h5>
            </div>
            <div class="p-4">
              <!-- Tab contents -->
              <div id="featured-tab-contents">
                <div class="tab-content" data-tab="featured-all">
                  {% if featured_offers.All %}
                    <div class="flex flex-col items-center gap-3 w-auto mx-auto">
                      {% for offer in featured_offers.All %}
                        {% render_trade_offer offer %}
                      {% endfor %}
                    </div>
                  {% else %}
                    <p class="text-center">No featured offers available.</p>
                  {% endif %}
                </div>
                {% for rarity, offers in featured_offers.items %}
                  {% if rarity != "All" %}
                    <div class="tab-content" data-tab="featured-{{ forloop.counter }}" style="display: none;">
                      {% if offers %}
                        <div class="flex flex-col items-center gap-3 w-auto mx-auto">
                          {% for offer in offers %}
                            {% render_trade_offer offer %}
                          {% endfor %}
                        </div>
                      {% else %}
                        <p class="text-center">No featured offers for {{ rarity }}.</p>
                      {% endif %}
                    </div>
                  {% endif %}
                {% endfor %}
              </div>
              <!-- DaisyUI Tabs for Featured Offers -->     
              <div class="card card-border bg-base-100 shadow-lg w-96 md:w-80 lg:w-96 mt-8 mx-auto">
                <!-- Tabs navigation using daisyUI tabs-box -->
                <div class="tabs tabs-box bg-white dark:bg-base-100 grid grid-cols-3 gap-1.5 justify-items-stretch">
                  <!-- Radio inputs for controlling tab state -->
                  <input type="radio" class="tab text-xs font-bold md:text-sm w-full bg-base-100" name="featured_tabs" id="featured-all" checked="checked" aria-label="All">
                  {% for rarity, offers in featured_offers.items %}
                    {% if rarity != "All" %}
                      <input type="radio" class="tab text-xs font-bold md:text-sm w-full bg-base-100" name="featured_tabs" id="featured-{{ forloop.counter }}" aria-label="{{ rarity }}">
                    {% endif %}
                  {% endfor %}
                </div>
              </div>
            </div>
          {% endcache %}
        </div>
      
      <!-- Recent Offers -->
      <div>
        {% cache 60 recent_offers %}
          <div class="text-center p-4">
            <h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Recent Offers</h5>
          </div>
          <div class="p-4">
            <div class="flex flex-col items-center gap-3">
              {% for offer in recent_offers %}
                  {% render_trade_offer offer %}
              {% empty %}
                <p>No recent offers available.</p>
              {% endfor %}
            </div>
          </div>
        {% endcache %}
      </div>
    </div>
  </section>
{% endblock content %}

{% block javascript %}
<script defer>
document.addEventListener('DOMContentLoaded', function() {
  // Updated: JS to carry over selections (including quantities) to the Create Trade Offer page.
  const createBtn = document.getElementById('createTradeOfferBtn');
  if (createBtn) {
    createBtn.addEventListener('click', function(e) {
      e.preventDefault();
      // Use the standardized field names for both "have_cards" and "want_cards"
      const haveSelect = document.querySelector('select[name="have_cards"]');
      const wantSelect = document.querySelector('select[name="want_cards"]');
      const url = new URL(createBtn.href, window.location.origin);

      if (haveSelect) {
        // For each selected option, include the quantity from data-quantity (defaulting to "1")
        const selectedHave = Array.from(haveSelect.selectedOptions).map(opt => {
          const cardId = opt.value;
          const quantity = opt.getAttribute('data-quantity') || '1';
          return cardId + ':' + quantity;
        });
        selectedHave.forEach(val => url.searchParams.append('have_cards', val));
      }
      
      if (wantSelect) {
        const selectedWant = Array.from(wantSelect.selectedOptions).map(opt => {
          const cardId = opt.value;
          const quantity = opt.getAttribute('data-quantity') || '1';
          return cardId + ':' + quantity;
        });
        selectedWant.forEach(val => url.searchParams.append('want_cards', val));
      }
      
      window.location.href = url.href;
    });
  }
  
  // Minimal JavaScript for toggling Featured Offers tabs
  const featuredTabs = document.querySelectorAll('input[name="featured_tabs"]');
  const featuredTabContents = document.querySelectorAll('#featured-tab-contents .tab-content');
  
  function updateFeaturedTabs() {
    featuredTabs.forEach(radio => {
      if (radio.checked) {
        const target = radio.id;
        featuredTabContents.forEach(content => {
          if (content.getAttribute('data-tab') === target) {
            content.style.display = 'block';
          } else {
            content.style.display = 'none';
          }
        });
      }
    });
  }
  
  featuredTabs.forEach(radio => {
    radio.addEventListener('change', updateFeaturedTabs);
  });
  
  // Initialize tabs on page load
  updateFeaturedTabs();
});
</script>
{% endblock %}

{% block css %}
<style>
  .tabs-box .tab {
    z-index: 1;
  }
  .tabs-box .tab:checked,
  .tabs-box .tab.active {
    z-index: 2;
    background-color: var(--color-base-200);
    accent-color: var(--color-base-200);
  }
  .tabs-box .tab:focus-visible {
    outline: none;
  }
</style>
{% endblock %}