import { Component, ElementRef, ViewChild, Inject, PLATFORM_ID } from '@angular/core';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './login.html',
  styleUrls: ['./login.scss']
})
export class LoginComponent {
  loginForm: FormGroup;
  isSubmitting = false;
  apiError = '';

  // Variável necessária para o ícone de olho no HTML novo
  showPassword = false;

  toastMessage = '';
  @ViewChild('successToast') successToast!: ElementRef;

  constructor(
    private fb: FormBuilder,
    private authService: AuthService,
    private router: Router,
    @Inject(PLATFORM_ID) private platformId: object
  ) {
    this.loginForm = this.fb.group({
      username: ['', [Validators.required]], 
      password: ['', [Validators.required, Validators.minLength(6)]],
      // Adicionado apenas para não dar erro no HTML novo, mas a lógica de envio ignora se quiser
      rememberMe: [false] 
    });
  }

  // Método necessário para o botão do "olhinho" funcionar
  togglePassword(): void {
    this.showPassword = !this.showPassword;
  }

  private async showToast(message: string) {
    this.toastMessage = message;

    // ✅ SSR-safe: só roda no browser
    if (!isPlatformBrowser(this.platformId)) return;

    const bs = await import('bootstrap');
    const toast = new bs.Toast(this.successToast.nativeElement, { autohide: true, delay: 1500 });
    toast.show();
  }

  private getNameFromToken(token: string): string {
    try {
      const payload = token.split('.')[1];
      const base64 = payload.replace(/-/g, '+').replace(/_/g, '/');
      const json = decodeURIComponent(
        atob(base64)
          .split('')
          .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
          .join('')
      );
      const data = JSON.parse(json);
      return data?.name ?? 'usuário';
    } catch {
      return 'usuário';
    }
  }

  onSubmit(): void {
    console.log('🚀 Iniciando login...');
    this.apiError = '';

    if (this.loginForm.invalid) {
      console.log('❌ Formulário inválido', this.loginForm.errors);
      this.loginForm.markAllAsTouched();
      return;
    }

    this.isSubmitting = true;
    const v = this.loginForm.value;

    this.authService.login(
      { email: v.username, password: v.password },
      { rememberMe: !!v.rememberMe }
    ).subscribe({
      next: (res: any) => { // Use 'any' temporariamente para ver tudo que vem
        console.log('✅ Resposta da API:', res);
        this.isSubmitting = false;

        // VERIFICAÇÃO 1: O token veio mesmo?
        // As vezes vem como res.accessToken, res.data.token, etc.
        const token = res?.token || res?.accessToken; 

        if (!token) {
          console.error('❌ Token não encontrado na resposta!');
          this.apiError = 'Erro: A API não retornou o token.';
          return;
        }

        this.authService.setToken(token, !!v.rememberMe);

        const payload = this.authService.getTokenPayload();
        const tenantId = payload?.['tenantId'] ?? payload?.['tenant'] ?? payload?.['TenantId'];
        if (!tenantId) {
          this.apiError = 'Token invalido: tenantId ausente.';
          this.authService.logout();
          this.isSubmitting = false;
          return;
        }

        // VERIFICAÇÃO 2: Decodificação
        try {
          const nome = this.getNameFromToken(token);
          console.log('👤 Nome extraído:', nome);
          
          console.log('🔄 Tentando ir para /dashboard...');
          this.router.navigate(['/dashboard'], {
            state: { toastMessage: `Bem-vindo, ${nome}!` }
          }).then(sucesso => {
            if (sucesso) console.log('✅ Navegação funcionou!');
            else console.error('❌ Navegação falhou! A rota "/dashboard" existe?');
          });

        } catch (e) {
          console.error('❌ Erro ao processar token ou navegar:', e);
          // Força a ida mesmo se o nome falhar
          this.router.navigate(['/dashboard']);
        }
      },
      error: (err) => {
        console.error('❌ Erro na requisição:', err);
        this.isSubmitting = false;
        this.apiError = err?.error?.message || 'Usuário ou senha incorretos.';
      }
    });
  }

  hasError(field: string, error?: string): boolean {
    const control = this.loginForm.get(field);
    if (!control) return false;
    if (error) return control.touched && control.hasError(error);
    return !!(control.touched && control.invalid);
  }
}


