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

{% block content %}
<div style="max-width: 800px; margin: 0 auto;">
    <h2 style="margin-bottom: 1.5rem;">Mass Deck Buyer</h2>
    <p style="margin-bottom: 2rem; color: #94a3b8;">Paste your deck list below to instantly find the cheapest printings for every card.</p>

    {% if preview %}
    <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color); margin-bottom: 2rem;">
        <h3 style="margin-top: 0;">Review Purchase</h3>
        <p style="font-size: 1.25rem; font-weight: bold; margin-bottom: 1rem;">Total Estimated Cost: <span style="color: #10b981;">${{ total_cost }}</span></p>
        
        <h4 style="border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Found Items</h4>
        <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
            {% for item in found_items %}
            <li style="display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #334155;">
                <span>{{ item.quantity }}x <strong>{{ item.card_name }}</strong> <small style="color: #94a3b8;">({{ item.listing.get_condition_display }})</small></span>
                <span>${{ item.total }}</span>
            </li>
            {% endfor %}
        </ul>

        {% if missing_items %}
        <h4 style="border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; color: #ef4444;">Missing / Out of Stock</h4>
        <ul style="list-style: none; padding: 0; margin-bottom: 1.5rem;">
            {% for item in missing_items %}
            <li style="padding: 0.5rem 0; color: #f87171;">
                {{ item.quantity }}x {{ item.name }}
            </li>
            {% endfor %}
        </ul>
        {% endif %}

        <form method="post" style="display: flex; gap: 1rem;">
            {% csrf_token %}
            <input type="hidden" name="action" value="add_to_cart">
            <input type="hidden" name="deck_text" value="{{ deck_text }}">
            <button type="submit" class="btn" style="flex: 1;">Confirm & Add to Cart</button>
            <a href="{% url 'store:deck_buyer' %}" class="btn" style="background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); flex: 1; text-align: center; text-decoration: none;">Cancel</a>
        </form>
    </div>
    {% else %}
    <form method="post" style="display: flex; flex-direction: column; gap: 1rem;">
        {% csrf_token %}
        <input type="hidden" name="action" value="preview">
        
        <div style="background: var(--bg-color); padding: 1rem; border: 1px solid var(--border-color); border-radius: 0.5rem;">
            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                <input type="checkbox" name="ignore_owned" id="ignore_owned">
                <span><strong>Complete My Deck:</strong> Exclude cards I already own from my purchase.</span>
            </label>
        </div>

        <label for="deck_text" style="font-weight: bold;">Deck List</label>
        <textarea name="deck_text" id="deck_text" rows="15" placeholder="4 Lightning Bolt&#10;2 Counterspell&#10;1 Sol Ring" style="padding: 1rem; border-radius: 0.5rem; background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); font-family: monospace;"></textarea>
        <button type="submit" class="btn">Find Cards</button>
    </form>
    {% endif %}
</div>
{% endblock %}