{% extends "admin_base.html" %}
{% import "macros/billing_profile_modal.html" as billing_macros %}
{% import "macros/admin_management_header.html" as mh %}

{% block page_title %}Billing Profiles{% endblock %}

{% block admin_content %}
<div id="billing-profiles-page" class="mx-auto w-full max-w-screen-2xl p-4 text-foreground sm:p-6">
{{ mh::management_header_simple(
    title="Billing Profiles",
    subtitle="Define charging models for paid tenants (Fixed, Plugin-based, or Row-based).",
    actions_html='<button type="button" id="btn-create-billing-profile" class="blocks-button blocks-button-primary" data-billing-open-create data-form-id="profileForm" data-modal-id="createProfileModal"><i class="fas fa-plus" aria-hidden="true"></i> Create Profile</button>',
    wrapper_class="mb-5 flex flex-col justify-between gap-4 sm:flex-row sm:items-end",
    actions_class="flex flex-wrap gap-2"
) }}

<section class="mt-5 min-w-0 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6" aria-label="Billing profiles">
            <div class="blocks-responsive-table">
                <table class="blocks-admin-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Fixed Fee</th>
                            <th>Metered (Row-based)</th>
                            <th>Perpetually Free</th>
                            <th>Active Plugins</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for profile in profiles %}
                        <tr>
                            <td data-label="Name">
                                <div class="font-semibold text-brand">{{ profile.name }}</div>
                                <small class="text-muted">ID: {{ profile.id }}</small>
                            </td>
                            <td data-label="Fixed Fee">{{ currency_symbol }}{{ profile.fixed_fee | default(value=0.0) }}</td>
                             <td data-label="Metered (Row-based)">
                                 {% if profile.metered_tables | length > 0 %}
                                 {% for mt in profile.metered_tables %}
                                 <div class="mb-1">
                                     <span class="blocks-status-pill is-info">
                                         {{ mt.table_name }}: {{ currency_symbol }}{{ mt.fee_per_row }} / row (Min: {{ mt.min_rows }})
                                     </span>
                                 </div>
                                 {% endfor %}
                                 {% else %}
                                 <span class="text-sm text-muted">None</span>
                                 {% endif %}
                             </td>
                            <td data-label="Perpetually Free">
                                {% if profile.is_perpetually_free %}
                                <span class="blocks-status-pill is-success">Yes</span>
                                {% else %}
                                <span class="blocks-status-pill is-neutral">No</span>
                                {% endif %}
                            </td>
                            <td data-label="Active Plugins">
                                {% if profile.charge_active_plugins_only %}
                                <span class="blocks-status-pill is-info">Yes</span>
                                {% else %}
                                <span class="text-sm text-muted">No</span>
                                {% endif %}
                            </td>
                            <td data-label="Actions" class="blocks-table-actions">
                                <button type="button" class="blocks-icon-button edit-profile-btn"
                                        data-profile-id="{{ profile.id }}"
                                        data-profile="{{ profile | json_encode }}" aria-label="Edit {{ profile.name }}">
                                    <i class="fas fa-edit" aria-hidden="true"></i>
                                </button>
                                {% if profile.id != 1 and profile.id != 2 %}
                                <form action="/admin/billing-profiles/delete/{{ profile.id }}" method="POST" class="inline-flex" data-confirm-delete-profile="{{ profile.name }}">
                                    <button type="submit" class="blocks-icon-button blocks-icon-button-danger" aria-label="Delete {{ profile.name }}">
                                        <i class="fas fa-trash" aria-hidden="true"></i>
                                    </button>
                                </form>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
</section>

<!-- Create/Edit Profile Modal (Shared Macro) -->
{{ billing_macros::billing_profile_modal(
    id="createProfileModal", 
    form_id="profileForm", 
    action="/admin/billing-profiles", 
    tables=tables, 
    plugins=plugins, 
    currency_symbol=currency_symbol
) }}

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

{% block scripts %}
<script src="/static/js/billing_profiles_shared.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/plugins/core-tenants/assets/js/billing_profiles.js?v={{ asset_version | default(value='1') }}"></script>
{% endblock %}