import { Component, OnInit } from '@angular/core';
import { GymClass } from '../../models/gym-class.model';
import { ClassesService } from '../../services/classes.service';

@Component({
  selector: 'app-classes',
  templateUrl: './classes.page.html',
  styleUrls: ['./classes.page.scss'],
  standalone: false
})
export class ClassesPage implements OnInit {
  clases: GymClass[] = [];
  clasesFiltradas: GymClass[] = [];
  cargando = true;
  terminoBusqueda = '';
  categoriaSeleccionada = 'todas';

  constructor(private classesService: ClassesService) { }

  ngOnInit() {
    this.cargarClases();
  }

  ionViewWillEnter() {
    this.cargarClases();
  }

  cargarClases() {
    this.cargando = true;
    this.classesService.getClasses().subscribe({
      next: (classes) => {
        this.clases = classes;
        this.aplicarFiltros();
        this.cargando = false;
      },
      error: (error) => {
        console.error('Error al cargar clases', error);
        this.cargando = false;
      }
    });
  }

  refrescarClases(event: any) {
    this.classesService.getClasses().subscribe({
      next: (classes) => {
        this.clases = classes;
        this.aplicarFiltros();
        event.target.complete();
      },
      error: (error) => {
        console.error('Error al refrescar clases', error);
        event.target.complete();
      }
    });
  }

  buscarClases(event: any) {
    this.terminoBusqueda = event.detail.value.toLowerCase();
    this.aplicarFiltros();
  }

  filtrarPorCategoria(event: any) {
    this.categoriaSeleccionada = event.detail.value;
    this.aplicarFiltros();
  }

  private aplicarFiltros() {
    let resultado = [...this.clases];
    
    // Filtrar por término de búsqueda
    if (this.terminoBusqueda) {
      resultado = resultado.filter(clase => 
        clase.name.toLowerCase().includes(this.terminoBusqueda) ||
        clase.instructor.toLowerCase().includes(this.terminoBusqueda) ||
        clase.description.toLowerCase().includes(this.terminoBusqueda)
      );
    }
    
    // Filtrar por categoría
    if (this.categoriaSeleccionada !== 'todas') {
      resultado = resultado.filter(clase => 
        clase.category === this.categoriaSeleccionada
      );
    }
    
    // Ordenar por fecha/hora
    resultado.sort((a, b) => {
      return a.startTime.getTime() - b.startTime.getTime();
    });
    
    this.clasesFiltradas = resultado;
  }
}