<div class="integrations-page">
  <header>
    <h1>Integrations</h1>
    <p>External marketplace connectors, payment providers, FX sources, messaging. No fixed partner list - connectors onboard as partners arrive (docs/backend/PHASE-4-CONNECTOR-FRAMEWORK-CONTRACT.md).</p>
  </header>

  @if (facade.connectors().length === 0 && !facade.loading()) {
    <app-empty-state title="No connectors yet" description="Onboard the first partner connector to see it here." />
  } @else {
    <table class="integrations-page__table">
      <thead>
        <tr>
          <th>Provider</th><th>Status</th><th>Last success</th><th>Lag</th><th>Errors</th><th>Backlog</th><th>Unmatched</th><th></th>
        </tr>
      </thead>
      <tbody>
        @for (c of facade.connectors(); track c.id) {
          <tr>
            <td>{{ c.provider }}</td>
            <td><app-badge [variant]="c.status === 'active' ? 'success' : c.status === 'error' ? 'danger' : 'neutral'">{{ c.status }}</app-badge></td>
            <td>{{ c.lastSuccessAt || '-' }}</td>
            <td>{{ c.lagSeconds ?? '-' }}s</td>
            <td>{{ c.errorCount }}</td>
            <td>{{ c.backlogCount }}</td>
            <td>{{ c.unmatchedCount }}</td>
            <td>
              @if (c.status === 'active') {
                <app-button variant="secondary" (click)="facade.pause(c.id)">Pause</app-button>
              } @else {
                <app-button variant="secondary" (click)="facade.resume(c.id)">Resume</app-button>
              }
            </td>
          </tr>
        }
      </tbody>
    </table>
  }
</div>
