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

{% block content %}
<div class="container-fluid py-2">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0 fw-bold">Wardrobe</h4>
        <div class="d-flex gap-2">
            <!-- View Toggle -->
            <div class="btn-group btn-group-sm bg-secondary rounded-pill p-1 shadow-sm me-2">
                <button type="button" class="btn btn-sm rounded-pill px-3 active" id="view-grid" title="Grid View">
                    <i class="fas fa-th-large"></i>
                </button>
                <button type="button" class="btn btn-sm rounded-pill px-3" id="view-list" title="List View">
                    <i class="fas fa-list"></i>
                </button>
            </div>
            <a href="{% url 'add_wardrobe_item' %}" class="btn btn-accent btn-sm rounded-pill px-3 shadow-sm d-flex align-items-center">
                <i class="fas fa-plus me-1"></i> <span class="d-none d-sm-inline">Add Item</span><span class="d-inline d-sm-none">Add</span>
            </a>
        </div>
    </div>

    <!-- Filter Toggle and Sort Bars -->
    <div class="mb-3">
        <button class="btn btn-outline-secondary btn-sm rounded-pill px-3 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="false">
            <i class="fas fa-filter me-1"></i> Filter & Sort
        </button>
        
        <div class="collapse {% if sort != 'recent' or request.GET.q %}show{% endif %}" id="filterCollapse">
            <div class="glass-card p-3 rounded-3 mb-3">
                <form method="get" class="mb-3">
                    {% if current_main %}<input type="hidden" name="main_category" value="{{ current_main.id }}">{% endif %}
                    {% if current_sub %}<input type="hidden" name="subcategory" value="{{ current_sub.id }}">{% endif %}
                    <input type="hidden" name="sort" value="{{ sort }}">
                    <div class="input-group input-group-sm bg-secondary rounded-pill px-2">
                        <span class="input-group-text bg-transparent border-0 text-dim"><i class="fas fa-search"></i></span>
                        <input type="text" name="q" class="form-control bg-transparent border-0 text-white" placeholder="Search items..." value="{{ request.GET.q }}">
                        {% if request.GET.q %}
                        <a href="?sort={{ sort }}{% if current_main %}&main_category={{ current_main.id }}{% endif %}{% if current_sub %}&subcategory={{ current_sub.id }}{% endif %}" class="btn btn-link text-dim p-0 me-2 d-flex align-items-center">
                            <i class="fas fa-times-circle"></i>
                        </a>
                        {% endif %}
                    </div>
                </form>
                
                <div class="d-flex flex-wrap gap-2">
                    <a href="?sort=recent{% if current_main %}&main_category={{ current_main.id }}{% endif %}{% if current_sub %}&subcategory={{ current_sub.id }}{% endif %}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}" 
                       class="btn {% if sort == 'recent' %}btn-accent{% else %}btn-outline-secondary{% endif %} btn-xs rounded-pill px-3">
                        Newest
                    </a>
                    <a href="?sort=alpha{% if current_main %}&main_category={{ current_main.id }}{% endif %}{% if current_sub %}&subcategory={{ current_sub.id }}{% endif %}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}" 
                       class="btn {% if sort == 'alpha' %}btn-accent{% else %}btn-outline-secondary{% endif %} btn-xs rounded-pill px-3">
                        A-Z
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Categories Tabs -->
    <div class="d-flex gap-2 overflow-auto no-scrollbar pb-3 mb-2">
        <a class="btn btn-xs rounded-pill px-3 {% if not current_main %}btn-accent{% else %}btn-outline-secondary{% endif %}" href="?sort={{ sort }}">All</a>
        {% for main_cat in main_categories %}
        <a class="btn btn-xs rounded-pill px-3 {% if current_main.id == main_cat.id %}btn-accent{% else %}btn-outline-secondary{% endif %}" 
           href="?main_category={{ main_cat.id }}&sort={{ sort }}">{{ main_cat.name }}</a>
        {% endfor %}
    </div>

    <!-- Subcategories Tabs -->
    {% if current_main and subcategories %}
    <div class="d-flex gap-2 overflow-auto no-scrollbar pb-3 mb-3">
        <a href="?main_category={{ current_main.id }}&sort={{ sort }}" 
           class="btn btn-xs {% if not current_sub %}btn-secondary{% else %}btn-outline-secondary{% endif %} rounded-pill px-3">
            All {{ current_main.name }}
        </a>
        {% for sub in subcategories %}
        <a href="?main_category={{ current_main.id }}&subcategory={{ sub.id }}&sort={{ sort }}" 
           class="btn btn-xs {% if current_sub.id == sub.id %}btn-secondary{% else %}btn-outline-secondary{% endif %} rounded-pill px-3">
            {{ sub.name }}
        </a>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Items Grid/List Container -->
    <div class="row g-2" id="items-container">
        {% for item in items %}
        <div class="item-wrapper col-4 col-sm-3 col-md-2">
            <div class="item-card position-relative rounded-1 d-flex flex-column align-items-center p-1" style="cursor: pointer; transition: all 0.1s;">
                <a href="{% url 'wardrobe_item_detail' item.pk %}" class="stretched-link"></a>
                
                <!-- Grid Content (Default) -->
                <div class="item-img-container position-relative rounded-1 overflow-hidden bg-secondary w-100 shadow-sm" style="aspect-ratio: 1/1;">
                    {% if item.image %}
                    <img src="{{ item.image.url }}" class="w-100 h-100 object-fit-contain">
                    {% else %}
                    <div class="w-100 h-100 d-flex align-items-center justify-content-center">
                        <i class="fas fa-image text-muted"></i>
                    </div>
                    {% endif %}
                </div>
                <div class="item-name-label mt-1 text-center small text-truncate w-100 px-1" style="font-size: 0.65rem; color: var(--text-main);">
                    {{ item.name|default:"Unnamed" }}
                </div>

                <!-- List Content (Hidden) -->
                <div class="item-list-content d-none w-100 align-items-center gap-2 px-1 py-1">
                    <div class="list-img-box rounded-1 bg-secondary overflow-hidden" style="width: 28px; height: 28px; flex-shrink: 0;">
                        {% if item.image %}
                        <img src="{{ item.image.url }}" class="w-100 h-100 object-fit-cover">
                        {% else %}
                        <div class="w-100 h-100 d-flex align-items-center justify-content-center">
                            <i class="fas fa-image text-muted" style="font-size: 0.5rem;"></i>
                        </div>
                        {% endif %}
                    </div>
                    <div class="flex-grow-1 text-truncate">
                        <div class="small fw-bold text-truncate" style="font-size: 0.75rem;">{{ item.name|default:"Unnamed" }}</div>
                        <div class="text-dim text-truncate" style="font-size: 0.6rem;">{{ item.category.name|default:"Uncategorized" }}</div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <i class="fas fa-box-open text-dim mb-2" style="font-size: 3rem;"></i>
            <p class="text-dim">No items found in your wardrobe.</p>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
    .item-card:hover {
        background-color: rgba(255, 255, 255, 0.08);
        transform: translateY(-2px);
    }
    
    .list-mode .item-card {
        flex-direction: row !important;
        align-items: center !important;
        padding: 4px 8px !important;
    }
    .list-mode .item-img-container, 
    .list-mode .item-name-label {
        display: none !important;
    }
    .list-mode .item-list-content {
        display: flex !important;
    }
    
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .object-fit-contain { object-fit: contain; }
    .object-fit-cover { object-fit: cover; }
    
    .btn-xs {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const viewGrid = document.getElementById('view-grid');
    const viewList = document.getElementById('view-list');
    const itemsContainer = document.getElementById('items-container');
    const wrappers = document.querySelectorAll('.item-wrapper');

    if (viewGrid && viewList) {
        viewGrid.addEventListener('click', () => {
            viewGrid.classList.add('active');
            viewList.classList.remove('active');
            itemsContainer.classList.remove('list-mode');
            wrappers.forEach(w => {
                w.className = 'item-wrapper col-4 col-sm-3 col-md-2';
            });
            localStorage.setItem('wardrobe_view', 'grid');
        });

        viewList.addEventListener('click', () => {
            viewList.classList.add('active');
            viewGrid.classList.remove('active');
            itemsContainer.classList.add('list-mode');
            wrappers.forEach(w => {
                w.className = 'item-wrapper col-12 col-sm-6 col-md-4';
            });
            localStorage.setItem('wardrobe_view', 'list');
        });

        // Restore preference
        const savedView = localStorage.getItem('wardrobe_view');
        if (savedView === 'list') {
            viewList.click();
        }
    }
});
</script>
{% endblock %}
