{% extends "base.html" %}

{% block title %}Confirm Purchase - Makenotwork{% endblock %}
{% block body_attrs %} class="purchase-page"{% endblock %}

{% block content %}
    <div class="container">
        <h1 class="brand-h1">Makenot<span class="dot">.</span>work</h1>
        <p class="tagline">Fair distribution for creatives of all kinds<span class="dot">.</span></p>

        <div class="checkout-box content-section">
            <div class="step-indicator">Step 2 of 2</div>
            <h2 class="section-header">Confirm Purchase</h2>

            <div class="item-summary">
                <div class="item-thumbnail">{{ item.thumbnail }}</div>
                <div class="item-details">
                    <div class="item-title">{{ item.title }}</div>
                    <div class="item-creator">
                        by <a href="/u/{{ creator_username }}">{{ creator_username }}</a>
                    </div>
                    <div class="item-description">{{ item.description }}</div>
                </div>
            </div>

            <div class="info-box">
                <h3>What you'll get:</h3>
                <ul>
                    <li>Lifetime access to all current and future versions</li>
                    <li>Email notifications for updates</li>
                    <li>Direct support from the creator</li>
                </ul>
            </div>

            <div class="price-breakdown">
                <h2 class="section-header">Price Breakdown</h2>
                <div class="price-row">
                    <span>Item price</span>
                    <span>{{ item.price }}</span>
                </div>
                <div class="price-row total">
                    <span>You pay</span>
                    <span>{{ item.price }}</span>
                </div>
                <p class="price-breakdown-note">
                    {% if stripe_tax_enabled %}
                    Applicable taxes will be calculated at checkout based on your location.
                    {% else %}
                    Taxes not included. Applicable taxes may vary by jurisdiction.
                    {% endif %}
                </p>
            </div>

            <div class="creator-breakdown">
                <h2 class="section-header">What {{ creator_username }} receives</h2>
                <div class="price-row">
                    <span>Payment processing (~2.9% + 30c)</span>
                    <span>-${{ stripe_fee }}</span>
                </div>
                <div class="price-row">
                    <span>Platform fee</span>
                    <span class="platform-fee-amount">$0.00</span>
                </div>
                <div class="price-row is-total">
                    <span>Creator receives</span>
                    <span>~${{ creator_receives }}</span>
                </div>
                <p class="creator-breakdown-note">
                    0% platform fee; only standard payment processing applies.
                </p>
            </div>

            <div class="payment-section">
                <h2 class="section-header">Secure Checkout</h2>
                <p class="payment-section-lead">
                    You'll be redirected to a secure checkout page to complete your purchase.
                </p>

                {% if is_logged_in && !pending_started.is_empty() %}
                <div class="info-box pending-checkout">
                    <p><strong>You have an unfinished checkout</strong> for this item, started {{ pending_started }}.</p>
                    <p class="is-sub">
                        Stripe only allows one open checkout at a time. Cancel the previous attempt to start a new one.
                    </p>
                    <form action="/stripe/checkout/{{ item.id }}/cancel-pending" method="POST">
                        <input type="hidden" name="_csrf" value="{{ csrf_token.as_deref().unwrap_or_default() }}">
                        <button class="btn-secondary" type="submit">Cancel previous checkout</button>
                    </form>
                </div>
                {% endif %}

                {% if is_logged_in %}
                {% if pending_started.is_empty() %}
                <form action="/stripe/checkout/{{ item.id }}" method="POST">
                    {% if pwyw_enabled %}
                    <div class="checkout-field">
                        <label for="pwyw_amount" class="checkout-field-label">Name your price (suggested: ${{ suggested_price }})</label>
                        <div class="pwyw-row">
                            <span class="pwyw-symbol">$</span>
                            <input type="number" id="pwyw_amount" class="pwyw-input" value="{{ suggested_price }}" min="{{ pwyw_min_dollars }}" step="0.01" oninput="updatePwywButton(this.value)">
                            <input type="hidden" id="amount_cents" name="amount_cents" value="{{ pwyw_min_cents }}">
                        </div>
                        {% if pwyw_min_cents > 0 %}
                        <p class="pwyw-min-note">Minimum: ${{ pwyw_min_dollars }}</p>
                        {% endif %}
                    </div>
                    {% endif %}
                    <div class="checkout-field">
                        <label for="promo_code" class="checkout-field-label">Promo code (optional)</label>
                        <input type="text" id="promo_code" name="promo_code" class="promo-input" value="{{ promo_code }}" placeholder="e.g. LAUNCH50">
                    </div>
                    <div class="checkout-field">
                        <label class="share-contact-label">
                            <input type="checkbox" name="share_contact" value="true" class="share-contact-checkbox">
                            Share my email address with the creator
                        </label>
                    </div>
                    <button class="btn-primary" type="submit" id="checkout-btn" data-loading-text="Redirecting to Stripe...">Continue to Payment - {% if pwyw_enabled %}${{ suggested_price }}{% else %}{{ item.price }}{% endif %}</button>
                </form>
                <p class="cart-alt-link">
                    or <a href="#" onclick="fetch('/api/cart/{{ item.id }}',{method:'POST',headers:csrfHeaders()}).then(function(r){if(!r.ok)throw new Error('Failed');return r.json()}).then(function(){window.location.href='/cart'}).catch(function(){alert('Could not add to cart. Please try again.')});return false;">add to cart</a> to buy with other items and save the creator on fees
                </p>
                {% endif %}
                {% else %}
                <div id="guest-checkout">
                    {% if pwyw_enabled %}
                    <div class="checkout-field">
                        <label for="guest_pwyw_amount" class="checkout-field-label">Name your price (suggested: ${{ suggested_price }})</label>
                        <div class="pwyw-row">
                            <span class="pwyw-symbol">$</span>
                            <input type="number" id="guest_pwyw_amount" class="pwyw-input" value="{{ suggested_price }}" min="{{ pwyw_min_dollars }}" step="0.01">
                        </div>
                        {% if pwyw_min_cents > 0 %}
                        <p class="pwyw-min-note">Minimum: ${{ pwyw_min_dollars }}</p>
                        {% endif %}
                    </div>
                    {% endif %}
                    <button class="btn-primary" id="guest-checkout-btn" onclick="guestCheckout()">
                        Buy Now - {% if pwyw_enabled %}${{ suggested_price }}{% else %}{{ item.price }}{% endif %}
                    </button>
                    <p class="guest-hint">
                        No account required. You'll receive a download link via email.
                    </p>
                    <p class="guest-login-prompt">
                        <a href="/login?return_to=/purchase/{{ item.id }}">Log in</a> to save purchases to your library.
                    </p>
                </div>
                <script>
                function guestCheckout() {
                    const btn = document.getElementById('guest-checkout-btn');
                    btn.disabled = true;
                    btn.textContent = 'Redirecting...';

                    const body = {};
                    {% if pwyw_enabled %}
                    const amount = parseFloat(document.getElementById('guest_pwyw_amount').value);
                    body.amount_cents = Math.round(amount * 100);
                    {% endif %}

                    fetch('/api/checkout/guest/{{ item.id }}', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(body),
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (data.checkout_url) {
                            window.location.href = data.checkout_url;
                        } else {
                            btn.disabled = false;
                            btn.textContent = 'Buy Now';
                            alert(data.error || 'Something went wrong');
                        }
                    })
                    .catch(() => {
                        btn.disabled = false;
                        btn.textContent = 'Buy Now';
                        alert('Something went wrong. Please try again.');
                    });
                }
                </script>
                {% endif %}
                <button class="btn-secondary" onclick="window.history.back()">Cancel</button>
            </div>

            <div class="security-note">
                Your payment information is encrypted and never stored on Makenotwork servers
            </div>
        </div>

        <div class="checkout-footer">
            By completing this purchase, you agree to our <a href="/policy">Content Policy</a>
        </div>
    </div>
{% endblock %}

{% block scripts %}
{% if pwyw_enabled %}
<script>
    function updatePwywButton(val) {
        var dollars = parseFloat(val) || 0;
        document.getElementById('amount_cents').value = Math.round(dollars * 100);
        document.getElementById('checkout-btn').textContent = 'Continue to Payment - $' + dollars.toFixed(2);
    }
    // Initialize on load
    (function() {
        var input = document.getElementById('pwyw_amount');
        if (input) updatePwywButton(input.value);
    })();
</script>
{% endif %}
{% endblock %}