<div class="dialog-header">
  <div>
    <h2 mat-dialog-title>Alle Transaktionen</h2>
    <p class="dialog-subtitle">Buchungen des gesamten Teams</p>
  </div>

  <button
    mat-icon-button
    mat-dialog-close
    class="close-button"
    aria-label="Dialog schließen">
    <mat-icon>close</mat-icon>
  </button>
</div>

<mat-dialog-content>
  <div class="dialog-state" *ngIf="isLoading">
    <mat-spinner diameter="44"></mat-spinner>
    <span>Transaktionen werden geladen …</span>
  </div>

  <div class="dialog-state error-state" *ngIf="loadError">
    <mat-icon>error_outline</mat-icon>
    <strong>Transaktionen konnten nicht geladen werden.</strong>
    <button mat-stroked-button (click)="load()">Erneut versuchen</button>
  </div>

  <ng-container *ngIf="!isLoading && !loadError">
    <div class="table-toolbar">
      <mat-form-field appearance="outline" subscriptSizing="dynamic">
        <mat-label>Transaktionen durchsuchen</mat-label>
        <mat-icon matPrefix>search</mat-icon>
        <input
          matInput
          (keyup)="applyFilter($event)"
          placeholder="Name, Betrag oder Notiz"
          #input>
      </mat-form-field>

      <button
        mat-stroked-button
        class="note-toggle"
        (click)="toggleNote()"
        [class.active]="displayedColumns.includes('note')">
        <mat-icon>notes</mat-icon>
        {{ displayedColumns.includes('note') ? 'Notizen ausblenden' : 'Notizen anzeigen' }}
      </button>
    </div>

    <div class="table-shell">
      <div class="table-scroll">
        <table
          mat-table
          [dataSource]="dataSource"
          matSort
          matSortActive="date"
          matSortDirection="desc">

          <ng-container matColumnDef="amount">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Betrag</th>
            <td mat-cell *matCellDef="let element" class="amount-cell">
              {{ element.amount | currency:'EUR' }}
            </td>
          </ng-container>

          <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Datum</th>
            <td mat-cell *matCellDef="let element">{{ element.date | date:'shortDate' }}</td>
          </ng-container>

          <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Typ</th>
            <td mat-cell *matCellDef="let element">{{ element.type }}</td>
          </ng-container>

          <ng-container matColumnDef="note">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Notiz</th>
            <td mat-cell *matCellDef="let element" class="note-cell">{{ element.note || '–' }}</td>
          </ng-container>

          <ng-container matColumnDef="playerName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Spieler</th>
            <td mat-cell *matCellDef="let element">{{ element.playerName }}</td>
          </ng-container>

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef aria-label="Aktionen"></th>
            <td mat-cell *matCellDef="let element" class="actions-cell">
              <button
                mat-icon-button
                *ngIf="!element.isTeamWalletTransaction && !element.note?.startsWith('Stornierung von Buchung #')"
                (click)="reverseTransaction(element)"
                matTooltip="Buchung stornieren"
                aria-label="Buchung stornieren">
                <mat-icon>undo</mat-icon>
              </button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          <tr class="empty-row" *matNoDataRow>
            <td [attr.colspan]="displayedColumns.length">
              {{ input.value ? 'Keine passenden Transaktionen gefunden.' : 'Noch keine Transaktionen vorhanden.' }}
            </td>
          </tr>
        </table>
      </div>

      <mat-paginator
        [pageSizeOptions]="[5, 10, 20]"
        [pageSize]="10"
        showFirstLastButtons
        aria-label="Seite der Transaktionen auswählen">
      </mat-paginator>
    </div>
  </ng-container>
</mat-dialog-content>
