import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  Output,
  inject,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { GameState } from '@blackjack/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"
        >
          <span>Ziehen</span>
        </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"
        >
          <span>Halten</span>
        </button>
        <button
          (click)="doubleDown.emit()"
          class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
          [disabled]="!canDoubleDown || isActionInProgress"
        >
          <span>Verdoppeln</span>
        </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"
        >
          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;

  protected gameControlsService = inject(GameControlsService);

  get canDoubleDown(): boolean {
    return (
      this.gameState === GameState.IN_PROGRESS &&
      this.playerCards.length === 2 &&
      !this.isActionInProgress
    );
  }
}
