import { Component, OnInit } from '@angular/core';
import { AlertController, ToastController, NavController, ActionSheetController, LoadingController, ModalController } from '@ionic/angular';
import { User } from '../../models/user.model';
import { AuthService } from '../../services/auth.service';
import { BookingsService } from '../../services/bookings.service';
import { StorageService } from '../../services/storage.service';
import { UploadService } from '../../services/upload.service';
import { environment } from '../../../environments/environment';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
  standalone: false
})
export class ProfilePage implements OnInit {
  usuario: User | null = null;
  profileImage: string | undefined;
  notificationsEnabled = true;
  estadisticas = {
    totalReservas: 0,
    clasesCompletadas: 0
  };

  constructor(
    private authService: AuthService,
    private bookingsService: BookingsService,
    private storageService: StorageService,
    private uploadService: UploadService,
    private alertController: AlertController,
    private toastController: ToastController,
    private navController: NavController,
    private actionSheetController: ActionSheetController,
    private loadingController: LoadingController,
    private modalController: ModalController
  ) { }

  ngOnInit() {
    this.cargarDatosUsuario();
  }

  ionViewWillEnter() {
    this.cargarDatosUsuario();
    this.cargarEstadisticas();
  }

  async cargarDatosUsuario() {
    this.usuario = this.authService.getCurrentUser();
    if (this.usuario) {
      // Primero intentamos cargar la imagen de perfil local si existe
      const localImage = await this.storageService.getProfileImage();
      if (localImage) {
        this.profileImage = localImage;
      } else {
        // Intentar usar imagen del usuario (desde cualquier campo disponible)
        const userImage = this.usuario.profilePic || this.usuario.profilePicUrl;
        if (userImage) {
          this.profileImage = userImage;
          // Y la guardamos localmente para la próxima vez
          await this.storageService.saveProfileImage(userImage);
        }
      }
      
      // Usar el campo de notificaciones desde cualquiera de los formatos disponibles
      this.notificationsEnabled = 
        this.usuario.notificationsEnabled !== undefined ? 
        this.usuario.notificationsEnabled : 
        (this.usuario.preferences?.notifications ?? true);
    }
  }

  cargarEstadisticas() {
    this.bookingsService.getUserBookings().subscribe(bookings => {
      this.estadisticas.totalReservas = bookings.length;
      // Para este ejemplo, simularemos que las clases completadas son un 70% del total
      this.estadisticas.clasesCompletadas = Math.floor(bookings.length * 0.7);
    });
  }

  async cambiarFotoPerfil() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Cambiar foto de perfil',
      buttons: [
        {
          text: 'Tomar foto',
          icon: 'camera',
          handler: () => {
            this.tomarFoto(CameraSource.Camera);
          }
        },
        {
          text: 'Elegir de la galería',
          icon: 'image',
          handler: () => {
            this.tomarFoto(CameraSource.Photos);
          }
        },
        {
          text: 'Cancelar',
          icon: 'close',
          role: 'cancel'
        }
      ]
    });
    await actionSheet.present();
  }

  async tomarFoto(source: CameraSource) {
    try {
      // 1. Solicitar permisos
      const permisos = await Camera.requestPermissions();
      
      if (permisos.photos === 'granted' || permisos.camera === 'granted') {
        // 2. Mostrar loading
        const loading = await this.loadingController.create({
          message: 'Procesando imagen...',
          spinner: 'circles'
        });
        await loading.present();
        
        // 3. Capturar imagen
        const imagen = await Camera.getPhoto({
          quality: 90, // Mejor calidad
          allowEditing: true,
          width: 600,  // Mayor resolución
          height: 600, // Mayor resolución
          resultType: CameraResultType.DataUrl,
          source: source
        });
        
        // Si tenemos la imagen
        if (imagen.dataUrl) {
          try {
            // 4. Guardar localmente primero para garantizar que no se pierda
            await this.storageService.saveProfileImage(imagen.dataUrl);
            
            // 5. Actualizar UI inmediatamente con la foto tomada
            this.profileImage = imagen.dataUrl;
            
            // 6. Subir directamente el dataUrl al servidor
            // 7. Subir archivo al servidor utilizando UploadService
            this.uploadService.uploadImageFromDataUrl(
              imagen.dataUrl,
              `profile_${this.usuario?.id || 'user'}_${Date.now()}.jpeg`
            ).subscribe({
              next: async (response) => {
                // Verificar la respuesta y extraer la URL
                let imageUrl;
                
                if (response.url) {
                  imageUrl = response.url;
                } else {
                  console.log('Respuesta del servidor:', response);
                  imageUrl = response.url || '/uploads/default-avatar.jpg';
                }
                
                // Asegurarnos de que la URL sea completa
                if (imageUrl && !imageUrl.startsWith('http')) {
                  imageUrl = `${environment.apiUrl}${imageUrl}`;
                }
                
                console.log('URL de imagen recibida:', imageUrl);
                
                // 8. Actualizar el perfil del usuario con la URL del servidor
                if (this.usuario) {
                  this.authService.updateUserProfile({
                    ...this.usuario,
                    profilePic: imageUrl, // Para el frontend
                    profilePicUrl: imageUrl // Para el backend
                  }).subscribe({
                    next: (updatedUser) => {
                      this.usuario = updatedUser;
                      loading.dismiss();
                      this.mostrarToast('Foto de perfil actualizada', 'success');
                    },
                    error: (error) => {
                      console.error('Error al actualizar el perfil con la nueva imagen', error);
                      loading.dismiss();
                      // La imagen ya está guardada localmente, así que mostramos un mensaje menos alarmante
                      this.mostrarToast('Foto guardada localmente, pero no se pudo actualizar el servidor', 'warning');
                    }
                  });
                } else {
                  loading.dismiss();
                }
              },
              error: (error) => {
                console.error('Error al subir la imagen al servidor', error);
                loading.dismiss();
                // La imagen ya está guardada localmente, así que mostramos un mensaje menos alarmante
                this.mostrarToast('Foto guardada localmente, pero no se pudo subir al servidor', 'warning');
              }
            });
          } catch (error) {
            console.error('Error al procesar la imagen', error);
            loading.dismiss();
            this.mostrarToast('Error al procesar la imagen', 'danger');
          }
        } else {
          loading.dismiss();
          this.mostrarToast('No se pudo obtener la imagen', 'warning');
        }
      } else {
        this.mostrarToast('Necesitamos permiso para acceder a la cámara/galería', 'warning');
      }
    } catch (error) {
      console.error('Error al tomar foto', error);
      this.mostrarToast('Error al procesar la imagen', 'danger');
    }
  }
  

  toggleNotifications() {
    if (this.usuario) {
      const updatedPreferences = {
        ...this.usuario.preferences,
        notifications: this.notificationsEnabled
      };
      
      this.authService.updateUserProfile({
        ...this.usuario,
        preferences: updatedPreferences,
        notificationsEnabled: this.notificationsEnabled  // Campo que espera el backend
      }).subscribe({
        next: (updatedUser) => {
          this.usuario = updatedUser;
          this.mostrarToast(
            this.notificationsEnabled ? 'Notificaciones activadas' : 'Notificaciones desactivadas', 
            'success'
          );
        },
        error: (error) => {
          console.error('Error al actualizar preferencias', error);
          this.mostrarToast('Error al actualizar preferencias', 'danger');
          // Revertir el toggle si hubo error
          this.notificationsEnabled = !this.notificationsEnabled;
        }
      });
    }
  }

  async mostrarAyuda() {
    const alert = await this.alertController.create({
      header: 'Ayuda y Soporte',
      message: 'Para cualquier consulta o problema con la aplicación, contáctanos en: <br><strong>soporte@gymapp.com</strong>',
      buttons: ['Entendido']
    });
    await alert.present();
  }
  
  async mostrarEditarPerfil() {
    const alert = await this.alertController.create({
      header: 'Editar Perfil',
      inputs: [
        {
          name: 'name',
          type: 'text',
          placeholder: 'Nombre completo',
          value: this.usuario?.name || ''
        },
        {
          name: 'email',
          type: 'email',
          placeholder: 'Correo electrónico',
          value: this.usuario?.email || '',
          disabled: true // No permitimos cambiar el email en esta demo
        }
      ],
      buttons: [
        {
          text: 'Cancelar',
          role: 'cancel'
        }, 
        {
          text: 'Guardar',
          handler: (data) => {
            this.actualizarPerfil(data);
          }
        }
      ]
    });

    await alert.present();
  }
  
  async actualizarPerfil(data: {name: string, email: string}) {
    if (!this.usuario) return;
    
    // Verificar si hay cambios
    if (data.name === this.usuario.name) {
      this.mostrarToast('No hay cambios que guardar', 'medium');
      return;
    }
    
    // Mostrar loading
    const loading = await this.loadingController.create({
      message: 'Actualizando perfil...',
      spinner: 'circles'
    });
    await loading.present();
    
    // Actualizar usuario
    this.authService.updateUserProfile({
      ...this.usuario,
      name: data.name
    }).subscribe({
      next: (updatedUser) => {
        this.usuario = updatedUser;
        loading.dismiss();
        this.mostrarToast('Perfil actualizado correctamente', 'success');
      },
      error: (error) => {
        console.error('Error al actualizar perfil', error);
        loading.dismiss();
        this.mostrarToast('Error al actualizar perfil', 'danger');
      }
    });
  }

  async confirmarCerrarSesion() {
    const alert = await this.alertController.create({
      header: 'Cerrar Sesión',
      message: '¿Estás seguro de que deseas cerrar sesión?',
      buttons: [
        {
          text: 'Cancelar',
          role: 'cancel'
        },
        {
          text: 'Cerrar Sesión',
          handler: () => {
            this.cerrarSesion();
          }
        }
      ]
    });
    await alert.present();
  }

  async cerrarSesion() {
    try {
      await this.authService.logout();
      this.mostrarToast('Sesión cerrada', 'success');
      
      // Redirigir a la pantalla de login
      this.navController.navigateRoot('/auth');
    } catch (error) {
      console.error('Error al cerrar sesión', error);
      this.mostrarToast('Error al cerrar sesión', 'danger');
    }
  }

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