{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}App Usage Payment{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/app_billing_pay.css">
{% endblock %}
{% block content %}
<header class="topbar">
    <h1>App Usage Payment</h1>
    <div class="hil-inline-d1c861a985">
        {% if is_server_owner %}
        <a class="btn" href="/admin/app-billing">Billing Control</a>
        {% endif %}
        <a class="btn alt" href="/admin">Back to Admin</a>
    </div>
</header>

<main class="page">
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    {% if is_server_owner and server_shop_options %}
    <section class="panel hil-inline-905d8b3da3">
        <form method="GET" action="/admin/app-billing/pay">
            <label>Server-owner shop context</label>
            <select name="shop_id" onchange="this.form.submit()">
                {% for option in server_shop_options %}
                <option value="{{ option.id }}" {% if option.id == selected_shop_id %}selected{% endif %}>
                    {{ option.name or option.code or ('Shop #' ~ option.id) }} #{{ option.id }}
                </option>
                {% endfor %}
            </select>
        </form>
        <p class="muted">Server owner can open app usage billing for any shop. This does not reduce owner access to billing control, reports, or platform pages.</p>
    </section>
    {% endif %}

    <section class="hero">
        <div class="panel">
            <h2>{{ shop.name if shop else brand_name }} App Subscription</h2>
            <p class="muted">Your app usage charge is calculated from the number of products in your shop. You can subscribe or pay before the due date so the app does not lock during work time.</p>
            <p><span class="badge">{{ product_count }} products</span> <span class="badge">{{ tier_label }}</span></p>
        </div>
        <div class="panel amount-card">
            <span>{{ 'Payments Paused' if is_billing_exempt else ('Amount Due Today' if not is_free_trial else 'Current Trial Charge') }}</span>
            <strong>USD {{ "{:,.2f}".format(amount|float) }}</strong>
            {% if is_billing_exempt %}
            <p class="muted">
                {% if is_default_exempt %}
                    The default shop never pays app usage billing.
                {% else %}
                    The server admin has paused app usage payments for this shop{% if exemption and exemption.reason %}: {{ exemption.reason }}{% endif %}.
                {% endif %}
            </p>
            {% elif is_free_trial %}
            <p class="muted">First month free. Payments start from the second month{% if billing_starts_at %} on {{ billing_starts_at.strftime('%Y-%m-%d') }}{% endif %}.</p>
            <p class="muted">Regular monthly price after trial: USD {{ "{:,.2f}".format(regular_amount|float) }}.</p>
            {% else %}
            <p class="muted">Billing is active. The next billing date is {{ next_billing_date }}.</p>
            {% endif %}
        </div>
    </section>

    <section class="panel subscription-card">
        <h2 class="hil-inline-d462248a40">Subscription Status</h2>
        {% if is_billing_exempt %}
            <p><span class="badge good">Exempt</span></p>
            <p class="muted">
                {% if is_default_exempt %}
                    This built-in default shop is protected from app billing and automatic payment attempts.
                {% else %}
                    App usage payments are paused for this shop. Sales will not be blocked by app usage billing.
                {% endif %}
            </p>
        {% elif subscription %}
            <p><span class="badge">{{ subscription.status|title }}</span> <span class="badge">{{ (subscription.method_code or 'unknown').replace('_', ' ')|title }}</span></p>
            <p class="muted">Next billing date: {{ subscription.next_payment_date or next_billing_date }}. Automatic payment attempts are {{ 'enabled' if subscription.auto_pay else 'saved but not automatic' }}.</p>
            <p class="muted">You can update the payment details below or pay early before the due date.</p>
        {% else %}
            <p class="muted">No subscription is saved yet. Choose a payment mode below and subscribe before the month ends.</p>
        {% endif %}
        <p class="muted">All app subscription prices are shown in USD. Payments are routed to the server-owner merchant or bank account configured in App Billing. Card and wallet credentials are handled by the payment provider checkout; this page only saves payer contact and transaction reference details.</p>
    </section>

    {% if is_free_trial and not is_billing_exempt %}
    <section class="panel hil-inline-86de7ac63a">
        <h2 class="hil-inline-d462248a40">First Month Free</h2>
        <p class="muted">No payment is required today, but you can subscribe now or pay the first month early. Early payment amount: USD {{ "{:,.2f}".format(payment_amount|float) }}.</p>
    </section>
    {% endif %}

    {% if not is_billing_exempt %}
    <section class="panel">
        <h2 class="hil-inline-d462248a40">Choose Payment Mode</h2>
        <p class="muted">Use a worldwide payment mode according to your preference. Local-only or offline collection modes are not used for app usage payments. Automatic billing attempts run on the due date where the selected provider supports API checkout.</p>
        <div class="method-grid">
            {% for method in methods %}
            <form class="method-card" method="POST" action="/admin/app-billing/pay">
                <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                {% if is_server_owner %}
                <input type="hidden" name="shop_id" value="{{ selected_shop_id }}">
                {% endif %}
                <input type="hidden" name="method_code" value="{{ method.code }}">
                <h3>{{ method.display_name }}</h3>
                <p class="muted">{{ method.category }}</p>
                <p>{{ method.instructions }}</p>

                <label>Payer name</label>
                <input name="payer_name" placeholder="Name on wallet, card, or bank account" value="{{ subscription_payer_details.name if subscription and subscription.method_code == method.code else '' }}">

                <label>Payer country</label>
                <input name="payer_country" placeholder="Country money is coming from" value="{{ subscription_payer_details.country if subscription and subscription.method_code == method.code else '' }}">

                <label>Email{% if method.code in ['paypal', 'paystack', 'flutterwave'] %} required{% endif %}</label>
                <input name="payer_email" type="email" placeholder="billing email" value="{{ subscription.payer_email if subscription and subscription.method_code == method.code else '' }}" {% if method.code in ['paypal', 'paystack', 'flutterwave'] %}required{% endif %}>

                <label>Phone / wallet number</label>
                <input name="payer_phone" placeholder="International phone or wallet number" value="{{ subscription.payer_phone if subscription and subscription.method_code == method.code else '' }}">

                <label>Source account / number{% if method.code == 'bank_transfer' %} required{% endif %}</label>
                <input name="payer_account" placeholder="Card last 4, wallet ID, bank account, or sending number" value="{{ subscription_payer_details.source_account if subscription and subscription.method_code == method.code else '' }}" {% if method.code == 'bank_transfer' %}required{% endif %}>

                <label>Transaction reference{% if method.code == 'bank_transfer' %} required when paying now{% endif %}</label>
                <input name="payer_reference" placeholder="Transaction code, bank wire ref, or provider note" value="{{ subscription.payer_reference if subscription and subscription.method_code == method.code else '' }}">

                <label class="hil-inline-f5699fb288">
                    <input type="checkbox" name="auto_pay" value="1" checked class="hil-inline-a3d6c55d04">
                    Save this mode for due-date billing attempts where provider checkout supports it
                </label>

                <div class="method-actions">
                    <button type="submit" name="action" value="subscribe">
                        {{ 'Update Subscription' if subscription and subscription.method_code == method.code else ('Subscribe Now' if is_free_trial else 'Subscribe And Pay Due Amount') }}
                    </button>
                    {% if is_free_trial %}
                    <button class="hot" type="submit" name="action" value="pay_early">
                        Pay Early USD {{ "{:,.2f}".format(payment_amount|float) }}
                    </button>
                    {% else %}
                    <button class="hot" type="submit" name="action" value="pay_now">
                        Pay This Month Only USD {{ "{:,.2f}".format(payment_amount|float) }}
                    </button>
                    {% endif %}
                </div>
            </form>
            {% else %}
            <p class="muted">No app payment methods are enabled yet. Ask the server admin to enable one.</p>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="panel hil-inline-86de7ac63a">
        <h2 class="hil-inline-d462248a40">Recent App Payments</h2>
        <div class="table-wrap">
            <table>
                <thead><tr><th>Date</th><th>Amount</th><th>Method</th><th>Reference</th><th>Status</th></tr></thead>
                <tbody>
                {% for payment in payments %}
                    <tr>
                        <td>{{ payment.created_at }}</td>
                        <td>USD {{ "{:,.2f}".format(payment.amount|float) }}</td>
                        <td>{{ (payment.method_code or 'unknown').replace('_', ' ')|title }}</td>
                        <td>{{ payment.reference or '-' }}</td>
                        <td><span class="badge">{{ payment.status }}</span></td>
                    </tr>
                {% else %}
                    <tr><td colspan="5" class="muted">No app usage payments submitted yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
{% endblock %}