import { Component, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PokemonFamilyEntry } from '../../../core/models/plan.model';
import { Pokemon } from '../../../core/models/pokemon.model';
import { PokemonService } from '../../../core/services/pokemon.service';
import { MatChipsModule } from '@angular/material/chips';
import { MatTabsModule } from '@angular/material/tabs';


@Component({
selector: 'app-plan-pokemon-details',
standalone: true,
imports: [
    CommonModule,
    MatChipsModule,
    MatTabsModule
],
template: `
<mat-tab-group>
  <!-- Evolution Targets Tab -->
  <mat-tab label="Evolution Targets" *ngIf="evolve_to.length > 0">
    <div class="scrollable-content">
      <div 
        *ngFor="let target of evolve_to" 
        class="target-card"
        [class.completed]="isTargetCompleted(target.PFIC)"
      >
        <img 
          lazyImg
          [src]="pokemonService.getPokemonImageUrl(target)"
          [alt]="target.Name"
          class="target-image"
          [class.grayscale]="isTargetCompleted(target.PFIC)"
        >
        <div class="target-details">
          <span class="target-name">
            {{ target.Name }}
            <span *ngIf="target.Form">({{ target.Form }})</span>
          </span>
          <span *ngIf="target.EvolutionMethod">{{target?.EvolutionMethod}}</span>
        </div>
      </div>
    </div>
  </mat-tab>

  <!-- Breeding Targets Tab -->
  <mat-tab label="Breeding Targets" *ngIf="breed_for.length > 0">
    <div class="scrollable-content">
      <div 
        *ngFor="let target of breed_for" 
        class="target-card"
        [class.completed]="isTargetCompleted(target.PFIC)"
      >
        <img 
          lazyImg
          [src]="pokemonService.getPokemonImageUrl(target)"
          [alt]="target.Name"
          class="target-image"
          [class.grayscale]="isTargetCompleted(target.PFIC)"
        >
        <div class="target-details">
          <span class="target-name">
            {{ target.Name }}
            <span *ngIf="target.Form">({{ target.Form }})</span>
          </span>
          <mat-chip-listbox>
            <mat-chip>Breed</mat-chip>
          </mat-chip-listbox>
        </div>
      </div>
    </div>
  </mat-tab>
</mat-tab-group>
`,
styles: [`
.scrollable-content {
  max-height: calc(100vh - 400px); /* Adjust as necessary for the available space */
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, auto));
  gap: 16px;
  padding: 16px 8px; /* Adjust padding to your liking */
}

.target-card {
  display: flex;
  //flex-direction: column; /* Stack image and details vertically */
  //align-items: flex-start;
  gap: 12px;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  //width: 100%; /* Keep cards from growing too wide */
}

.target-card:hover {
  background-color: #f5f5f5;
}

.target-card.completed {
  background-color: #f0f0f0;
}

.target-image {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.target-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.target-name {
  font-weight: 500;
}

.target-name span {
  color: #666;
  font-size: 0.9em;
}

`]
})
export class PlanPokemonDetailsComponent {
    @Input() pokemon_family!: PokemonFamilyEntry;
    evolve_to: Pokemon[] = [];
    breed_for: Pokemon[] = [];

    constructor(
        public pokemonService: PokemonService
    ) {}

    ngOnInit() {
        this.evolve_to = []
        this.breed_for = []
    
        this.loadPokemonFamilyInfo(this.pokemon_family);
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes['pokemon_family']) {
          const currentFamily = changes['pokemon_family'].currentValue;
          const previousFamily = changes['pokemon_family'].previousValue;
    
          // Check if there's a meaningful change
          if (currentFamily && currentFamily !== previousFamily) {
            // Your logic here, e.g., re-fetch data or reset states
            this.loadPokemonFamilyInfo(currentFamily);
          }
        }
      }

    loadPokemonFamilyInfo(newFamily: PokemonFamilyEntry) {
        const evolveToArray: Pokemon[] = [];
        this.evolve_to = []
        newFamily.evolve_to.forEach((target) => {
        this.pokemonService.getPokemonFromPFIC(target).subscribe({
            next: (pokemon) => {
            if (pokemon) {
                evolveToArray.push(pokemon);
            }
            },
            complete: () => {
            this.customSort(evolveToArray);
            this.evolve_to = [...evolveToArray]; // Assign once all have completed
            },
            error: (error) => {
            console.error('Error loading Pokémon:', error);
            }
        });
        });

        const breedForArray: Pokemon[] = [];
        this.breed_for = []
        newFamily.breed_for.forEach((target) => {
        this.pokemonService.getPokemonFromPFIC(target).subscribe({
            next: (pokemon) => {
            if (pokemon) {
                breedForArray.push(pokemon);
            }
            },
            complete: () => {
            this.customSort(breedForArray);
            this.breed_for = [...breedForArray]; // Assign once all have completed
            },
            error: (error) => {
            console.error('Error loading Pokémon:', error);
            }
        });
        });
    }

    parsePfic(pfic: string): (number | string)[] {
        const parts = pfic.split('-');
        return parts.map(part => /^\d+$/.test(part) ? parseInt(part) : part);
    }
      
    customSort(arr: Pokemon[]): Pokemon[] {
        return arr.sort((a, b) => {
            const parsedA = this.parsePfic(a.PFIC);
            const parsedB = this.parsePfic(b.PFIC);
        
            for (let i = 0; i < Math.min(parsedA.length, parsedB.length); i++) {
            if (parsedA[i] !== parsedB[i]) {
                if (typeof parsedA[i] === 'number' && typeof parsedB[i] === 'number') {
                return (parsedA[i] as number) - (parsedB[i] as number);
                }
                return (parsedA[i] as string).localeCompare(parsedB[i] as string);
            }
            }
        
            return parsedA.length - parsedB.length;
        });
    }

    get hasTargets(): boolean {
        return this.pokemon_family.evolve_to.length > 0 || this.pokemon_family.breed_for.length > 0;
    }

    isTargetCompleted(pfic: string): boolean {
        return this.pokemonService.isTargetCompleted(pfic);
    }
}