<a mat-button routerLink="../"><mat-icon>arrow_back</mat-icon>Mehr</a>
<header>
  <p class="eyebrow">Transparenz</p>
  <h1>Öffentliche Freigabe</h1>
  <p>Teile Kassenstand, Mitgliedersalden, Strafenkatalog und Buchungsverläufe.</p>
</header>

@if (loading()) {
  <div class="state"><mat-spinner diameter="38" /><span>Freigabe wird geladen …</span></div>
} @else if (loadFailed()) {
  <div class="state">
    <mat-icon>cloud_off</mat-icon><strong>Freigabe konnte nicht geladen werden.</strong>
    <button mat-stroked-button type="button" (click)="retry()">Erneut versuchen</button>
  </div>
} @else if (status(); as access) {
  <mat-card class="status-card" [class.active]="access.enabled">
    <div class="status-icon">
      <mat-icon>{{ access.enabled ? 'public' : 'public_off' }}</mat-icon>
    </div>
    <div>
      <strong>Freigabe ist {{ access.enabled ? 'aktiv' : 'deaktiviert' }}</strong>
      <span>
        {{
          access.enabled
            ? 'Jeder mit dem Link kann die Teamdaten sehen.'
            : 'Die öffentliche Ansicht ist nicht erreichbar.'
        }}
      </span>
    </div>
    @if (canManage()) {
      <button mat-flat-button type="button" [disabled]="saving()" (click)="toggleAccess()">
        {{ access.enabled ? 'Deaktivieren' : 'Aktivieren' }}
      </button>
    }
  </mat-card>

  @if (access.enabled && publicUrl()) {
    <section class="share-grid">
      <mat-card class="share-card">
        <p class="eyebrow">Öffentlicher Link</p>
        <mat-form-field appearance="outline">
          <mat-label>Freigabelink</mat-label>
          <input data-testid="public-link" matInput readonly [value]="publicUrl()" />
        </mat-form-field>
        <div class="actions">
          <button mat-flat-button type="button" (click)="copyLink()">
            <mat-icon>content_copy</mat-icon>Kopieren
          </button>
          <button mat-stroked-button type="button" (click)="shareLink()">
            <mat-icon>share</mat-icon>Teilen
          </button>
          <a mat-stroked-button [href]="publicUrl()" target="_blank" rel="noopener">
            <mat-icon>open_in_new</mat-icon>Vorschau
          </a>
        </div>
      </mat-card>

      <mat-card class="qr-card">
        <p class="eyebrow">QR-Code</p>
        @if (qrDataUrl()) {
          <img
            data-testid="public-qr"
            [src]="qrDataUrl()"
            [alt]="'QR-Code zur öffentlichen Ansicht von ' + (team()?.name ?? 'TeamWallet')"
          />
        }
        <span>Scannen, um die öffentliche Teamansicht zu öffnen.</span>
      </mat-card>
    </section>

    @if (canManage()) {
      <mat-card class="danger-card">
        <div>
          <strong>Link erneuern</strong>
          <span>Der bisherige Link wird sofort ungültig.</span>
        </div>
        <button
          data-testid="rotate-link"
          mat-stroked-button
          type="button"
          [disabled]="saving()"
          (click)="rotateLink()"
        >
          <mat-icon>refresh</mat-icon>Link erneuern
        </button>
      </mat-card>
    }
  } @else if (!canManage()) {
    <mat-card class="hint-card">
      <mat-icon>lock</mat-icon>
      <span>Kapitän, Kassenwart oder Trainer können die Freigabe aktivieren.</span>
    </mat-card>
  }
}
