<div class="finance-page">
  <header>
    <h1>Payments &amp; Finance</h1>
    <p>Reconciliation queue and settlements. Mock-gateway backed until docs/backend/PHASE-7-PAYMENTS-RECONCILIATION-CONTRACT.md ships.</p>
  </header>

  <section>
    <h2>Reconciliation queue</h2>
    @if (facade.reconciliation().length === 0 && !facade.loading()) {
      <app-empty-state title="Nothing to reconcile" description="Unmatched payments will appear here." />
    } @else {
      <ul>
        @for (r of facade.reconciliation(); track r.id) {
          <li>
            {{ r.orderId }} - {{ r.result }}
            <app-button variant="secondary" (click)="facade.resolve(r.id, 'resolved from backoffice')">Resolve</app-button>
          </li>
        }
      </ul>
    }
  </section>

  <section>
    <h2>Settlements</h2>
    @if (facade.settlements().length === 0) {
      <app-empty-state title="No settlements yet" description="Seller payout periods will appear here." />
    }
  </section>
</div>
