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

  <div *ngIf="isLoading" class="flex justify-center">
    <div class="loader"></div>
  </div>

  <div *ngIf="error" class="bg-red-500 text-white p-4 rounded mb-6">
    {{ error }}
  </div>

  <div *ngIf="!isLoading && lootbox" class="grid grid-cols-1 lg:grid-cols-4 gap-6">
    <div class="lg:col-span-3">
      <div class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg">
        <div class="relative" *ngIf="!isOpen">
          <img
            [src]="getBoxImage(lootbox.id)"
            [alt]="lootbox.name"
            class="w-full h-48 object-cover"
          />
          <div class="absolute top-2 right-2 bg-deep-blue px-2 py-1 rounded-full text-white">
            {{ lootbox.price | currency: 'EUR' }}
          </div>
        </div>

        <div class="p-6">
          <h2 class="text-xl font-bold text-white mb-4">{{ lootbox.name }}</h2>

          <div *ngIf="!isOpening && !isOpen" class="mb-6">
            <button
              (click)="openLootbox()"
              [disabled]="!hasEnoughBalance()"
              [ngClass]="{
                'button-primary': hasEnoughBalance(),
                'bg-gray-500 cursor-not-allowed': !hasEnoughBalance(),
              }"
              class="w-full py-3 text-lg font-semibold rounded"
            >
              <span *ngIf="hasEnoughBalance()">Öffnen</span>
              <span *ngIf="!hasEnoughBalance()">Nicht genug Guthaben</span>
            </button>
          </div>

          <div *ngIf="isOpening" class="flex flex-col items-center py-8">
            <div class="loader mb-4"></div>
            <div class="text-white text-lg">Öffne Lootbox...</div>
          </div>

          <div *ngIf="isOpen && !isOpening" class="space-y-6">
            <div class="text-center mb-8 animation-fade" [class.visible]="animationCompleted">
              <h2 class="text-xl font-bold text-white mb-2">Dein Gewinn:</h2>
              <div class="text-3xl font-bold" [ngClass]="getRewardClass()">
                {{ wonReward?.value | currency: 'EUR' }}
              </div>
            </div>

            <div class="relative w-full overflow-hidden bg-deep-blue rounded-lg p-4 h-32 mb-6">
              <div
                class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-white z-10 transform -translate-x-0"
                style="margin-left: 0px"
              ></div>

              <div class="relative h-full flex items-center overflow-hidden">
                <div class="flex case-items">
                  <div
                    *ngFor="let reward of prizeList; let i = index"
                    class="case-item"
                    [class.case-item-won]="isWonReward(reward) && animationCompleted"
                    [id]="isWonReward(reward) ? 'winning-item' : ''"
                  >
                    <div
                      class="case-item-inner"
                      [class.winning-prize]="isWonReward(reward)"
                      [class.highlight]="isWonReward(reward) && animationCompleted"
                    >
                      <div class="amount" [ngClass]="getRewardRarityClass(reward)">
                        {{ reward.value | currency: 'EUR' }}
                      </div>
                      <div class="text-xs text-text-secondary">
                        {{ reward.probability * 100 | number: '1.0-0' }}%
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="flex justify-center gap-4 mt-8 animation-fade"
              [class.visible]="animationCompleted"
            >
              <button
                (click)="openAgain()"
                [disabled]="!animationCompleted || !hasEnoughBalance()"
                [ngClass]="{
                  'button-primary': hasEnoughBalance(),
                  'bg-gray-500 cursor-not-allowed': !hasEnoughBalance(),
                }"
                class="px-6 py-2 font-semibold rounded"
                [attr.aria-hidden]="!animationCompleted"
              >
                <span *ngIf="hasEnoughBalance()">Nochmal Öffnen</span>
                <span *ngIf="!hasEnoughBalance()">Nicht genug Guthaben</span>
              </button>
              <button
                (click)="goBack()"
                class="bg-deep-blue hover:bg-deep-blue-contrast text-white px-6 py-2 rounded font-semibold transition"
                [disabled]="!animationCompleted"
                [attr.aria-hidden]="!animationCompleted"
              >
                Zurück zur Übersicht
              </button>
            </div>
          </div>
        </div>

        <div class="px-6 pb-6">
          <div class="text-sm text-text-secondary">
            <p>Fairness garantiert - Alle Ergebnisse werden transparent berechnet.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="lg:col-span-1">
      <div class="card bg-deep-blue-light rounded-lg overflow-hidden shadow-lg p-6">
        <h3 class="text-lg font-semibold text-white mb-4">Mögliche Gewinne:</h3>
        <ul class="space-y-3">
          <li *ngFor="let reward of lootbox.rewards" class="flex justify-between">
            <span [ngClass]="getRewardRarityClass(reward)">{{
              reward.value | currency: 'EUR'
            }}</span>
            <span class="text-white">{{ reward.probability * 100 | number: '1.0-0' }}%</span>
          </li>
        </ul>

        <div
          *ngIf="isOpen && wonReward && animationCompleted"
          class="mt-6 pt-6 border-t border-deep-blue-contrast"
        >
          <h3 class="text-lg font-semibold text-white mb-4">Gewinn-Details:</h3>
          <div class="space-y-3">
            <div class="flex justify-between items-center">
              <span class="text-text-secondary">Kosten:</span>
              <span>{{ lootbox.price | currency: 'EUR' }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-text-secondary">Gewinn:</span>
              <span [ngClass]="getRewardClass()">{{ wonReward.value | currency: 'EUR' }}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-text-secondary">Profit:</span>
              <span
                [ngClass]="
                  wonReward.value > (lootbox.price || 0) ? 'text-emerald' : 'text-accent-red'
                "
              >
                {{ wonReward.value - (lootbox.price || 0) | currency: 'EUR' }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
