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

{% block content %}
<div style="max-width: 800px; margin: 0 auto;">
    <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
        <h2 style="margin-top: 0; color: var(--text-color);">Add New Card Listing</h2>
        <p style="color: var(--muted-text-color); margin-bottom: 2rem;">
            Specify the card details. If the card or set doesn't exist, it will be created automatically.
        </p>
        
        <!-- Tabs for Single vs Bulk -->
        <div style="display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border-color);">
            <button id="tab-single" class="tab-btn active" onclick="switchTab('single')" style="background: none; border: none; color: var(--text-color); padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid var(--primary-color);">Single Listing</button>
            <button id="tab-bulk" class="tab-btn" onclick="switchTab('bulk')" style="background: none; border: none; color: var(--muted-text-color); padding: 0.5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent;">Bulk Upload</button>
        </div>

        <!-- Single Listing Form -->
        <div id="single-form-container">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                {% for field in form %}
                <div style="margin-bottom: 1.5rem;">
                    <label for="{{ field.id_for_label }}" style="display: block; color: var(--muted-text-color); font-size: 0.875rem; margin-bottom: 0.5rem;">
                        {{ field.label }}
                    </label>
                    
                    {{ field }}
                    
                    {% if field.help_text %}
                    <div style="color: var(--muted-text-color); font-size: 0.75rem; margin-top: 0.5rem;">{{ field.help_text }}</div>
                    {% endif %}
                    {% if field.errors %}
                    <div style="color: var(--danger-color); font-size: 0.875rem; margin-top: 0.25rem;">
                        {{ field.errors.as_text }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                
                <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem;">
                    <a href="{% url 'store:manage_listings' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color); text-decoration: none;">Cancel</a>
                    <button type="submit" class="btn">Create Listing</button>
                </div>
            </form>
        </div>

        <!-- Bulk Upload Form -->
        <div id="bulk-form-container" style="display: none;">
            <div style="margin-bottom: 2rem; padding: 1rem; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 0.5rem;">
                <h3 style="margin-top: 0; color: var(--text-color); font-size: 1.1rem;">Instructions</h3>
                <ol style="color: var(--muted-text-color); margin-left: 1.5rem; margin-bottom: 0;">
                    <li>Download the <a href="{% url 'store:download_listing_template' type='card' %}" style="color: var(--primary-color);">CSV Template</a>.</li>
                    <li>Fill out the CSV with your card details.</li>
                    <li>For images, put the filename (e.g., "lotus.jpg") in the CSV.</li>
                    <li>Upload the CSV and select ALL corresponding image files at once below.</li>
                </ol>
            </div>

            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="bulk_upload" value="true">
                
                {% for field in bulk_form %}
                <div style="margin-bottom: 1.5rem;">
                    <label for="{{ field.id_for_label }}" style="display: block; color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.5rem;">
                        {{ field.label }}
                    </label>
                    
                    {{ field }}
                    
                    {% if field.help_text %}
                    <div style="color: var(--muted-text-color); font-size: 0.75rem; margin-top: 0.5rem;">{{ field.help_text }}</div>
                    {% endif %}
                    {% if field.errors %}
                    <div style="color: var(--danger-color); font-size: 0.875rem; margin-top: 0.25rem;">
                        {{ field.errors.as_text }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                
                <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem;">
                    <a href="{% url 'store:manage_listings' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color); text-decoration: none;">Cancel</a>
                    <button type="submit" class="btn">Upload Bulk Listings</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    /* Suggestions list styling */
    #suggestions-list li {
        padding: 0.5rem;
        cursor: pointer;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-color);
        color: var(--text-color);
    }
    #suggestions-list li:hover {
        background: var(--card-bg);
    }
    
    /* Scoped styles for form inputs in this view to match dashboard theme */
    form input[type="text"],
    form input[type="number"],
    form input[type="file"], 
    form select, 
    form textarea {
        display: block;
        width: 100%;
        padding: 0.75rem;
        background: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    
    form input:focus,
    form select:focus,
    form textarea:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2); /* Soft glow */
    }
    
    /* File input styling tweaks */
    form input[type="file"] {
        padding: 0.5rem;
        line-height: 1.5;
    }
    
    form input[type="file"]::file-selector-button {
        background: var(--primary-color);
        border: none;
        color: var(--text-color);
        padding: 0.25rem 0.75rem;
        border-radius: 0.25rem;
        margin-right: 1rem;
        cursor: pointer;
        font-size: 0.875rem;
    }
    
    .tab-btn:hover {
        color: var(--text-color) !important;
    }
</style>

<script>
    function switchTab(tab) {
        const singleBtn = document.getElementById('tab-single');
        const bulkBtn = document.getElementById('tab-bulk');
        const singleForm = document.getElementById('single-form-container');
        const bulkForm = document.getElementById('bulk-form-container');
        
        if (tab === 'single') {
            singleBtn.classList.add('active');
            singleBtn.style.borderBottom = "2px solid var(--primary-color)";
            singleBtn.style.color = "white";
            
            bulkBtn.classList.remove('active');
            bulkBtn.style.borderBottom = "2px solid transparent";
            bulkBtn.style.color = "#94a3b8";
            
            singleForm.style.display = "block";
            bulkForm.style.display = "none";
        } else {
            bulkBtn.classList.add('active');
            bulkBtn.style.borderBottom = "2px solid var(--primary-color)";
            bulkBtn.style.color = "white";
            
            singleBtn.classList.remove('active');
            singleBtn.style.borderBottom = "2px solid transparent";
            singleBtn.style.color = "#94a3b8";
            
            bulkForm.style.display = "block";
            singleForm.style.display = "none";
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        const cardNameInput = document.getElementById("id_card_name");
        const gameSelect = document.getElementById("id_game");
        const setNameInput = document.getElementById("id_set_name");
        const collectorNumberInput = document.getElementById("id_collector_number");
        
        // Setup suggestions container
        let suggestionsList = document.createElement("ul");
        suggestionsList.id = "suggestions-list";
        suggestionsList.style.display = "none";
        suggestionsList.style.position = "absolute";
        suggestionsList.style.zIndex = "1000";
        suggestionsList.style.width = "100%";
        suggestionsList.style.maxHeight = "200px";
        suggestionsList.style.overflowY = "auto";
        suggestionsList.style.border = "1px solid var(--border-color)";
        suggestionsList.style.borderRadius = "0.25rem";
        suggestionsList.style.padding = "0";
        suggestionsList.style.margin = "0";
        suggestionsList.style.listStyle = "none";
        
        // Wrap cardNameInput in relative container
        const wrapper = document.createElement("div");
        wrapper.style.position = "relative";
        cardNameInput.parentNode.insertBefore(wrapper, cardNameInput);
        wrapper.appendChild(cardNameInput);
        wrapper.appendChild(suggestionsList);
        
        let debounceTimer;
        let currentVariants = [];
        
        // Autocomplete Logic
        cardNameInput.addEventListener("input", function() {
            const query = this.value;
            clearTimeout(debounceTimer);
            
            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);
        });
        
        // Fetch Variants and Update Filters
        function fetchVariants(cardName) {
            fetch(`/api/card-variants/?name=${encodeURIComponent(cardName)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.results.length > 0) {
                        currentVariants = data.results;
                        
                        // 1. Auto-select Game if only one game found OR multiple games but same ID
                        // We check uniqueness of game_slug
                        const games = [...new Set(currentVariants.map(v => v.game_slug))];
                        if (games.length === 1) {
                             const gameName = currentVariants[0].game_name;
                             for (let i = 0; i < gameSelect.options.length; i++) {
                                 if (gameSelect.options[i].text === gameName) {
                                     gameSelect.selectedIndex = i;
                                     break;
                                 }
                             }
                        }
                        
                        // 2. Populate Set Name Datalist (create if needed)
                        let dataList = document.getElementById("set-name-list");
                        if (!dataList) {
                            dataList = document.createElement("datalist");
                            dataList.id = "set-name-list";
                            document.body.appendChild(dataList);
                            setNameInput.setAttribute("list", "set-name-list");
                        }
                        
                        dataList.innerHTML = "";
                        const sets = [...new Set(currentVariants.map(v => v.set_name))];
                        sets.forEach(setName => {
                            const option = document.createElement("option");
                            option.value = setName;
                            dataList.appendChild(option);
                        });
                        
                        // If only one set, simplify life
                        if (sets.length === 1) {
                            setNameInput.value = sets[0];
                        }
                        
                        updateCollectorNumbers();
                    }
                });
        }
        
        function updateCollectorNumbers() {
            const currentSetName = setNameInput.value;
            
            // Filter variants by selected set (if any)
            let relevantVariants = currentVariants;
            if (currentSetName) {
                relevantVariants = currentVariants.filter(v => v.set_name === currentSetName);
            }
            
            // Populate Collector Number Datalist
            let numList = document.getElementById("collector-number-list");
            if (!numList) {
                numList = document.createElement("datalist");
                numList.id = "collector-number-list";
                document.body.appendChild(numList);
                collectorNumberInput.setAttribute("list", "collector-number-list");
            }
            
            numList.innerHTML = "";
            const numbers = [...new Set(relevantVariants.map(v => v.collector_number).filter(n => n))]; // Filter out empty strings
            
            numbers.forEach(num => {
                const option = document.createElement("option");
                option.value = num;
                numList.appendChild(option);
            });
            
            // Auto-fill if only one variant for this set
            if (relevantVariants.length === 1 && relevantVariants[0].collector_number) {
                 collectorNumberInput.value = relevantVariants[0].collector_number;
            } else if (relevantVariants.length > 1 && numbers.length === 1) {
                 // All variants have same number? (unlikely but possible if id differs by something else)
                 collectorNumberInput.value = numbers[0];
            } else {
                 // clear if valid set but multiple numbers? 
                 // Maybe best not to clear if user typed something, only auto-fill if empty?
                 // Let's leave it alone unless match found.
            }
        }
        
        // Listen for Set Name changes to update collector numbers
        setNameInput.addEventListener("input", updateCollectorNumbers);
        setNameInput.addEventListener("change", updateCollectorNumbers);
        
        // Close suggestions on outside click
        document.addEventListener("click", function(e) {
            if (e.target !== cardNameInput && e.target !== suggestionsList) {
                suggestionsList.style.display = "none";
            }
        });
    });
</script>
{% endblock %}