{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 class="text-2xl font-semibold text-slate-900">Audit Firm Subscription Billing</h1>
      <p class="mt-1 text-sm text-slate-500">PB2: manage SaaS subscriptions and generate platform bills for Audit Firms.</p>
      {% if synced %}<p class="mt-2 rounded-xl bg-emerald-50 px-3 py-2 text-sm text-emerald-700">Sync completed: {{ synced }}</p>{% endif %}
    </div>
    <div class="flex flex-wrap gap-2">
      {% if can_manage %}
      <form method="post" action="/platform-billing/audit-firm-subscriptions/sync-accounts">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <button class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Sync Audit Firm Accounts</button>
      </form>
      <a href="/platform-billing/subscriptions/new" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">New Subscription</a>
      {% endif %}
      {% if can_generate %}
      <a href="/platform-billing/audit-firm-subscriptions/generate" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-soft">Generate Audit Firm Bills</a>
      {% endif %}
    </div>
  </div>

  <form method="get" class="flex gap-2 rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
    <input name="q" value="{{ q }}" placeholder="Search Audit Firm / subscription" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" />
    <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Search</button>
  </form>

  <div class="rounded-2xl border border-slate-200 bg-white shadow-soft overflow-hidden">
    <div class="border-b border-slate-200 px-5 py-4">
      <h2 class="font-semibold text-slate-900">Active Audit Firm subscriptions</h2>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
          <tr>
            <th class="px-4 py-3">Audit Firm</th>
            <th class="px-4 py-3">Subscription</th>
            <th class="px-4 py-3">Plan</th>
            <th class="px-4 py-3">Cycle</th>
            <th class="px-4 py-3 text-right">Base Amount</th>
            <th class="px-4 py-3">Usage Count</th>
            <th class="px-4 py-3">Status</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for row in rows %}
          {% set sub = row.subscription %}
          <tr>
            <td class="px-4 py-3 font-medium text-slate-900">{{ sub.account.display_name if sub.account else '-' }}</td>
            <td class="px-4 py-3">{{ sub.subscription_code }}</td>
            <td class="px-4 py-3">{{ sub.plan.name if sub.plan else '-' }}</td>
            <td class="px-4 py-3">{{ sub.billing_cycle }}</td>
            <td class="px-4 py-3 text-right">{{ '%.2f'|format(sub.amount or 0) }}</td>
            <td class="px-4 py-3 text-slate-600">
              Clients: {{ row.usage.clients }} · Employees: {{ row.usage.employees }} · Consultants: {{ row.usage.consultants }} · Branches: {{ row.usage.branches }}
            </td>
            <td class="px-4 py-3">{{ sub.status }}</td>
          </tr>
          {% else %}
          <tr><td colspan="7" class="px-4 py-6 text-center text-slate-500">No Audit Firm subscriptions found. Sync Audit Firm accounts, create a plan, then create subscriptions.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <h2 class="font-semibold text-slate-900">Audit Firm billing accounts</h2>
    <p class="mt-1 text-sm text-slate-500">These are platform billing accounts linked to your Audit Firm master. They are separate from firm-level client billing.</p>
    <div class="mt-4 grid gap-3 md:grid-cols-2 lg:grid-cols-3">
      {% for account in audit_firm_accounts %}
      <div class="rounded-xl border border-slate-200 p-4 text-sm">
        <div class="font-semibold text-slate-900">{{ account.display_name }}</div>
        <div class="mt-1 text-slate-500">Code: {{ account.account_code }} · Status: {{ account.status }}</div>
      </div>
      {% else %}
      <div class="rounded-xl bg-slate-50 p-4 text-sm text-slate-500">No Audit Firm billing accounts synced yet.</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}
