{% 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 PKMN Trade Club</span>
  </h1>
  
  <!-- Search/Create Form Section -->
  <section id="trade-search" class="mb-8">
    <form id="tradeSearchForm" method="post" 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>
      {# Pass the user's default friend code as a hidden field for creation #}
      <input type="hidden" name="initiated_by" value="{{ request.user.default_friend_code.pk }}">
      <div class="flex flex-col md:flex-row gap-4">
        <button type="submit" name="search" formaction="{% url 'trade_offer_search' %}" class="btn btn-primary grow">
          Find a Trade Offer
        </button>
        <button type="submit" name="preview" formaction="{% url 'trade_offer_confirm_create' %}" class="btn btn-secondary grow">
          Create Trade Offer
        </button>
      </div>
    </form>
  </section>

    <!-- Card Stats Section -->
    <section aria-labelledby="stats-heading" class="mb-8">
      <h2 id="stats-heading" class="text-2xl font-semibold mb-4">Card 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</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</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</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() {
  // 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 => {
          content.style.display = content.getAttribute('data-tab') === target ? 'block' : '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 %}