{% extends 'base/layout.html' %}

{% block content %}
<div class="container" style="max-width: 1000px; margin: 0 auto; padding-top: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h1>My Card Vault</h1>
        <div style="background: var(--card-bg); padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
            Total Cards: <strong>{{ total_cards }}</strong>
        </div>
    </div>

    <!-- Filters -->
    <div style="margin-bottom: 2rem; background: var(--card-bg); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
        <form method="get" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
            <div style="position: relative;">
                 <label for="search-input" style="margin-right: 0.5rem; font-size: 0.875rem;">Search:</label>
                 <input type="text" name="q" id="search-input" value="{{ search_query|default:'' }}" placeholder="Card name..." autocomplete="off"
                    style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
                 <ul id="suggestions-list" style="display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 0.25rem; z-index: 1000; list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto;">
                </ul>
            </div>
            
            <div>
                <label for="set" style="margin-right: 0.5rem; font-size: 0.875rem;">Set:</label>
                <select name="set" id="set" style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
                    <option value="">All Sets</option>
                    {% for set in available_sets %}
                    <option value="{{ set.id }}" {% if current_set == set.id %}selected{% endif %}>{{ set.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="rarity" style="margin-right: 0.5rem; font-size: 0.875rem;">Rarity:</label>
                <select name="rarity" id="rarity" style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
                    <option value="">All Rarities</option>
                    {% for rarity in available_rarities %}
                    <option value="{{ rarity }}" {% if current_rarity == rarity %}selected{% endif %}>{{ rarity|title }}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn" style="padding: 0.25rem 0.75rem;">Filter</button>
            <a href="{% url 'users:vault' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color); padding: 0.25rem 0.75rem;">Clear</a>
        </form>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const searchInput = document.getElementById('search-input');
            const suggestionsList = document.getElementById('suggestions-list');
            let debounceTimer;

            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    const query = this.value;
                    clearTimeout(debounceTimer);
                    if (query.length < 2) {
                        suggestionsList.style.display = 'none';
                        return;
                    }

                    debounceTimer = setTimeout(() => {
                        // Correct URL for users app API
                        fetch(`/users/api/vault-autocomplete/?q=${encodeURIComponent(query)}`)
                            .then(response => response.json())
                            .then(data => {
                                suggestionsList.innerHTML = '';
                                if (data.results.length > 0) {
                                    data.results.forEach(name => {
                                        const li = document.createElement('li');
                                        li.textContent = name;
                                        li.style.padding = '0.5rem';
                                        li.style.cursor = 'pointer';
                                        li.style.borderBottom = '1px solid var(--border-color)';
                                        
                                        li.addEventListener('mouseenter', () => {
                                            li.style.background = 'var(--card-bg)';
                                        });
                                        li.addEventListener('mouseleave', () => {
                                            li.style.background = 'transparent';
                                        });

                                        li.addEventListener('click', () => {
                                            searchInput.value = name;
                                            suggestionsList.style.display = 'none';
                                            searchInput.form.submit();
                                        });
                                        suggestionsList.appendChild(li);
                                    });
                                    suggestionsList.style.display = 'block';
                                } else {
                                    suggestionsList.style.display = 'none';
                                }
                            });
                    }, 300);
                });

                document.addEventListener('click', function(e) {
                    if (e.target !== searchInput && e.target !== suggestionsList) {
                        suggestionsList.style.display = 'none';
                    }
                });
            }
        });
    </script>

    {% if vault_items %}
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem;">
        {% for item in vault_items %}
        <div style="background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden; display: flex; flex-direction: column;">
            <div style="position: relative; aspect-ratio: 2.5/3.5;">
                {% if item.card.image_url %}
                    <img src="{{ item.card.image_url }}" alt="{{ item.card.name }}" style="width: 100%; height: 100%; object-fit: cover;">
                {% else %}
                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #1e293b; color: #94a3b8;">No Image</div>
                {% endif %}
                <div style="position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 0.25rem 0.5rem; border-top-left-radius: 0.5rem;">
                    x{{ item.quantity }}
                </div>
            </div>
            <div style="padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
                <div>
                    <h3 style="margin: 0; font-size: 1rem;">{{ item.card.name }}</h3>
                    <p style="color: #94a3b8; font-size: 0.875rem; margin: 0.25rem 0;">{{ item.card.set.name }}</p>
                    <p style="color: #94a3b8; font-size: 0.75rem; margin: 0;">{{ item.card.rarity|title }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div style="text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem; border: 1px solid var(--border-color);">
        <p style="font-size: 1.25rem; color: #94a3b8; margin-bottom: 1rem;">No cards found.</p>
        <div style="display: flex; gap: 1rem; justify-content: center; margin-top: 2rem;">
            <a href="{% url 'store:card_list' %}" class="btn">Browse Cards</a>
            <a href="{% url 'users:vault' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color);">Clear Filters</a>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}