import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  OnChanges,
  Output,
  SimpleChanges,
  signal,
} from '@angular/core';
import { CommonModule, CurrencyPipe } from '@angular/common';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { BettingService } from '@blackjack/services/betting.service';
import { AnimatedNumberComponent } from '../animated-number/animated-number.component';

@Component({
  selector: 'app-game-info',
  standalone: true,
  imports: [CommonModule, CurrencyPipe, ReactiveFormsModule, AnimatedNumberComponent],
  template: `
    <div class="card p-4">
      <h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <span class="text-text-secondary">Aktuelle Wette:</span>
          <span [class]="currentBet > 0 ? 'text-accent-red' : 'text-text-secondary'">
            <app-animated-number [value]="currentBet" [duration]="0.5"></app-animated-number>
          </span>
        </div>

        @if (!gameInProgress) {
          <div class="grid grid-cols-2 gap-2 mb-4">
            <button
              (click)="setBetAmount(0.1)"
              class="button-primary py-2 text-sm"
              [disabled]="gameInProgress"
            >
              10%
            </button>
            <button
              (click)="setBetAmount(0.25)"
              class="button-primary py-2 text-sm"
              [disabled]="gameInProgress"
            >
              25%
            </button>
            <button
              (click)="setBetAmount(0.5)"
              class="button-primary py-2 text-sm"
              [disabled]="gameInProgress"
            >
              50%
            </button>
            <button
              (click)="setBetAmount(1)"
              class="button-primary py-2 text-sm"
              [disabled]="gameInProgress"
            >
              100%
            </button>
          </div>
        }

        <form [formGroup]="betForm" (ngSubmit)="onSubmit()" class="space-y-2">
          <div class="space-y-1">
            <label for="bet" class="text-sm text-text-secondary">Einsatz</label>
            <input
              type="number"
              id="bet"
              formControlName="bet"
              class="w-full px-3 py-2 bg-deep-blue-light text-white rounded focus:outline-none focus:ring-2 focus:ring-emerald disabled:opacity-50"
              [min]="1"
              [max]="balance"
              step="0.01"
              [disabled]="gameInProgress || isActionInProgress"
              [placeholder]="balance | currency: 'EUR'"
            />
            @if (betForm.get('bet')?.errors?.['required'] && betForm.get('bet')?.touched) {
              <span class="text-xs text-accent-red">Bitte geben Sie einen Einsatz ein</span>
            }
            @if (betForm.get('bet')?.errors?.['min'] && betForm.get('bet')?.touched) {
              <span class="text-xs text-accent-red">Mindestens 1€ setzen</span>
            }
            @if (betForm.get('bet')?.errors?.['max'] && betForm.get('bet')?.touched) {
              <span class="text-xs text-accent-red">Nicht genügend Guthaben</span>
            }
          </div>
          <button
            type="submit"
            class="button-primary w-full py-2 relative"
            [disabled]="!betForm.valid || gameInProgress || isActionInProgress"
          >
            <span [class.invisible]="isActionInProgress">Neues Spiel</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>
        </form>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GameInfoComponent implements OnChanges {
  @Input() set balance(value: number) {
    this._balance.set(value);
  }
  get balance() {
    return this._balance();
  }
  private _balance = signal(0);

  @Input() currentBet = 0;
  @Input() gameInProgress = false;
  @Input() isActionInProgress = false;
  @Output() newGame = new EventEmitter<number>();

  betForm: FormGroup;

  constructor(private bettingService: BettingService) {
    this.betForm = this.bettingService.createBetForm();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['balance']) {
      this.bettingService.updateBetFormValidators(this.betForm, this.balance);
    }
  }

  setBetAmount(percentage: number) {
    const betAmount = this.bettingService.calculateBetAmount(this.balance, percentage);
    if (this.bettingService.isValidBet(betAmount, this.balance)) {
      this.betForm.patchValue({ bet: betAmount });
    }
  }

  onSubmit() {
    if (this.betForm.valid) {
      const betAmount = parseFloat(this.betForm.value.bet);
      if (this.bettingService.isValidBet(betAmount, this.balance)) {
        this.newGame.emit(betAmount);
        this.betForm.reset();
      }
    }
  }
}