{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}?v=20260520">
{% endblock %}

{% block content %}
<section class="product-hero reveal">
    <div class="hero-copy">
        <p class="page-eyebrow">Smart catalog</p>
        <h1>Shop the best products</h1>
        <p>Browse items, compare prices, and use refined filters without leaving the same Hamro Karma visual theme.</p>

        <div class="product-hero-stats">
            <div class="product-hero-stat reveal">
                <strong>{{ products_count }}</strong>
                <span>matching products</span>
            </div>
            <div class="product-hero-stat reveal">
                <strong>{{ featured_count }}</strong>
                <span>featured in current view</span>
            </div>
            <div class="product-hero-stat reveal">
                <strong>{{ discounted_count }}</strong>
                <span>discounted offers</span>
            </div>
            <div class="product-hero-stat reveal">
                <strong>{{ avg_rating|floatformat:1 }}/5</strong>
                <span>average rating</span>
            </div>
        </div>
    </div>

    <form action="{% url 'product_list' %}" method="get" class="product-search-bar">
        <input type="search" name="q" value="{{ search_query }}" placeholder="Search products, brands, categories">
        <select name="sort">
            <option value="" {% if not selected_sort %}selected{% endif %}>Best Matches</option>
            <option value="newest" {% if selected_sort == 'newest' %}selected{% endif %}>Newest</option>
            <option value="rating" {% if selected_sort == 'rating' %}selected{% endif %}>Top Rated</option>
            <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>Price Low to High</option>
            <option value="price_desc" {% if selected_sort == 'price_desc' %}selected{% endif %}>Price High to Low</option>
        </select>
        {% if selected_category %}<input type="hidden" name="category" value="{{ selected_category }}">{% endif %}
        {% if selected_featured %}<input type="hidden" name="featured" value="1">{% endif %}
        <div class="search-form-actions">
            <button type="submit" class="btn btn-primary">Apply</button>
            {% if has_active_filters %}
            <a href="{% url 'product_list' %}" class="btn btn-secondary">Reset</a>
            {% endif %}
        </div>
    </form>
</section>

<section class="shop-feature-strip reveal">
    <article class="shop-stat-card reveal">
        <span class="shop-stat-label">Products visible</span>
        <strong class="shop-stat-value">{{ products_count }}</strong>
        <small class="shop-stat-note">Items after your current search and filters.</small>
    </article>
    <article class="shop-stat-card reveal">
        <span class="shop-stat-label">In stock</span>
        <strong class="shop-stat-value">{{ in_stock_count }}</strong>
        <small class="shop-stat-note">Ready for checkout right now.</small>
    </article>
    <article class="shop-stat-card reveal">
        <span class="shop-stat-label">Discounted</span>
        <strong class="shop-stat-value">{{ discounted_count }}</strong>
        <small class="shop-stat-note">Products currently showing savings.</small>
    </article>
    <article class="shop-stat-card reveal">
        <span class="shop-stat-label">Categories</span>
        <strong class="shop-stat-value">{{ categories|length }}</strong>
        <small class="shop-stat-note">Browse by category or stay in featured mode.</small>
    </article>
</section>

<div id="categories" class="category-bar reveal">
    <a href="{% url 'product_list' %}" class="category-chip {% if not selected_category and not selected_featured %}active{% endif %}">All</a>
    <a href="{% url 'product_list' %}?featured=1" class="category-chip {% if selected_featured %}active{% endif %}">Featured</a>
    {% for category in categories %}
    <a href="{% url 'product_list' %}?category={{ category|urlencode }}" class="category-chip {% if selected_category == category %}active{% endif %}">{{ category }}</a>
    {% endfor %}
</div>

{% if has_active_filters %}
<section class="filter-summary-bar reveal">
    <div class="filter-chip-row">
        {% for chip in active_filters %}
        <span class="filter-chip">{{ chip }}</span>
        {% endfor %}
    </div>
    <a href="{% url 'product_list' %}" class="btn btn-secondary small">Clear all filters</a>
</section>
{% endif %}

{% if products %}
<div class="cards">
{% for product in products %}
    <div class="card reveal">
        {% if product.image %}
            <img src="{{ product.image.url }}" alt="{{ product.name }}">
        {% else %}
            <div class="product-image-placeholder">No image available</div>
        {% endif %}
        <div class="card-content">
            <div class="tag-row">
                {% if product.featured %}<span class="tag badge-pill">Featured</span>{% endif %}
                <span class="tag category-tag">{{ product.category }}</span>
                {% if product.discount_percent %}<span class="tag savings-tag">Save {{ product.discount_percent }}%</span>{% endif %}
                {% if product.is_low_stock %}<span class="tag low-stock">Low Stock</span>{% endif %}
            </div>
            <h2>{{ product.name }}</h2>
            <div class="product-rating-row">
                <span class="rating-chip">⭐ {{ product.rating|floatformat:1 }}</span>
                <span class="availability-chip {% if not product.available %}out{% endif %}">{% if product.available %}Ready to ship{% else %}Currently unavailable{% endif %}</span>
            </div>
            <p class="description">{{ product.description|truncatewords:16 }}</p>
            <div class="product-pricing">
                <span class="price">Rs. {{ product.display_price|floatformat:2 }}</span>
                {% if product.discount_price %}
                <span class="original-price">Rs. {{ product.price|floatformat:2 }}</span>
                {% endif %}
            </div>
            <p class="stock">Stock: {{ product.stock|default:0 }}</p>
            <p class="product-card-caption">Use Buy Now for a faster path or save it in your wishlist for later.</p>
            <div class="card-actions">
                <a href="{% url 'product_detail' product.id %}" class="btn btn-secondary">View</a>
                <a href="{% url 'add_to_cart' product.id %}?next={{ request.get_full_path|urlencode }}" class="btn btn-secondary">Add to Cart</a>
                <a href="{% url 'buy_now' product.id %}" class="btn btn-primary">Buy Now</a>
                {% if user.is_authenticated %}
                <a href="{% url 'toggle_wishlist' product.id %}?next={{ request.get_full_path|urlencode }}" class="btn btn-secondary">{% if product.id in wishlist_ids %}Wishlisted{% else %}Wishlist{% endif %}</a>
                {% endif %}
            </div>
        </div>
    </div>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h2>No products found.</h2>
    <p>Try adjusting the search, switching category, or clearing filters to see more items.</p>
    <div class="hero-buttons">
        <a href="{% url 'product_list' %}" class="btn btn-primary">Reset Filters</a>
        <a href="{% url 'home' %}" class="btn btn-secondary">Go Home</a>
    </div>
</div>
{% endif %}
{% endblock %}