<div class="partner-hierarchy-page">
  <header class="partner-hierarchy-page__header">
    <h1>Partner hierarchy</h1>
    <p>
      Company &rarr; Project &rarr; Store &rarr; Payment point, as provisioned through the
      partner API. This is the same view a partner sees, read through the same endpoints,
      so it cannot drift from what they have.
    </p>
  </header>

  <div class="partner-hierarchy-page__toolbar">
    <div class="partner-hierarchy-page__envs" role="group" aria-label="Environment">
      @for (env of environments; track env) {
        <button
          type="button"
          class="partner-hierarchy-page__env"
          [class.partner-hierarchy-page__env--active]="facade.environment() === env"
          [attr.aria-pressed]="facade.environment() === env"
          (click)="facade.setEnvironment(env)">
          {{ env }}
        </button>
      }
    </div>

    <p class="partner-hierarchy-page__summary">
      {{ facade.rows().length }} nodes &middot;
      {{ facade.paymentPointCount() }} payment points &middot;
      {{ facade.suspendedCount() }} suspended
    </p>
  </div>

  @if (facade.error(); as message) {
    <p class="partner-hierarchy-page__error" role="alert">{{ message }}</p>
  }

  @if (facade.loading()) {
    <p class="partner-hierarchy-page__empty">Loading&hellip;</p>
  } @else if (facade.rows().length === 0) {
    <p class="partner-hierarchy-page__empty">
      No nodes provisioned in {{ facade.environment() }} yet.
    </p>
  } @else {
    <ul class="partner-hierarchy-page__tree">
      @for (row of facade.rows(); track row.node.id) {
        <li class="partner-hierarchy-page__row" [style.padding-left]="indentFor(row.depth)">
          <div class="partner-hierarchy-page__node">
            <span class="partner-hierarchy-page__level">{{ levelLabel(row.node.level) }}</span>
            <strong class="partner-hierarchy-page__name">{{ row.node.displayName }}</strong>
            <app-badge [variant]="badgeVariantFor(row.node.status)">{{ row.node.status }}</app-badge>
            <code class="partner-hierarchy-page__ref">{{ row.node.externalReference }}</code>
          </div>

          <div class="partner-hierarchy-page__actions">
            @if (row.node.status === 'active') {
              <button type="button" (click)="facade.suspend(row.node.id)">Suspend</button>
            }
            @if (row.node.status === 'suspended') {
              <button type="button" (click)="facade.activate(row.node.id)">Activate</button>
            }
            @if (row.node.status !== 'disabled') {
              <button
                type="button"
                class="partner-hierarchy-page__danger"
                (click)="requestDisable(row.node)">
                Disable
              </button>
            }
          </div>
        </li>
      }
    </ul>
  }

  <section class="partner-hierarchy-page__credentials">
    <h2>API credentials</h2>
    <p>
      We hold the public key only. The private half is generated by the partner and is never
      transmitted to us, never stored here, never logged.
    </p>

    @if (facade.credentials().length === 0) {
      <p class="partner-hierarchy-page__empty">No credentials registered.</p>
    } @else {
      <ul class="partner-hierarchy-page__creds">
        @for (credential of facade.credentials(); track credential.keyId) {
          <li>
            <code>{{ credential.keyId }}</code>
            <app-badge [variant]="credential.status === 'active' ? 'success' : 'neutral'">
              {{ credential.status }}
            </app-badge>
            <span>scope: {{ credential.scopeNodeId }}</span>
            <span>{{ credential.algorithm }}</span>
            <span>{{ credential.environment }}</span>
          </li>
        }
      </ul>
    }
  </section>
</div>

<app-confirm-dialog
  [open]="pendingDisable() !== null"
  titleText="Disable this node?"
  [message]="
    'Disabling is permanent and cascades to every node underneath it. ' +
    'It cannot be undone - re-provisioning creates a new node with a new id.'
  "
  confirmLabel="Disable"
  [destructive]="true"
  (confirmed)="confirmDisable()"
  (cancelled)="cancelDisable()" />
