import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { MatchesService } from '@services/matches/matches.service';
import { Matches, MatchState } from '@interfaces/matches';

import { PlayerService } from '@services/player/player.service';
import { Player } from '@interfaces/player';

@Component({
  selector: 'app-matches',
  standalone: false,
  templateUrl: './matches.component.html',
  styleUrl: './matches.component.css',
})
export class MatchesComponent {
  matches: Matches[] = [];
  playersMap: Map<number, Player> = new Map();
  MatchState = MatchState;

  constructor(
    private matchesService: MatchesService,
    private playerService: PlayerService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.playerService.getPlayers().subscribe((players) => {
      // construire la map ID -> joueur
      players.forEach((player) => this.playersMap.set(player.id, player));
    });

    this.matchesService.getMatches().subscribe((data) => {
      this.matches = data;
    });
  }

  getPlayerName(id: number): string {
    const player = this.playersMap.get(id);
    return player ? `${player.firstName} ${player.name}` : 'Joueur inconnu';
  }

  getMatchBorderColor(state: MatchState): string {
    switch (state) {
      case MatchState.NOT_STARTED:
        return 'border-secondary';
      case MatchState.ONGOING:
        return 'border-warning';
      case MatchState.OVER:
        return 'border-success';
      default:
        return 'border-light';
    }
  }

  getMatchStatusLabel(state: MatchState): string {
    switch (state) {
      case MatchState.NOT_STARTED:
        return 'À venir';
      case MatchState.ONGOING:
        return 'En cours';
      case MatchState.OVER:
        return 'Terminé';
      default:
        return 'Inconnu';
    }
  }

  goToMatchDetail(matchId: number): void {
    this.router.navigate(['/matches', matchId]);
  }
}
