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

{% block content %}
<!-- Hero Section -->
{% if seller.hero_image %}
<div style="height: 300px; width: 100%; position: relative; margin-bottom: 2rem; border-radius: 0.5rem; overflow: hidden;">
    <img src="{{ seller.hero_image.url }}" alt="{{ seller.store_name }} Banner" style="width: 100%; height: 100%; object-fit: cover;">
    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 2rem;">
        <!-- Optional: Could put store name here too overlaying the image -->
    </div>
</div>
{% endif %}

<div class="card-grid" style="grid-template-columns: 1fr 3fr; gap: 2rem; align-items: start;">
    <!-- Seller Info Sidebar -->
    <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color); position: sticky; top: calc(var(--nav-height) + 2rem);">
        <div style="text-align: center; margin-bottom: 2rem;">
            <!-- Logo -->
            {% if seller.store_image %}
                <img src="{{ seller.store_image.url }}" alt="{{ seller.store_name }}" style="width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--card-bg); margin: 0 auto 1rem; object-fit: cover; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
            {% else %}
                <div style="width: 100px; height: 100px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 2rem;">
                    🏪
                </div>
            {% endif %}
            
            <h1 style="margin: 0; font-size: 1.5rem;">{{ seller.store_name }}</h1>
            <p style="color: #94a3b8; font-size: 0.875rem;">Verified Seller</p>
            {% if avg_rating %}
            <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
                <span style="font-weight: 600; font-size: 1.125rem;">{{ avg_rating }}/5</span>
            </div>
            {% endif %}
        </div>
        
        <p style="color: var(--text-color); margin-bottom: 2rem; text-align: center; font-size: 0.95rem;">
            {{ seller.description|default:"No description available." }}
        </p>
        
        {% if seller.contact_email or seller.contact_phone or seller.business_address %}
        <div style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
            <h3 style="font-size: 0.875rem; text-transform: uppercase; color: #94a3b8; margin-bottom: 1rem;">Contact Info</h3>
            <div style="display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
                {% if seller.contact_email %}
                    <p style="margin: 0;"><span style="color: #94a3b8;">📧</span> {{ seller.contact_email }}</p>
                {% endif %}
                {% if seller.contact_phone %}
                    <p style="margin: 0;"><span style="color: #94a3b8;">📞</span> {{ seller.contact_phone }}</p>
                {% endif %}
                {% if seller.business_address %}
                    <p style="margin: 0;"><span style="color: #94a3b8;">📍</span> {{ seller.business_address|linebreaksbr }}</p>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Shipping Policy -->
        <div style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
             <h3 style="font-size: 0.875rem; text-transform: uppercase; color: #94a3b8; margin-bottom: 1rem;">Shipping Policy</h3>
             {% if seller.minimum_order_amount > 0 %}
                <p style="margin: 0; font-size: 0.875rem; color: var(--text-color);">
                    Standard Shipping: <strong>${{ seller.shipping_cost }}</strong>
                </p>
                <p style="margin: 0.5rem 0 0; font-size: 0.875rem; color: #10b981;">
                    Free shipping on orders over <strong>${{ seller.minimum_order_amount }}</strong>!
                </p>
             {% else %}
                 <p style="margin: 0; font-size: 0.875rem; color: #10b981;">
                    <strong>Free Shipping</strong> on all orders!
                </p>
             {% endif %}
        </div>
        
        <!-- Report Seller Button -->
        <div style="border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 1rem;">
            <button id="report-seller-btn" type="button" style="width: 100%; padding: 0.5rem 1rem; background: transparent; border: 1px solid #ef4444; color: #ef4444; border-radius: 0.25rem; cursor: pointer; font-size: 0.875rem; transition: all 0.2s ease;">
                ⚠️ Report Seller
            </button>
        </div>
    </div>

    <!-- Listings Content -->
    <div>
        <h2 style="margin-top: 0; margin-bottom: 1.5rem;">Active Listings</h2>

        <!-- Filter Form -->
        <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color); margin-bottom: 2rem;">
            <form method="get" action="" class="filter-form">
                <div style="display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem;">
                    <!-- Search Bar -->
                    <div>
                        <label for="id_q" style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Card Name</label>
                        <input type="text" name="q" id="id_q" value="{{ filters.q|default:'' }}" placeholder="Search card name..." class="form-control" style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color);">
                        <div id="autocomplete-results" style="position: absolute; z-index: 1000; background: var(--card-bg); border: 1px solid var(--border-color); width: 100%; max-height: 200px; overflow-y: auto; display: none;"></div>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
                    <!-- Game Filter -->
                    <div>
                        <label for="id_game" style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Game</label>
                        <select name="game" id="id_game" style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color);">
                            <option value="">All Games</option>
                            {% for game in games %}
                                <option value="{{ game.slug }}" {% if filters.game == game.slug %}selected{% endif %}>{{ game.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Set Filter -->
                    <div>
                        <label for="id_set" style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Set</label>
                        <select name="set" id="id_set" style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color);">
                            <option value="">All Sets</option>
                            {% for set in sets %}
                                <option value="{{ set.code }}" {% if filters.set == set.code %}selected{% endif %}>{{ set.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Condition Filter -->
                    <div>
                        <label for="id_condition" style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Condition</label>
                        <select name="condition" id="id_condition" style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color);">
                            <option value="">Any Condition</option>
                            {% for code, label in conditions %}
                                <option value="{{ code }}" {% if filters.condition == code %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Price Min -->
                    <div>
                        <label for="id_min_price" style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Min Price</label>
                        <input type="number" name="min_price" id="id_min_price" value="{{ filters.min_price|default:'' }}" step="0.01" min="0" placeholder="0.00" style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color);">
                    </div>

                    <!-- Price Max -->
                    <div>
                        <label for="id_max_price" style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Max Price</label>
                        <input type="number" name="max_price" id="id_max_price" value="{{ filters.max_price|default:'' }}" step="0.01" min="0" placeholder="0.00" style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color);">
                    </div>

                    <!-- Min Qty -->
                    <div>
                        <label for="id_min_qty" style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Min Qty</label>
                        <input type="number" name="min_qty" id="id_min_qty" value="{{ filters.min_qty|default:'' }}" min="1" placeholder="1" style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color);">
                    </div>
                </div>

                <div style="margin-top: 1.5rem; display: flex; gap: 1rem;">
                    <button type="submit" class="btn" style="padding: 0.5rem 1.5rem;">Apply Filters</button>
                    <a href="{{ request.path }}" class="btn" style="background: transparent; border: 1px solid var(--border-color); padding: 0.5rem 1.5rem;">Clear</a>
                </div>
            </form>
        </div>

        <div class="card-grid" style="gap: 1.5rem;">
            {% for listing in card_listings %}
            <div class="tcg-card" style="display: flex; flex-direction: column;">
                {% if listing.card.image_url %}
                    <img src="{{ listing.card.image_url }}" alt="{{ listing.card.name }}" style="width: 100%; height: 200px; object-fit: cover;">
                {% else %}
                    <div style="width: 100%; height: 200px; background: var(--border-color); display: flex; align-items: center; justify-content: center; color: #94a3b8;">No Image</div>
                {% endif %}
                <div style="padding: 1rem; flex-grow: 1; display: flex; flex-direction: column;">
                    <h3 style="margin: 0 0 0.5rem; font-size: 1rem;">{{ listing.card.name }}</h3>
                    <p style="margin: 0 0 1rem; color: #94a3b8; font-size: 0.875rem;">{{ listing.card.set.name }}</p>
                    
                    <div style="margin-top: auto; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                       <span style="font-weight: 700; font-size: 1.125rem; color: #34d399;">${{ listing.price }}</span>
                       <span style="font-size: 0.75rem; background: var(--bg-color); padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-color);">{{ listing.get_condition_display }}</span>
                    </div>
                    
                    <form action="{% url 'store:add_to_cart' listing.uuid %}" method="post">
                        {% csrf_token %}
                        <button type="submit" class="btn" style="width: 100%;">Add to Cart</button>
                    </form>
                </div>
            </div>
            {% endfor %}
            
            {% for listing in pack_listings %}
            <div class="tcg-card" style="display: flex; flex-direction: column;">
                <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #4c1d95, #6d28d9); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                    PACK
                </div>
                <div style="padding: 1rem; flex-grow: 1; display: flex; flex-direction: column;">
                     <h3 style="margin: 0 0 0.5rem; font-size: 1rem;">{{ listing.name }}</h3>
                     <p style="margin: 0 0 1rem; color: #a78bfa; font-size: 0.875rem;">{{ listing.game.name }}</p>
                     
                     <div style="margin-top: auto; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                        <span style="font-weight: 700; font-size: 1.125rem; color: #34d399;">${{ listing.price }}</span>
                     </div>
                     <form action="{% url 'store:add_pack_to_cart' listing.uuid %}" method="post">
                        {% csrf_token %}
                        <button type="submit" class="btn" style="width: 100%;">Add Pack</button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        
        {% if not card_listings and not pack_listings %}
            <div style="text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem; color: #94a3b8; border: 1px solid var(--border-color);">
                <p>This seller has no active listings at the moment.</p>
            </div>
        {% endif %}

        <!-- Bounty Board Section -->
        <h2 style="margin-top: 3rem; margin-bottom: 1.5rem;">Bounty Board</h2>
        <div style="background: var(--card-bg); padding: 4rem; border-radius: 0.5rem; border: 1px solid var(--border-color); text-align: center; border-style: dashed;">
            <p style="font-size: 1.5rem; font-weight: bold; color: #94a3b8;">TBD</p>
            <p style="color: #64748b;">This seller is not currently accepting bounties.</p>
        </div>
    </div>
</div>
</div>

<script>
    // Simple Autocomplete Logic
    const searchInput = document.getElementById('id_q');
    const resultsContainer = document.getElementById('autocomplete-results');
    
    // Position the results container relative to input
    if (searchInput) {
        const parent = searchInput.parentElement;
        parent.style.position = 'relative';
        
        searchInput.addEventListener('input', function() {
            const query = this.value;
            if (query.length < 2) {
                resultsContainer.style.display = 'none';
                return;
            }
            
            fetch(`/api/card-autocomplete/?q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.results && data.results.length > 0) {
                        resultsContainer.innerHTML = '';
                        resultsContainer.style.display = 'block';
                        
                        data.results.forEach(name => {
                            const div = document.createElement('div');
                            div.textContent = name;
                            div.style.padding = '0.5rem';
                            div.style.cursor = 'pointer';
                            div.style.borderBottom = '1px solid var(--border-color)';
                            
                            div.addEventListener('mouseenter', () => {
                                div.style.background = 'var(--bg-color)';
                            });
                            div.addEventListener('mouseleave', () => {
                                div.style.background = 'transparent';
                            });
                            
                            div.addEventListener('click', () => {
                                searchInput.value = name;
                                resultsContainer.style.display = 'none';
                                // Optional: Auto submit
                                // searchInput.form.submit();
                            });
                            
                            resultsContainer.appendChild(div);
                        });
                    } else {
                        resultsContainer.style.display = 'none';
                    }
                });
        });
        
        // Hide when clicking outside
        document.addEventListener('click', function(e) {
            if (e.target !== searchInput && e.target !== resultsContainer) {
                resultsContainer.style.display = 'none';
            }
        });
    }
</script>

<!-- Report Seller Modal -->
<div id="report-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; max-width: 500px; width: 90%; border: 1px solid var(--border-color);">
        <h2 style="margin-top: 0; margin-bottom: 1rem;">Report Seller</h2>
        <p style="color: #94a3b8; margin-bottom: 1.5rem; font-size: 0.875rem;">Please select a reason for reporting this seller.</p>
        
        <form id="report-form">
            <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem;">
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="radio" name="reason" value="explicit" required>
                    <span>Explicit/NSFW Content</span>
                </label>
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="radio" name="reason" value="scam">
                    <span>Scam</span>
                </label>
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="radio" name="reason" value="other">
                    <span>Other</span>
                </label>
            </div>
            
            <div style="margin-bottom: 1.5rem;">
                <label for="report-details" style="display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: #94a3b8;">Additional Details (Optional)</label>
                <textarea id="report-details" name="details" rows="4" style="width: 100%; padding: 0.75rem; border-radius: 0.25rem; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); resize: vertical;" placeholder="Provide any additional context..."></textarea>
            </div>
            
            <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                <button type="button" id="cancel-report-btn" style="padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--border-color); color: var(--text-color); border-radius: 0.25rem; cursor: pointer;">Cancel</button>
                <button type="submit" style="padding: 0.5rem 1rem; background: #ef4444; border: none; color: white; border-radius: 0.25rem; cursor: pointer;">Submit Report</button>
            </div>
        </form>
    </div>
</div>

<script>
    // Report Seller Modal Logic
    const reportBtn = document.getElementById('report-seller-btn');
    const reportModal = document.getElementById('report-modal');
    const cancelReportBtn = document.getElementById('cancel-report-btn');
    const reportForm = document.getElementById('report-form');
    
    if (reportBtn && reportModal) {
        reportBtn.addEventListener('click', function() {
            reportModal.style.display = 'flex';
        });
        
        cancelReportBtn.addEventListener('click', function() {
            reportModal.style.display = 'none';
            reportForm.reset();
        });
        
        reportModal.addEventListener('click', function(e) {
            if (e.target === reportModal) {
                reportModal.style.display = 'none';
                reportForm.reset();
            }
        });
        
        reportForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(reportForm);
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
            
            fetch('{% url "store:report_seller" seller.slug %}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    reportModal.style.display = 'none';
                    reportForm.reset();
                    alert('Report submitted successfully. Thank you for helping keep our marketplace safe.');
                } else {
                    alert('Error: ' + (data.message || 'Failed to submit report'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while submitting the report.');
            });
        });
    }
</script>
{% endblock %}