import { Component } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { AuthService } from '../../cores/services/auth.service';
import { StorageService } from '../../cores/services/storage.service';
import { FormsModule } from '@angular/forms';
import { LoginData } from '../../cores/interface/auth';
import { ToastrService } from 'ngx-toastr'; 
import { CommonModule } from '@angular/common';
import { catchError } from 'rxjs';

@Component({
  selector: 'app-auth',
  standalone: true,
  imports: [FormsModule, RouterModule, CommonModule], 
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
export class AuthComponent {
  email: string = '';
  password: string = '';
  rememberMe: boolean = false;
  loading: boolean = false;
  passwordVisible: boolean = false; 

  constructor(private authService: AuthService, 
              private storageService: StorageService, 
              private router: Router, 
              private toast: ToastrService) {}

  ngOnInit(): void {
    if (this.storageService.getToken()) {
      this.router.navigate(['/dashboard']);
    }
  }

  onSubmit() {
    this.loading = true; 
    if (!this.email || !this.password) {
      this.loading = false;
      this.toast.error('Please fill in all fields.');
      return;
    }

    const loginData: LoginData = {
      email: this.email,
      password: this.password,
      rememberMe: this.rememberMe
    };

    this.authService.login(loginData).subscribe(
      (response) => {
        this.storageService.saveToken(response.data.token, this.rememberMe);
        this.router.navigate(['/dashboard']);
        this.toast.success('Login successful');
        this.loading = false; 
      },
      (error) => {
        this.loading = false;
        this.toast.error(error.error.message);
      }
    );
  }

  togglePasswordVisibility() {
    this.passwordVisible = !this.passwordVisible; 
  }
}