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

{% block title %}App Billing - Server Admin{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/admin_app_billing.css">
{% endblock %}
{% block content %}
<header class="topbar">
    <h1>Server App Billing</h1>
    <nav>
        <a class="btn alt" href="/admin">Admin</a>
        <a class="btn alt" href="/server/shops">Registered Shops</a>
        <a class="btn hot" href="/admin/app-billing/pay">Test Shop Payment Page</a>
    </nav>
</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 %}

    <section class="hero">
        <div>
            <h2>App Usage Pricing And Payments</h2>
            <p>Set monthly app fees by product count, enable worldwide API-backed payment modes, and monitor subscriptions. Month one is free; shop admins can subscribe or pay early before the due date.</p>
        </div>
        <a class="btn" href="/admin/app-billing/pay">Open Payment Page</a>
    </section>

    <div class="stats">
        <div class="stat"><span>Default Price</span><strong>USD {{ "{:,.2f}".format(settings.base_price|float) }}</strong></div>
        <div class="stat"><span>Pricing Tiers</span><strong>{{ tiers|length }}</strong></div>
        <div class="stat"><span>Payment Modes</span><strong>{{ methods|length }}</strong></div>
    </div>

    <section class="grid">
        <div class="panel span-4">
            <h3>Default Billing</h3>
            <form method="POST" action="/admin/app-billing/settings">
                <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                <label for="currency">Currency</label>
                <input id="currency" name="currency" type="text" value="USD" maxlength="8" readonly required>
                <label for="base_price">Default app price</label>
                <input id="base_price" name="base_price" type="number" min="0" step="0.01" value="{{ settings.base_price or '8' }}" required>
                <button type="submit" class="hil-inline-56f4356299">Save Default Price</button>
            </form>
        </div>

        <div class="panel span-8">
            <h3>Pricing By Product Count</h3>
            <p class="muted">Default structure shown to users in USD: 0-149 products = USD 8; 150-249 = USD 12; 250-349 = USD 16. Add or remove tiers as your billing policy grows.</p>
            <form class="form-row" method="POST" action="/admin/app-billing/tiers">
                <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                <div>
                    <label>Tier label</label>
                    <input name="label" type="text" placeholder="e.g. Small shop">
                </div>
                <div>
                    <label>Min products</label>
                    <input name="min_products" type="number" min="0" value="0" required>
                </div>
                <div>
                    <label>Max products</label>
                    <input name="max_products" type="number" min="0" placeholder="Leave blank for no limit">
                </div>
                <div>
                    <label>Price</label>
                    <input name="amount" type="number" min="0" step="0.01" value="{{ settings.base_price or '8' }}" required>
                </div>
                <button type="submit">Add Tier</button>
            </form>
            <div class="table-wrap hil-inline-d6f2af6e0a">
                <table>
                    <thead><tr><th>Tier</th><th>Products</th><th>Amount</th><th>Action</th></tr></thead>
                    <tbody>
                    {% for tier in tiers %}
                        <tr>
                            <td>{{ tier.label or 'Custom tier' }}</td>
                            <td>{{ tier.min_products }} - {{ tier.max_products if tier.max_products is not none else 'No limit' }}</td>
                            <td>USD {{ "{:,.2f}".format(tier.amount|float) }}</td>
                            <td>
                                <form method="POST" action="/admin/app-billing/tiers/delete" class="confirm-tier-delete">
                                    <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                                    <input type="hidden" name="tier_id" value="{{ tier.id }}">
                                    <button class="danger" type="submit">Delete</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel span-12">
            <h3>Payment Modes For App Usage</h3>
            <p class="muted">Enable the global methods you want shop admins to use. Paybill, Till, cash, and local-only manual modes are removed from app usage billing. The money is routed to the server-owner merchant account/API credentials configured here. Provider payouts to your bank are controlled by your account and payout settings with Stripe, PayPal, Paystack, Flutterwave, Wise, or your bank.</p>
            <div class="method-grid">
                {% for method in methods %}
                <div class="method-card" data-enabled="{{ '1' if method.is_enabled else '0' }}">
                    <form method="POST" action="/admin/app-billing/methods">
                        <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                        <input type="hidden" name="method_code" value="{{ method.code }}">
                        <div class="method-head">
                            <div>
                                <strong>{{ method.display_name }}</strong>
                                <div class="muted">{{ method.category }}</div>
                            </div>
                            {% if method.is_enabled and method.is_configured %}
                            <span class="badge good">Live</span>
                            {% elif method.is_enabled %}
                            <span class="badge warn">Needs credentials</span>
                            {% else %}
                            <span class="badge">Disabled</span>
                            {% endif %}
                        </div>
                        <label>Display name</label>
                        <input name="display_name" type="text" value="{{ method.display_name }}">
                        <label>Instructions</label>
                        <textarea name="instructions">{{ method.instructions }}</textarea>
                        {% for field in method.fields %}
                            {% if field != 'instructions' %}
                            <label>{{ field.replace('_', ' ').title() }}</label>
                            {% if field == 'sandbox' %}
                            <select name="{{ field }}">
                                {% if method.config.get(field, 'true') != 'false' %}
                                <option value="true" selected>Sandbox / Test</option>
                                <option value="false">Live / Production</option>
                                {% else %}
                                <option value="true">Sandbox / Test</option>
                                <option value="false" selected>Live / Production</option>
                                {% endif %}
                            </select>
                            {% elif field == 'currency' %}
                            <input name="{{ field }}" type="text" value="USD" readonly>
                            {% else %}
                            {% set is_secret = 'secret' in field or 'key' in field or 'passkey' in field or 'credential' in field or 'token' in field %}
                            {% if is_secret %}
                            <input
                                name="{{ field }}"
                                value=""
                                placeholder="Saved - leave blank to keep"
                                type="password"
                                autocomplete="off">
                            {% else %}
                            <input
                                name="{{ field }}"
                                value="{{ method.config.get(field, '') }}"
                                type="text"
                                autocomplete="off">
                            {% endif %}
                            {% endif %}
                            {% endif %}
                        {% endfor %}
                        <label class="hil-inline-f5699fb288">
                            <input class="method-enabled-toggle hil-inline-a3d6c55d04" type="checkbox" name="is_enabled" value="1" data-enabled="{{ '1' if method.is_enabled else '0' }}">
                            Show this method to shop admins
                        </label>
                        <button type="submit" class="hil-inline-a4a5b80805">Save Method</button>
                    </form>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="panel span-12">
            <h3>Shop Charges</h3>
            <form class="shop-search" method="GET" action="/admin/app-billing">
                <div>
                    <label for="shop_search">Search shop</label>
                    <input id="shop_search" name="shop_search" type="text" value="{{ search_query or '' }}" placeholder="Shop name, code, or status">
                </div>
                <button type="submit">Search</button>
                <a class="btn alt" href="/admin/app-billing">Clear</a>
            </form>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr><th>Shop</th><th>Products</th><th>Billing Stage</th><th>Current Charge</th><th>Subscription</th><th>Next Billing</th><th>Latest Payment</th><th>Payment Control</th></tr>
                    </thead>
                    <tbody>
                    {% for shop in shops %}
                        <tr>
                            <td><strong>{{ shop.name }}</strong><br><span class="muted">{{ shop.code }}</span></td>
                            <td>{{ shop.product_count }}</td>
                            <td>
                                {% if shop.is_billing_exempt %}
                                    <span class="badge good">{{ 'Default shop protected' if shop.is_default_exempt else 'Payments paused' }}</span>
                                    {% if shop.exemption_reason %}
                                        <div class="muted">{{ shop.exemption_reason }}</div>
                                    {% endif %}
                                {% elif shop.is_free_trial %}
                                    <span class="badge good">First month free</span>
                                    <div class="muted">{{ shop.trial_days_left }} day(s) left{% if shop.billing_starts_at %}; billing starts {{ shop.billing_starts_at.strftime('%Y-%m-%d') }}{% endif %}</div>
                                {% else %}
                                    {{ shop.tier_label }}
                                {% endif %}
                            </td>
                            <td>
                                USD {{ "{:,.2f}".format(shop.app_fee|float) }}
                                {% if shop.is_free_trial and not shop.is_billing_exempt %}
                                    <div class="muted">Then USD {{ "{:,.2f}".format(shop.regular_app_fee|float) }}</div>
                                {% endif %}
                            </td>
                            <td>
                                {% if shop.is_billing_exempt %}
                                    <span class="badge good">Exempt</span>
                                {% elif shop.subscription_status %}
                                    {% if shop.subscription_status == 'active' %}
                                    <span class="badge good">{{ shop.subscription_status|title }}</span>
                                    {% else %}
                                    <span class="badge warn">{{ shop.subscription_status|title }}</span>
                                    {% endif %}
                                    <div class="muted">{{ (shop.subscription_method or 'unknown').replace('_', ' ')|title }}{% if shop.subscription_auto_pay %}; auto enabled{% endif %}</div>
                                {% else %}
                                    <span class="badge warn">Not subscribed</span>
                                {% endif %}
                            </td>
                            <td>{{ '-' if shop.is_billing_exempt else (shop.next_billing_date or '-') }}</td>
                            <td>
                                {% if shop.latest_payment_status %}
                                    {% if shop.latest_payment_status == 'paid' %}
                                    <span class="badge good">{{ shop.latest_payment_status }}</span>
                                    {% elif shop.latest_payment_status in ['pending', 'initiated'] %}
                                    <span class="badge warn">{{ shop.latest_payment_status }}</span>
                                    {% else %}
                                    <span class="badge bad">{{ shop.latest_payment_status }}</span>
                                    {% endif %}
                                    <div class="muted">USD {{ shop.latest_payment_amount }} via {{ shop.latest_payment_method }}</div>
                                {% else %}
                                    <span class="badge warn">No payment</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if shop.is_default_exempt %}
                                    <span class="muted">Built-in default shop</span>
                                    {% elif shop.is_manual_exempt %}
                                    <form class="exemption-form" method="POST" action="/admin/app-billing/exemptions">
                                        <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                                        <input type="hidden" name="shop_id" value="{{ shop.id }}">
                                        <input type="hidden" name="shop_code" value="{{ shop.code }}">
                                        <input type="hidden" name="shop_name" value="{{ shop.name }}">
                                        <input type="hidden" name="active" value="0">
                                        <input type="hidden" name="return_to" value="/admin/app-billing{% if search_query %}?shop_search={{ search_query|urlencode }}{% endif %}">
                                        <input name="reason" type="text" value="{{ shop.exemption_reason or '' }}" placeholder="Reason / note">
                                        <button type="submit">Resume Payments</button>
                                    </form>
                                {% else %}
                                    <form class="exemption-form" method="POST" action="/admin/app-billing/exemptions">
                                        <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                                        <input type="hidden" name="shop_id" value="{{ shop.id }}">
                                        <input type="hidden" name="shop_code" value="{{ shop.code }}">
                                        <input type="hidden" name="shop_name" value="{{ shop.name }}">
                                        <input type="hidden" name="active" value="1">
                                        <input type="hidden" name="return_to" value="/admin/app-billing{% if search_query %}?shop_search={{ search_query|urlencode }}{% endif %}">
                                        <input name="reason" type="text" placeholder="Reason / note">
                                        <button class="hot" type="submit">Pause Payments</button>
                                    </form>
                                    {% endif %}
                                    {% if shop.status == 'suspended' and is_server_owner %}
                                        <form method="POST" action="/admin/shops/{{ shop.id }}/unsuspend" class="hil-inline-8a77e5a311">
                                            <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                                        <button type="submit" class="btn">Resume Shop</button>
                                        </form>
                                    {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="8" class="muted">No shops match that search.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel span-12">
            <h3>Recent App Usage Payments</h3>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Shop</th><th>Amount</th><th>Method</th><th>Reference</th><th>Status</th><th>Date</th><th>Update</th></tr></thead>
                    <tbody>
                    {% for payment in payments %}
                        <tr>
                            <td>{{ payment.shop_name or ('Shop #' ~ payment.shop_id) }}</td>
                            <td>USD {{ "{:,.2f}".format(payment.amount|float) }}</td>
                            <td>{{ (payment.method_code or 'unknown').replace('_', ' ')|title }}</td>
                            <td>{{ payment.reference or '-' }}</td>
                            <td>
                                {% if payment.status == 'paid' %}
                                <span class="badge good">{{ payment.status }}</span>
                                {% elif payment.status in ['pending', 'initiated'] %}
                                <span class="badge warn">{{ payment.status }}</span>
                                {% else %}
                                <span class="badge bad">{{ payment.status }}</span>
                                {% endif %}
                            </td>
                            <td>{{ payment.created_at }}</td>
                            <td>
                                    <form class="compact-form" method="POST" action="/admin/app-billing/payments/status">
                                        <input type="hidden" name="csrf_token" value="{{ app_billing_csrf_token }}">
                                        <input type="hidden" name="payment_id" value="{{ payment.id }}">
                                        <select name="status">
                                        {% for status in ['pending', 'initiated', 'paid', 'failed', 'cancelled'] %}
                                        {% if payment.status == status %}
                                        <option value="{{ status }}" selected>{{ status|title }}</option>
                                        {% else %}
                                        <option value="{{ status }}">{{ status|title }}</option>
                                        {% endif %}
                                        {% endfor %}
                                    </select>
                                    <button type="submit">Save</button>
                                </form>
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="7" class="muted">No app usage payments yet.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</main>
<script>
document.querySelectorAll(".confirm-tier-delete").forEach(function(form) {
    form.addEventListener("submit", function(event) {
        if (!confirm("Delete this pricing tier?")) {
            event.preventDefault();
        }
    });
});
document.querySelectorAll(".method-card[data-enabled='1']").forEach(function(card) {
    card.classList.add("enabled");
});
document.querySelectorAll(".method-enabled-toggle[data-enabled='1']").forEach(function(input) {
    input.checked = true;
});
document.querySelectorAll(".exemption-form").forEach(function(form) {
    form.addEventListener("submit", function() {
        var button = form.querySelector("button[type='submit']");
        if (!button || button.dataset.locked === "1") return;
        button.dataset.locked = "1";
        button.disabled = true;
        button.textContent = "Saving...";
    }, { once: true });
});
</script>
{% endblock %}