import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { GamePlan } from '../../../core/models/plan.model';

@Component({
  selector: 'app-plan-game',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule
  ],
  template: `
    <mat-card 
      class="game-card" 
      [class.selected]="isSelected"
      (click)="onSelect()">
      <img 
        [src]="getGameBoxArt()" 
        [alt]="game.game_name"
        class="game-image"
      >
      <mat-card-content>
        <h3>{{ game.game_name }}</h3>
        <p class="catch-count">
          Pokémon to catch: {{ getTotalCatchCount() }}
        </p>
      </mat-card-content>
    </mat-card>
  `,
  styles: [`
    .game-card {
      width: 200px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .game-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .game-card.selected {
      border: 2px solid #4CAF50;
      transform: translateY(-4px);
    }

    .game-image {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }

    mat-card-content {
      padding: 16px;
    }

    h3 {
      margin: 0;
      font-size: 1.2em;
      color: #333;
    }

    .catch-count {
      margin: 8px 0 0;
      color: #666;
    }
  `]
})
export class PlanGameComponent {
  @Input() game!: GamePlan;
  @Input() isSelected = false;
  @Output() gameSelect = new EventEmitter<GamePlan>();

  getTotalCatchCount(): number {
    return this.game.pokemon.reduce((sum, pokemon) => sum + pokemon.catch_count, 0);
  }

  getGameBoxArt(): string {
    // You'll need to implement this to return the correct box art URL
    return `/assets/images/games/${this.game.game_name.toLowerCase().replace(' ', '-')}.png`;
  }

  onSelect() {
    this.gameSelect.emit(this.game);
  }
}