import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule, CurrencyPipe } from '@angular/common';
import { animate, style, transition, trigger } from '@angular/animations';
import { GameState } from '../../../../../enum/gameState';

@Component({
  selector: 'app-game-result',
  standalone: true,
  imports: [CommonModule, CurrencyPipe],
  template: `
    <div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
      <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)="closeDialog()" class="button-primary w-full py-2">
          Verstanden
        </button>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('150ms ease-out', style({ opacity: 1 })),
      ]),
      transition(':leave', [animate('150ms ease-in', style({ opacity: 0 }))]),
    ]),
    trigger('cardAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'scale(0.95)' }),
        animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
      ]),
    ]),
  ],
})
export class GameResultComponent {
  @Input() gameState: GameState = GameState.IN_PROGRESS;
  @Input() amount = 0;
  @Input() set show(value: boolean) {
    console.log('GameResultComponent show input changed:', value, 'gameState:', this.gameState);
    this.visible = value;
  }

  @Output() gameResultClosed = new EventEmitter<void>();

  visible = false;

  get isWin(): boolean {
    return this.gameState === GameState.PLAYER_WON;
  }

  get isLoss(): boolean {
    return this.gameState === GameState.PLAYER_LOST;
  }

  get isDraw(): boolean {
    return this.gameState === 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 '';
  }

  closeDialog(): void {
    this.visible = false;
    this.gameResultClosed.emit();
    console.log('Dialog closed by user');
  }
}