import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NavController, ToastController, AlertController } from '@ionic/angular';
import { GymClass } from '../../models/gym-class.model';
import { ClassesService } from '../../services/classes.service';
import { BookingsService } from '../../services/bookings.service';

@Component({
  selector: 'app-class-detail',
  templateUrl: './class-detail.page.html',
  styleUrls: ['./class-detail.page.scss'],
  standalone: false
})
export class ClassDetailPage implements OnInit {
  gymClass?: GymClass;
  cargando = true;
  reservando = false;

  constructor(
    private route: ActivatedRoute,
    private navCtrl: NavController,
    private classesService: ClassesService,
    private bookingsService: BookingsService,
    private toastCtrl: ToastController,
    private alertCtrl: AlertController
  ) { }

  ngOnInit() {
    this.cargarDatosClase();
  }

  ionViewWillEnter() {
    this.cargarDatosClase();
  }

  cargarDatosClase() {
    const id = this.route.snapshot.paramMap.get('id');
    if (!id) {
      this.navCtrl.navigateBack('/app/classes');
      return;
    }

    this.cargando = true;
    this.classesService.getClassById(id).subscribe({
      next: (gymClass) => {
        if (gymClass) {
          this.gymClass = gymClass;
        } else {
          this.navCtrl.navigateBack('/app/classes');
          this.mostrarToast('Clase no encontrada', 'danger');
        }
        this.cargando = false;
      },
      error: (error) => {
        console.error('Error al cargar clase', error);
        this.cargando = false;
        this.navCtrl.navigateBack('/app/classes');
        this.mostrarToast('Error al cargar la información', 'danger');
      }
    });
  }

  isClassFull(): boolean {
    if (!this.gymClass) return true;
    return this.gymClass.currentBookings >= this.gymClass.maxCapacity;
  }

  getCapacityColor(): string {
    if (!this.gymClass) return 'primary';
    
    const ratio = this.gymClass.currentBookings / this.gymClass.maxCapacity;
    
    if (ratio >= 0.9) return 'danger';
    if (ratio >= 0.7) return 'warning';
    return 'success';
  }

  async reservarClase() {
    if (!this.gymClass || this.isClassFull() || this.reservando) return;
    
    this.reservando = true;
    
    this.bookingsService.addBooking(this.gymClass.id).subscribe({
      next: async (booking) => {
        this.mostrarToast(`¡Reserva confirmada para ${this.gymClass?.name}!`, 'success');
        
        // Actualizar contador de la clase en local para UX
        if (this.gymClass) {
          this.gymClass.currentBookings++;
        }
        
        this.reservando = false;
        
        // Mostrar alerta de confirmación
        const alert = await this.alertCtrl.create({
          header: '¡Reserva Exitosa!',
          message: `Has reservado una plaza para ${this.gymClass?.name}. ¿Deseas ver tus reservas?`,
          buttons: [
            {
              text: 'No, seguir explorando',
              role: 'cancel'
            },
            {
              text: 'Ver Mis Reservas',
              handler: () => {
                this.navCtrl.navigateForward('/app/bookings');
              }
            }
          ]
        });
        
        await alert.present();
      },
      error: (error) => {
        console.error('Error al reservar', error);
        this.mostrarToast('Error al realizar la reserva', 'danger');
        this.reservando = false;
      }
    });
  }

  async mostrarToast(mensaje: string, color: string = 'primary') {
    const toast = await this.toastCtrl.create({
      message: mensaje,
      duration: 2000,
      position: 'bottom',
      color: color
    });
    toast.present();
  }

  compartir(medio: string) {
    if (!this.gymClass) return;
    
    const mensaje = `¡He encontrado una clase de ${this.gymClass.name} con ${this.gymClass.instructor}!`;
    
    switch (medio) {
      case 'whatsapp':
        // En una app real, integraríamos con el plugin de Social Sharing
        this.mostrarToast('Compartiendo por WhatsApp...', 'success');
        break;
      case 'twitter':
        this.mostrarToast('Compartiendo por Twitter...', 'success');
        break;
      case 'email':
        this.mostrarToast('Compartiendo por Email...', 'success');
        break;
    }
  }
}
