<a mat-button routerLink="../"><mat-icon>arrow_back</mat-icon>Mehr</a>
<header>
  <p class="eyebrow">Kasse</p>
  <h1>Wiederkehrende Buchungen</h1>
  <p>Fälligkeiten wie den Monatsbeitrag automatisch für alle aktiven Spieler buchen lassen.</p>
</header>

@if (canManage()) {
  <mat-card class="create-card">
    <form [formGroup]="form" (ngSubmit)="createEntry()" aria-label="Wiederkehrende Buchung anlegen">
      <mat-form-field appearance="outline">
        <mat-label>Beschreibung</mat-label>
        <input matInput maxlength="120" formControlName="description" />
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Betrag</mat-label>
        <input matInput type="number" min="0.01" max="10000" step="0.01" formControlName="amount" />
        <span matTextSuffix>€</span>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Typ</mat-label>
        <mat-select formControlName="type">
          @for (option of typeOptions; track option.id) {
            <mat-option [value]="option.id">{{ option.label }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Intervall</mat-label>
        <mat-select formControlName="interval">
          @for (option of intervalOptions; track option.value) {
            <mat-option [value]="option.value">{{ option.label }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Erste Buchung am</mat-label>
        <input matInput type="date" formControlName="startDate" />
      </mat-form-field>
      <button mat-flat-button type="submit" [disabled]="form.invalid || mutationPending()">
        @if (saving()) {
          <mat-spinner diameter="18" />
        } @else {
          <mat-icon>add</mat-icon>
        }
        Eintrag anlegen
      </button>
    </form>
  </mat-card>
}

@if (mutationError()) {
  <p class="error-message" role="alert">{{ mutationError() }}</p>
}

@if (loading()) {
  <div class="state" aria-live="polite">
    <mat-spinner diameter="36" />
    <span>Liste wird geladen …</span>
  </div>
} @else if (loadError()) {
  <div class="state" role="alert">
    <mat-icon>error_outline</mat-icon>
    <strong>{{ loadError() }}</strong>
    <button mat-stroked-button type="button" (click)="retryLoad()">Erneut versuchen</button>
  </div>
} @else if (entries().length === 0) {
  <div class="state">
    <mat-icon>event_repeat</mat-icon>
    <strong>Noch keine Einträge</strong>
    <span>Es gibt noch keine wiederkehrenden Buchungen für dieses Team.</span>
  </div>
} @else {
  <div class="catalog">
    @for (entry of entries(); track entry.id) {
      <mat-card class="entry-card" [class.paused]="!entry.active">
        @if (editingEntryId() === entry.id) {
          <form
            class="edit-form"
            [formGroup]="editForm"
            (ngSubmit)="saveEntry(entry)"
            [attr.aria-label]="'Eintrag ' + entry.description + ' bearbeiten'"
          >
            <mat-form-field appearance="outline">
              <mat-label>Beschreibung</mat-label>
              <input matInput maxlength="120" formControlName="description" />
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Betrag</mat-label>
              <input
                matInput
                type="number"
                min="0.01"
                max="10000"
                step="0.01"
                formControlName="amount"
              />
              <span matTextSuffix>€</span>
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Typ</mat-label>
              <mat-select formControlName="type">
                @for (option of typeOptions; track option.id) {
                  <mat-option [value]="option.id">{{ option.label }}</mat-option>
                }
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="outline">
              <mat-label>Intervall</mat-label>
              <mat-select formControlName="interval">
                @for (option of intervalOptions; track option.value) {
                  <mat-option [value]="option.value">{{ option.label }}</mat-option>
                }
              </mat-select>
            </mat-form-field>
            <div class="edit-actions">
              <button
                mat-button
                type="button"
                (click)="cancelEdit()"
                [disabled]="pendingEntryId() === entry.id"
              >
                Abbrechen
              </button>
              <button
                mat-flat-button
                type="submit"
                [disabled]="editForm.invalid || pendingEntryId() === entry.id"
              >
                @if (pendingEntryId() === entry.id) {
                  <mat-spinner diameter="18" />
                } @else {
                  <mat-icon>save</mat-icon>
                }
                Speichern
              </button>
            </div>
          </form>
        } @else {
          <div class="entry-content">
            <span>{{ entry.description }}</span>
            <strong>{{ entry.amount | currency: 'EUR' }}</strong>
            @if (!entry.active) {
              <span class="paused-badge">Pausiert</span>
            } @else {
              <span class="next-run">nächste Buchung am {{ entry.nextRunDate | date: 'dd.MM.yyyy' }}</span>
            }
          </div>
          <div class="entry-actions">
            @if (canManage()) {
              <button
                mat-button
                type="button"
                (click)="toggleActive(entry)"
                [disabled]="mutationPending()"
                [attr.aria-label]="(entry.active ? 'Pausieren' : 'Fortsetzen') + ': ' + entry.description"
              >
                <mat-icon>{{ entry.active ? 'pause_circle' : 'play_circle' }}</mat-icon>
                {{ entry.active ? 'Pausieren' : 'Fortsetzen' }}
              </button>
              <button
                mat-button
                type="button"
                (click)="startEdit(entry)"
                [disabled]="mutationPending()"
                [attr.aria-label]="entry.description + ' bearbeiten'"
              >
                <mat-icon>edit</mat-icon>Bearbeiten
              </button>
              <button
                mat-button
                type="button"
                (click)="confirmDelete(entry)"
                [disabled]="mutationPending()"
                [attr.aria-label]="entry.description + ' löschen'"
              >
                <mat-icon>delete</mat-icon>Löschen
              </button>
            }
          </div>
        }
      </mat-card>
    }
  </div>
}
