{% extends "admin_base.html" %}
{% import "macros/user_cell.html" as user_cell %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/loading_spinner.html" as spinner %}

{% block page_title %}Referral Management{% endblock %}

{% block extra_head %}
{% endblock %}

{% block admin_content %}
    <div class="referral-header">
        <p>Configure referral benefits and monitor system activity.</p>
    </div>

    <div class="admin-config-grid">
        <section class="referral-card">
            <h3>Reward Configuration</h3>
            <div id="referral-config-form-fields"></div>
            <button type="button" class="blocks-button blocks-button-primary mt-3" id="referral-config-save-btn">Save Settings</button>
        </section>

        <section class="referral-card">
            <h3>System Controls</h3>
            <p>Force a recalculation of recurring rewards based on recent orders.</p>
            <button id="btn-refresh-rewards" class="blocks-button blocks-button-secondary w-full">
                <i class="fas fa-sync"></i> Refresh Recurring Rewards
            </button>
            <div id="refresh-status" class="referral-feedback" role="status" aria-live="polite"></div>
        </section>
    </div>

    <div class="mt-6">
        {{ crud::shell_open(config_url="/plugins/referral/assets/admin/referrals_list.json", mount_id="referral-recent-list") }}
        <table class="referral-table blocks-admin-table">
            <thead></thead>
            <tbody>
                {{ spinner::table_skeleton(colspan=4, lines=3, label="Loading referrals…") }}
            </tbody>
        </table>
        {{ crud::shell_close() }}
    </div>
</div>

<script type="application/json" id="referral-config-json">{{ config | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>
{% endblock %}

{% block scripts %}
<script src="/plugins/referral/assets/referral-admin.js"></script>
{% endblock %}