{% extends "base.html" %}
{% import "macros/admin_management_header.html" as mh %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/user-billing/assets/css/user-billing.ui.css">
{% endblock %}

{% block page_title %}Account balance and access{% endblock %}

{% block content %}
<main class="user-billing-container" data-plugin="user-billing">
    {{ mh::management_header_simple(
        title="Account balance and access",
        subtitle="See what your account covers, how much is due, and your past payments.",
        include_actions_column=false
    ) }}

    <div class="billing-grid">
        <!-- Account summary -->
        <div class="card status-card">
            <div class="card-header">
                <h3>Your account</h3>
            </div>
            <div class="card-body">
                {% if status %}
                    <div class="status-info">
                        <div class="status-badge-container">
                            {% if status.is_perpetually_free %}
                            <span class="status-badge success">No payment needed</span>
                            {% elif is_active %}
                            <span class="status-badge primary">Access active</span>
                            {% else %}
                            <span class="status-badge danger">Payment needed to restore access</span>
                            {% endif %}
                        </div>
                        
                        <div class="info-row">
                            <span>Account plan</span>
                            <strong class="mb-0 text-xl font-semibold text-brand">{{ status.profile_name | default(value="Default") }}</strong>
                        </div>
                        
                        <div class="plan-details">
                            <strong class="block mb-2 text-foreground">What this payment covers</strong>
                            <ul>
                            {% for line in plan_description %}
                                <li>
                                    <i class="fas fa-check-circle shrink-0 text-success" aria-hidden="true"></i>
                                    <span>{{ line }}</span>
                                </li>
                            {% endfor %}
                            </ul>
                        </div>
                        
                        {% if not status.is_perpetually_free %}
                        <div class="info-row">
                            <span>Access through</span>
                            <strong>
                                {% if status.validity_end %}
                                {{ status.validity_end | date_in_tz(timezone=settings.timezone) }}
                                {% else %}
                                Not started yet
                                {% endif %}
                            </strong>
                        </div>
                        <div class="info-row">
                            <span>Balance available</span>
                            <strong>{{ settings.currency_symbol }} {{ status.balance | price }}</strong>
                        </div>
                        <div class="info-row">
                            <span>Total for selected period</span>
                            <strong class="mb-0 text-2xl font-bold text-success"><span id="recharge-amount">{{ settings.currency_symbol }} {{ payable_amount | price }}</span></strong>
                        </div>
                        <p class="blocks-workspace-help mt-4">The recharge amount is calculated from your account plan, including any included services or usage. You do not need to choose a plugin or explain what you are paying for.</p>
                        {% if payable_amount > 0 %}
                        <div class="billing-period-picker">
                            <label for="recharge-periods">How long should this recharge cover?</label>
                            <div class="billing-period-input"><input id="recharge-periods" type="number" min="{{ min_recharge_periods }}" step="1" value="{{ min_recharge_periods }}" inputmode="numeric" aria-describedby="recharge-period-help"><span>30-day periods</span></div>
                            <p id="recharge-period-help" class="blocks-workspace-help">Minimum {{ min_recharge_days }} days. Each additional period adds 30 days; choose 2 for 60 days, 3 for 90 days, and so on.</p>
                            <p class="billing-period-summary"><strong><span id="recharge-total-days">{{ min_recharge_days }}</span> days of access</strong><span id="recharge-extra-cost"></span></p>
                        </div>
                        {% endif %}
                        {% endif %}
                    </div>
                    
                    {% if not status.is_perpetually_free and payable_amount > 0 %}
                    <div class="mt-4">
                        {% if online_payment_available %}
                        <button class="btn btn-primary min-h-12 w-full justify-center px-6 py-3 text-base font-semibold" id="btn-recharge" data-idle-label="Pay {{ settings.currency_symbol }} {{ payable_amount | price }} to recharge">
                            <i class="fas fa-bolt" aria-hidden="true"></i> Pay {{ settings.currency_symbol }} {{ payable_amount | price }} to recharge
                        </button>
                        <p class="blocks-workspace-help mt-2">Your balance and access update after the payment is confirmed.</p>
                        {% else %}
                        <p class="blocks-workspace-notice" role="status">Online payment is not available right now. Please contact your administrator to recharge this account.</p>
                        {% endif %}
                    </div>
                    {% elif not status.is_perpetually_free %}
                    <p class="blocks-workspace-notice mt-4" role="status">No recharge is due right now.</p>
                    {% endif %}
                {% else %}
                    <p class="billing-empty-state">This account does not have a billing plan yet, so there is no recharge amount to pay. Contact your administrator if you expected a plan here.</p>
                {% endif %}
            </div>
        </div>

        <!-- Transactions Card -->
        <div class="card transactions-card">
            <div class="card-header">
                <h3>Payment history</h3>
            </div>
            <div class="card-body p-0">
                <table class="blocks-admin-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Amount</th>
                            <th>Access period</th>
                            <th>Result</th>
                            <th>Payment reference</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tx in transactions %}
                        <tr>
                            <td>{{ tx.created_at | date_in_tz(timezone=settings.timezone) }}</td>
                            <td>{{ settings.currency_symbol }} {{ tx.amount | price }}</td>
                            <td>{% if tx.prepay_days %}{{ tx.prepay_days }} days{% else %}—{% endif %}</td>
                            <td>
                                {% if tx.status == 'completed' %}<span class="text-success">Paid</span>
                                {% elif tx.status == 'pending' %}<span class="text-warning">Waiting for payment confirmation</span>
                                {% elif tx.status == 'failed' %}<span class="text-danger">Not completed</span>
                                {% else %}<span>{{ tx.status }}</span>{% endif %}
                            </td>
                            <td><code>{{ tx.external_id | default(value='—') }}</code></td>
                        </tr>
                        {% else %}
                        <tr><td colspan="5" class="text-center">No payments yet. Your payment history will appear here after your first recharge.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</main>

<div id="recharge-config" hidden
    data-currency-symbol="{{ settings.currency_symbol }}"
    data-gateway-script-url="{{ gateway_script_url }}"
    data-minimum-days="{{ min_recharge_days }}"
    data-initial-amount="{{ payable_amount }}"
    data-per-30-days="{{ recharge_per_30_days }}">
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/user-billing/assets/js/index.js"></script>
{% endblock %}