import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GameState } from '../../enum/gameState';
import { Card } from '@blackjack/models/blackjack.model';
import { GameControlsService } from '@blackjack/services/game-controls.service';

@Component({
  selector: 'app-game-controls',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="flex flex-col gap-4">
      <div class="flex justify-center text-lg mb-5">
        <div class="card p-4">
          <div class="text-emerald font-bold mb-1">
            Deine Punkte: {{ gameControlsService.calculateHandValue(playerCards) }}
          </div>
          <div class="text-text-secondary">
            Status:
            <span [class]="gameControlsService.getStatusClass(gameState)">{{
              gameControlsService.getStatusText(gameState)
            }}</span>
          </div>
        </div>
      </div>
      <div class="flex justify-center gap-4">
        <button
          (click)="hit.emit()"
          class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
          [disabled]="gameState !== GameState.IN_PROGRESS || isActionInProgress"
          [class.opacity-50]="isActionInProgress"
        >
          <span [class.invisible]="isActionInProgress">Ziehen</span>
          @if (isActionInProgress) {
            <div class="absolute inset-0 flex items-center justify-center">
              <div
                class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
              ></div>
            </div>
          }
        </button>
        <button
          (click)="stand.emit()"
          class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
          [disabled]="gameState !== GameState.IN_PROGRESS || isActionInProgress"
          [class.opacity-50]="isActionInProgress"
        >
          <span [class.invisible]="isActionInProgress">Halten</span>
          @if (isActionInProgress) {
            <div class="absolute inset-0 flex items-center justify-center">
              <div
                class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
              ></div>
            </div>
          }
        </button>
        <button
          (click)="doubleDown.emit()"
          class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
          [disabled]="
            gameState !== GameState.IN_PROGRESS || playerCards.length !== 2 || isActionInProgress
          "
          [class.opacity-50]="isActionInProgress"
        >
          <span [class.invisible]="isActionInProgress">Verdoppeln</span>
          @if (isActionInProgress) {
            <div class="absolute inset-0 flex items-center justify-center">
              <div
                class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
              ></div>
            </div>
          }
        </button>
        <button
          (click)="leave.emit()"
          class="bg-accent-red hover:bg-accent-red/80 px-8 py-4 rounded text-lg font-medium min-w-[120px] transition-all duration-300"
          [disabled]="isActionInProgress"
          [class.opacity-50]="isActionInProgress"
        >
          Abbrechen
        </button>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GameControlsComponent {
  @Input() playerCards: Card[] = [];
  @Input() gameState: GameState = GameState.IN_PROGRESS;
  @Input() isActionInProgress = false;

  @Output() hit = new EventEmitter<void>();
  @Output() stand = new EventEmitter<void>();
  @Output() doubleDown = new EventEmitter<void>();
  @Output() leave = new EventEmitter<void>();

  protected readonly GameState = GameState;

  constructor(protected gameControlsService: GameControlsService) { }
}