{% include "wizards/partials/step_nav.html" %}

<div class="wizard-step">
    <h2 class="subtitle-h2">Monetization</h2>
    <p class="step-description">Choose how people access your project. 0% platform fee — only ~3% payment processing fee.</p>

    <form hx-post="/dashboard/new-project/{{ slug }}/step/monetization"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/new-project/{{ slug }}/step/first-content">

        {% if !stripe_connected %}
        <div class="info-box mb-5">
            <strong>Stripe not connected.</strong> To accept payments, connect your Stripe account in
            <a href="/dashboard">Dashboard &rarr; Payments</a>. You can still configure pricing now and connect later.
        </div>
        {% endif %}

        <div class="form-group">
            <label>Project pricing</label>
            <select name="pricing_model" id="pricing-model" onchange="updatePricingUI()">
                <option value="free"{% if pricing_model == "free" %} selected{% endif %}>Free — anyone can access</option>
                <option value="buy_once"{% if pricing_model == "buy_once" %} selected{% endif %}>One-time purchase</option>
                <option value="pwyw"{% if pricing_model == "pwyw" %} selected{% endif %}>Pay what you want</option>
                <option value="subscription"{% if pricing_model == "subscription" %} selected{% endif %}>Membership — recurring monthly</option>
            </select>
        </div>

        <div id="buy-once-fields" class="hidden">
            <div class="form-group">
                <label for="price_dollars">Price ($)</label>
                <input type="number" name="price_dollars" id="price_dollars" min="0.50" step="0.01"
                       placeholder="9.99" value="{{ price_dollars }}" disabled>
            </div>
        </div>

        <div id="pwyw-fields" class="hidden">
            <div class="form-group">
                <label for="pwyw_min_dollars">Minimum price ($, 0 for no minimum)</label>
                <input type="number" name="pwyw_min_dollars" id="pwyw_min_dollars" min="0" step="0.01"
                       placeholder="0.00" value="{{ pwyw_min_dollars }}" disabled>
            </div>
        </div>

        <div id="subscription-fields" class="hidden">
            <div class="info-box mb-4">
                Members get access to all paid items in this project.
                Individual item pricing (pay-once, pay-what-you-want, free) is configured when you create each item.
            </div>

            <div id="tier-list">
            {% for tier in tiers %}
                <div class="tier-row">
                    <span class="tier-name">{{ tier.name }}</span>
                    <span class="tier-price">{{ tier.price_display }}/mo</span>
                </div>
            {% endfor %}
            </div>
            <div id="tier-forms"></div>
            <button type="button" class="btn-secondary mt-2"
                    onclick="addTierForm()">Add Tier</button>
        </div>

        <div class="wizard-actions">
            <button type="button" class="btn-secondary"
                    hx-get="/dashboard/new-project/{{ slug }}/step/appearance"
                    hx-target="#wizard-step" hx-swap="innerHTML"
                    hx-push-url="/dashboard/new-project/{{ slug }}/step/appearance">Back</button>
            <button type="button" class="btn-secondary"
                    hx-get="/dashboard/new-project/{{ slug }}/step/first-content"
                    hx-target="#wizard-step" hx-swap="innerHTML"
                    hx-push-url="/dashboard/new-project/{{ slug }}/step/first-content">Skip</button>
            <button type="submit" class="btn-primary">Continue</button>
        </div>
    </form>
</div>

<script>
var tierIndex = {{ tiers.len() }};

function updatePricingUI() {
    var model = document.getElementById('pricing-model').value;

    var sections = [
        { id: 'buy-once-fields', active: model === 'buy_once' },
        { id: 'pwyw-fields', active: model === 'pwyw' },
        { id: 'subscription-fields', active: model === 'subscription' }
    ];

    sections.forEach(function(s) {
        var el = document.getElementById(s.id);
        el.classList.toggle('hidden', !s.active);
        // Disable hidden inputs so they don't block form validation
        var inputs = el.querySelectorAll('input, select');
        inputs.forEach(function(inp) { inp.disabled = !s.active; });
    });
}

function addTierForm() {
    var container = document.getElementById('tier-forms');
    var html = '<div class="tier-form-row">' +
        '<div class="form-group"><label>Tier Name</label>' +
        '<input type="text" name="tier_name_' + tierIndex + '" placeholder="e.g. Supporter" required></div>' +
        '<div class="form-group"><label>Price ($/month)</label>' +
        '<input type="number" name="tier_price_' + tierIndex + '" min="1" step="0.01" placeholder="5.00" required></div>' +
        '<div class="form-group"><label>Description</label>' +
        '<input type="text" name="tier_desc_' + tierIndex + '" placeholder="What members get..."></div>' +
        '</div>';
    container.insertAdjacentHTML('beforeend', html);
    tierIndex++;
}

updatePricingUI();
</script>