import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { CardModule } from 'primeng/card';
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';
import { PasswordModule } from 'primeng/password';
import { DividerModule } from 'primeng/divider';
import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
import { ToastModule } from 'primeng/toast';
import { MessageService } from 'primeng/api';
import { FooterComponent } from "../../components/footer/footer.component";
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-login',
  imports: [
    CommonModule,
    FormsModule,
    CardModule,
    InputTextModule,
    ButtonModule,
    PasswordModule,
    DividerModule,
    MessagesModule,
    MessageModule,
    ToastModule,
    FooterComponent
  ],
  providers: [MessageService],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})
export class LoginComponent implements OnInit {
  // Login form
  email: string = '';
  password: string = '';
  loading: boolean = false;
  errorMessage: string = '';
  
  // Password recovery form
  recoveryEmail: string = '';
  recoveryLoading: boolean = false;
  recoveryMessage: string = '';
  recoveryStatus: string = 'info';
  
  // Control de formularios
  showRecovery: boolean = false;
  isInitialLoad: boolean = false;
  
  constructor(
    private router: Router,
    private authService: AuthService,
    private messageService: MessageService
  ) { }
  
  ngOnInit() {
    
  }
  
  /**
   * Cambia entre el formulario de login y recuperación
   */
  toggleRecovery(event: Event) {
    event.preventDefault();
    this.showRecovery = !this.showRecovery;
    this.errorMessage = '';
    this.recoveryMessage = '';
    
    // Si estamos cambiando al formulario de recuperación, copiar el email actual
    if (this.showRecovery && this.email) {
      this.recoveryEmail = this.email;
    }
    
    // Forzar actualización del DOM con un pequeño retraso
    setTimeout(() => {
      // Este timeout ayuda a que Angular aplique los cambios de clase completamente
    }, 50); // Aumentado para asegurar la transición suave
  }
  
  /**
   * Proceso de login
   */
  onLogin() {
    this.loading = true;
    this.errorMessage = '';
    
    // Llamar al servicio auth
    this.authService.login({ email: this.email, password: this.password })
      .subscribe({
        next: () => {
          console.log('Login exitoso');
          this.loading = false;
          this.router.navigate(['/inicio']);
        },
        error: (error) => {
          console.error('Error en login:', error);
          this.loading = false;
          this.errorMessage = 'Credenciales incorrectas';
          this.messageService.add({
            severity: 'error',
            summary: 'Error',
            detail: 'Credenciales incorrectas'
          });
        }
      });
  }
  
  /**
   * Proceso de recuperación de contraseña
   */
  onRecoverPassword() {
    if (!this.recoveryEmail) {
      this.recoveryMessage = 'Debes ingresar un email';
      this.recoveryStatus = 'error';
      return;
    }
    
    this.recoveryLoading = true;
    this.recoveryMessage = '';
    
    // Simulamos la recuperación (en producción, esto llamaría a un servicio real)
    setTimeout(() => {
      this.recoveryLoading = false;
      this.recoveryMessage = 'Hemos enviado un enlace de recuperación a tu email';
      this.recoveryStatus = 'success';
      this.messageService.add({
        severity: 'success',
        summary: 'Email enviado',
        detail: 'Se ha enviado un enlace de recuperación a tu correo'
      });
    }, 1500);
  }
}