import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';

export type MoveNavDirection = 'first' | 'prev' | 'next' | 'last';

interface MovePair {
  white: string;
  black: string | null;
}

@Component({
  selector: 'app-move-history',
  standalone: true,
  imports: [],
  templateUrl: './move-history.component.html',
  styleUrl: './move-history.component.css'
})
export class MoveHistoryComponent implements OnChanges {
  @Input({ required: true }) moves: string[] = [];
  @Output() navigate = new EventEmitter<MoveNavDirection>();

  movePairs: MovePair[] = [];

  get plyCount(): number {
    return this.moves.length;
  }

  get currentWhiteIndex(): number {
    const lastPairIndex = this.movePairs.length - 1;
    if (lastPairIndex < 0) return -1;
    const lastMove = this.moves.length - 1;
    return lastMove % 2 === 0 ? lastPairIndex : -1;
  }

  get currentBlackIndex(): number {
    const lastPairIndex = this.movePairs.length - 1;
    if (lastPairIndex < 0) return -1;
    const lastMove = this.moves.length - 1;
    return lastMove % 2 === 1 ? lastPairIndex : -1;
  }

  ngOnChanges(): void {
    this.movePairs = this.buildPairs(this.moves);
  }

  private buildPairs(moves: string[]): MovePair[] {
    const pairs: MovePair[] = [];
    for (let i = 0; i < moves.length; i += 2) {
      pairs.push({ white: moves[i], black: moves[i + 1] ?? null });
    }
    return pairs;
  }
}