import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { PlanGameComponent } from './plan-game/plan-game.component';
import { PlanService } from '../../core/services/plan.service';
import { GamePlan } from '../../core/models/plan.model';

@Component({
  selector: 'app-plan',
  standalone: true,
  imports: [
    CommonModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    PlanGameComponent
  ],
  template: `
    <div class="plan-container">
      <div class="games-accordion">
        <app-plan-game
          *ngFor="let game of gamePlans"
          [game]="game"
        ></app-plan-game>
      </div>
    </div>
  `,
  styles: [`
    .plan-container {
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .games-accordion {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  `]
})
export class PlanComponent implements OnInit {
  gamePlans: GamePlan[] = [];

  constructor(private planService: PlanService) {}

  ngOnInit() {
    this.loadPlan();
  }

  private loadPlan() {
    this.planService.getPlan().subscribe(
      plan => this.gamePlans = plan
    );
  }

  onPokemonStatusUpdate(event: { pfic: string, caught: boolean }) {
    // Handle status updates that might affect other games' plans
    this.loadPlan(); // Reload the full plan to ensure consistency
  }
}