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

{% block content %}
<div class="container mx-auto" style="padding: 2rem 1rem;">
    <div style="max-width: 600px; margin: 0 auto; background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
        <h1 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem;">{{ title }}</h1>
        
        <form method="post" style="display: flex; flex-direction: column; gap: 1.5rem;">
            {% csrf_token %}
            
            {% for field in form %}
                <div style="display: flex; flex-direction: column;">
                    <label for="{{ field.id_for_label }}" style="margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-text-color);">
                        {{ field.label }}
                    </label>
                    {{ field }}
                    {% if field.help_text %}
                        <p style="margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-text-color);">{{ field.help_text }}</p>
                    {% endif %}
                    {% if field.errors %}
                        <div style="margin-top: 0.25rem; font-size: 0.875rem; color: var(--danger-color);">
                            {{ field.errors }}
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
            
            <div style="display: flex; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--border-color);">
                <a href="{% url 'store:bounty_list' %}" class="btn" style="background-color: var(--bg-color); color: var(--text-color); margin-right: 1rem; border: 1px solid var(--border-color);">
                    Cancel
                </a>
                <button type="submit" class="btn" style="background-color: var(--info-color);">
                    Post Bounty
                </button>
            </div>
        </form>
    </div>
</div>

<style>
    /* Suggestions list styling */
    #suggestions-list, #variants-list {
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 0.25rem;
        padding: 0;
        margin: 0;
        list-style: none;
        max-height: 200px;
        overflow-y: auto;
        position: absolute;
        width: 100%;
        z-index: 1000;
        display: none;
    }
    
    #suggestions-list li, #variants-list li {
        padding: 0.5rem;
        cursor: pointer;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-color);
    }
    
    #suggestions-list li:hover, #variants-list li:hover {
        background: var(--card-bg);
    }
    
    /* Highlight selected variant */
    .variant-selected {
        background-color: rgba(59, 130, 246, 0.2) !important;
        border-left: 3px solid #60a5fa;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const cardNameInput = document.getElementById("id_card_name");
        const cardIdInput = document.getElementById("id_card_id");
        
        // Ensure relative positioning for dropdowns
        const wrapper = document.createElement("div");
        wrapper.style.position = "relative";
        cardNameInput.parentNode.insertBefore(wrapper, cardNameInput);
        wrapper.appendChild(cardNameInput);
        
        // Create Suggestions List (Names)
        const suggestionsList = document.createElement("ul");
        suggestionsList.id = "suggestions-list";
        wrapper.appendChild(suggestionsList);
        
        // Create Variants List (Specific Cards)
        const variantsList = document.createElement("ul");
        variantsList.id = "variants-list";
        // Insert after suggestions list
        wrapper.appendChild(variantsList);
        
        // Optional: Add a label to show selected card details clearly
        const feedbackDiv = document.createElement("div");
        feedbackDiv.style.marginTop = "0.5rem";
        feedbackDiv.style.fontSize = "0.875rem";
        feedbackDiv.style.color = "#60a5fa";
        feedbackDiv.style.minHeight = "1.5rem";
        wrapper.appendChild(feedbackDiv);
        
        let debounceTimer;

        // 1. Input Handler - Search Names
        cardNameInput.addEventListener("input", function() {
            const query = this.value;
            clearTimeout(debounceTimer);
            
            // Clear previous selection
            cardIdInput.value = ""; 
            variantsList.style.display = "none";
            feedbackDiv.textContent = "";
            
            if (query.length < 2) {
                suggestionsList.style.display = "none";
                return;
            }
            
            debounceTimer = setTimeout(() => {
                fetch(`/api/card-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.addEventListener("click", () => {
                                    cardNameInput.value = name;
                                    suggestionsList.style.display = "none";
                                    fetchVariants(name);
                                });
                                suggestionsList.appendChild(li);
                            });
                            suggestionsList.style.display = "block";
                        } else {
                            suggestionsList.style.display = "none";
                        }
                    });
            }, 300);
        });
        
        // 2. Fetch Variants for a chosen Name
        function fetchVariants(cardName) {
            feedbackDiv.textContent = "Loading variants...";
            
            fetch(`/api/card-variants/?name=${encodeURIComponent(cardName)}`)
                .then(response => response.json())
                .then(data => {
                    variantsList.innerHTML = "";
                    
                    if (data.results.length === 0) {
                        feedbackDiv.textContent = "No variants found. Bounty will be generic by Title.";
                        return;
                    }
                    
                    // If only one variant, auto-select it
                    if (data.results.length === 1) {
                         selectVariant(data.results[0]);
                         return;
                    }
                    
                    feedbackDiv.textContent = "Please select a specific version below:";
                    
                    data.results.forEach(variant => {
                        const li = document.createElement("li");
                        // Text: "Base Set (#4) - Pokemon"
                        let label = `${variant.set_name}`;
                        if (variant.collector_number) {
                            label += ` (#${variant.collector_number})`;
                        }
                        label += ` - ${variant.game_name}`;
                        
                        li.textContent = label;
                        li.addEventListener("click", () => {
                            selectVariant(variant);
                            variantsList.style.display = "none";
                        });
                        variantsList.appendChild(li);
                    });
                    
                    variantsList.style.display = "block";
                });
        }
        
        function selectVariant(variant) {
            cardIdInput.value = variant.card_id;
            
            let label = `${variant.game_name} - ${variant.set_name}`;
            if (variant.collector_number) {
                label += ` #${variant.collector_number}`;
            }
            feedbackDiv.innerHTML = `Selected: <strong>${label}</strong>`;
        }
        
        // Close on outside click
        document.addEventListener("click", function(e) {
            if (!wrapper.contains(e.target)) {
                suggestionsList.style.display = "none";
                // Don't hide variants list immediately if user is interacting? 
                // Actually yes, hide it to be clean. user can re-trigger by typing or logic needs improvement if re-opening is hard.
                // For now, simple hiding.
                variantsList.style.display = "none";
            }
        });
    });
</script>
{% endblock %}