<div class="container mx-auto px-4 py-6 space-y-8">
  <h1 class="text-3xl font-bold text-white mb-6">Spielautomaten</h1>

  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
    <div class="lg:col-span-3 space-y-6 flex flex-col">
      <div class="card">
        <div class="p-6">
          <div class="flex items-center justify-between gap-4">
            <div class="flex items-baseline space-x-2">
              <h2 class="text-xl font-bold text-white">Slot Machine</h2>
              <span
                *ngIf="slotResult().status === 'win' && slotResult().amount > 0"
                class="text-emerald text-lg font-semibold"
                aria-live="polite"
              >
                +{{ slotResult().amount | currency: 'EUR' }}
              </span>
            </div>

            <div
              [ngClass]="{
                'bg-emerald': slotResult().status === 'win',
                'bg-accent-red': slotResult().status === 'lose',
                'bg-deep-blue-light': slotResult().status === 'start',
              }"
              class="px-3 py-1 rounded-full text-sm font-semibold whitespace-nowrap"
            >
              <span class="text-white">
                {{
                  slotResult().status === 'win'
                    ? 'Gewonnen!'
                    : slotResult().status === 'lose'
                      ? 'Verloren'
                      : 'Bereit'
                }}
              </span>
            </div>
          </div>
        </div>

        <div class="p-6">
          <div class="bg-deep-blue-light rounded-lg p-4 shadow-inner mb-6">
            <div class="grid grid-cols-3 gap-3">
              @for (row of slotResult().resultMatrix; track $index) {
                @for (cell of row; track $index) {
                  <div
                    class="bg-deep-blue-contrast rounded-lg shadow-md p-2 flex items-center justify-center"
                  >
                    <span class="text-2xl font-bold" [ngClass]="getSymbolClass(cell)">{{
                      cell
                    }}</span>
                  </div>
                }
              }
            </div>
          </div>

          <div class="flex flex-col sm:flex-row gap-4 items-center justify-center">
            <div class="flex items-center bg-deep-blue-light rounded-lg p-2 flex-1">
              <label for="betAmount" class="text-text-secondary mr-3">Einsatz:</label>
              <input
                id="betAmount"
                type="number"
                [ngModel]="betAmount()"
                (ngModelChange)="betAmount.set($event)"
                step="0.01"
                min="0.01"
                class="w-full bg-deep-blue-light text-white focus:outline-none focus:ring-1 focus:ring-emerald"
              />
            </div>

            <button
              (click)="spin()"
              class="button-primary px-4 py-1.5 font-bold"
              [ngClass]="{
                'bg-gray-500 cursor-not-allowed': !hasEnoughBalance(),
              }"
              [disabled]="isSpinning || !hasEnoughBalance()"
            >
              @if (!isSpinning) {
                <span>{{ hasEnoughBalance() ? 'SPIN' : 'Nicht genug Guthaben' }}</span>
              } @else {
                <div
                  class="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin"
                ></div>
              }
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="lg:col-span-1">
      <div class="card p-4">
        <h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>
        <div class="space-y-4">
          <div class="flex justify-between items-center">
            <span class="text-text-secondary">Kontostand:</span>
            <span class="text-emerald">
              <app-animated-number [value]="balance()" [duration]="0.5"></app-animated-number>
            </span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-text-secondary">Einsatz:</span>
            <span [class]="betAmount() > 0 ? 'text-accent-red' : 'text-text-secondary'">
              <app-animated-number [value]="betAmount()" [duration]="0.5"></app-animated-number>
            </span>
          </div>

          <div class="grid grid-cols-2 gap-2 mb-4">
            <button
              (click)="setBetAmount(0.1)"
              class="button-primary py-2 text-sm"
              [disabled]="isSpinning"
            >
              10%
            </button>
            <button
              (click)="setBetAmount(0.25)"
              class="button-primary py-2 text-sm"
              [disabled]="isSpinning"
            >
              25%
            </button>
            <button
              (click)="setBetAmount(0.5)"
              class="button-primary py-2 text-sm"
              [disabled]="isSpinning"
            >
              50%
            </button>
            <button
              (click)="setBetAmount(1)"
              class="button-primary py-2 text-sm"
              [disabled]="isSpinning"
            >
              100%
            </button>
          </div>

          <h3 class="text-lg font-semibold text-white mb-2">Auszahlungen:</h3>

          @if (slotInfo(); as info) {
            <ul class="space-y-1">
              @for (item of info | keyvalue; track item.key) {
                <li class="flex justify-between items-center py-1 border-b border-deep-blue-light">
                  <div class="bg-deep-blue-contrast px-2 py-1 rounded text-center w-12">
                    <span [ngClass]="getSymbolClass(item.key)">{{ item.key }}</span>
                  </div>
                  <span class="text-emerald">{{ item.value }}x</span>
                </li>
              }
            </ul>
          } @else {
            <div class="flex justify-center py-4">
              <div
                class="w-4 h-4 border-2 border-deep-blue-contrast border-t-emerald rounded-full animate-spin"
              ></div>
            </div>
          }

          <div class="mt-4 pt-2">
            <h4 class="text-sm font-semibold text-white mb-2">Spielregeln:</h4>
            <ul class="text-text-secondary text-xs space-y-1">
              <li>• Gewinne mit 3 gleichen Symbolen</li>
              <li>• Höhere Symbole = höhere Gewinne</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
