import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { CommonModule, CurrencyPipe } from '@angular/common';
import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-game-result',
  standalone: true,
  imports: [CommonModule, CurrencyPipe],
  template: `
    <div
      *ngIf="visible"
      [@fadeInOut]
      class="modal-bg"
    >
      <div 
        class="modal-card"
        [@cardAnimation]
      >
        <h2 class="modal-heading" [class]="getResultClass()">{{ getResultTitle() }}</h2>
        <p class="py-2 text-text-secondary mb-4">{{ getResultMessage() }}</p>
        
        <div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
          <div class="grid grid-cols-2 gap-4">
            <div class="text-text-secondary">Einsatz:</div>
            <div class="font-medium text-right">{{ amount }} €</div>
            
            <div class="text-text-secondary">{{ isDraw ? 'Zurückgegeben:' : (isWin ? 'Gewonnen:' : 'Verloren:') }}</div>
            <div 
              class="font-medium text-right"
              [ngClass]="{
                'text-emerald': isWin,
                'text-accent-red': isLoss,
                'text-yellow-400': isDraw
              }"
            >
              {{ isLoss ? '-' : '+' }}{{ amount }} €
            </div>
            
            <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">Gesamt:</div>
            <div 
              class="font-medium text-right border-t border-text-secondary/20 pt-3"
              [ngClass]="{
                'text-emerald': isWin,
                'text-accent-red': isLoss,
                'text-white': isDraw
              }"
            >
              {{ isWin ? '+' : (isLoss ? '-' : '') }}{{ amount }} €
            </div>
          </div>
        </div>
        
        <button
          type="button"
          (click)="visible = false"
          class="button-primary w-full py-2"
        >
          Verstanden
        </button>
      </div>
    </div>
  `,
  styleUrls: ['./game-result.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms ease-out', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({ opacity: 0 }))
      ])
    ]),
    trigger('cardAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'scale(0.8)' }),
        animate('350ms ease-out', style({ opacity: 1, transform: 'scale(1)' }))
      ])
    ])
  ]
})
export class GameResultComponent {
  @Input() gameState: string = '';
  @Input() amount: number = 0;
  @Input() set show(value: boolean) {
    this.visible = value;
  }
  
  visible = false;
  
  get isWin(): boolean {
    return this.gameState === 'PLAYER_WON';
  }
  
  get isLoss(): boolean {
    return this.gameState === 'PLAYER_LOST';
  }
  
  get isDraw(): boolean {
    return this.gameState === 'DRAW';
  }
  
  getResultTitle(): string {
    if (this.isWin) return 'Gewonnen!';
    if (this.isLoss) return 'Verloren!';
    if (this.isDraw) return 'Unentschieden!';
    return '';
  }
  
  getResultMessage(): string {
    if (this.isWin) return 'Glückwunsch! Du hast diese Runde gewonnen.';
    if (this.isLoss) return 'Schade! Du hast diese Runde verloren.';
    if (this.isDraw) return 'Diese Runde endet unentschieden. Dein Einsatz wurde zurückgegeben.';
    return '';
  }
  
  getResultClass(): string {
    if (this.isWin) return 'text-emerald';
    if (this.isLoss) return 'text-accent-red';
    if (this.isDraw) return 'text-yellow-400';
    return '';
  }
}