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

{% block title %}
Welcome
{% endblock title %}

{% 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 %}
        </div>
        <div>
          {% card_multiselect "want_cards" "I Want:" "Select some cards..." 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 -->
        {% cache CACHE_TIMEOUT most_offered_cards cache_key_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">
              {% include "home/_card_list.html" with cards=most_offered_cards %}
            </div>
          </div>
        </div>
        {% endcache %}
        <!-- Most Wanted Cards -->
        {% cache CACHE_TIMEOUT most_wanted_cards cache_key_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">
              {% include "home/_card_list.html" with cards=most_wanted_cards %}
            </div>
          </div>
        </div>
        {% endcache %}
        <!-- Least Offered Cards (Last Group) -->
        {% cache CACHE_TIMEOUT least_offered_cards cache_key_least_offered_cards %}
        <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">
              {% include "home/_card_list.html" with cards=least_offered_cards %}
            </div>
          </div>
        </div>
        {% endcache %}
      </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 -->
      {% cache CACHE_TIMEOUT featured_offers cache_key_featured_offers %}
        <div>
            <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">
              {% if featured_offers.All %}
                <div class="flex flex-col items-center gap-6 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>
        </div>
      {% endcache %}
      <!-- Recent Offers -->
      {% cache CACHE_TIMEOUT recent_offers cache_key_recent_offers %}
      <div>
          <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-6">
              {% for offer in recent_offers %}
                  {% render_trade_offer offer %}
              {% empty %}
                <p>No recent offers available.</p>
              {% endfor %}
            </div>
          </div>
      </div>
      {% endcache %}
    </div>
  </section>
{% endblock content %}