import { Component, inject, OnInit, TemplateRef, ViewChild, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgIcon } from '@ng-icons/core';
import { NgbNavModule, NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { PageTitle } from '@app/components/page-title/page-title';
import { UsersList } from './list/list';
import { UserProfile } from './profile/profile';
import { UsersService } from './services/users.service';
import { CreateUserDto, ClientRole, UserResponse } from './models/user';

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    NgIcon,
    NgbNavModule,
    NgbModalModule,
    PageTitle, 
    UsersList, 
    UserProfile
  ],
  templateUrl: './users.html',
})
export class Users implements OnInit {
  private modalService = inject(NgbModal);
  private usersService = inject(UsersService);
  private cdRef = inject(ChangeDetectorRef); 

  activeTab: 'list' | 'profile' = 'list';
  selectedUserId: string | null = null;

  // Données pour la création d'utilisateur
  newUser: CreateUserDto = {
    username: '',
    email: '',
    firstName: '',
    lastName: '',
    password: '',
    enabled: true,
    emailVerified: false,
    clientRoles: ['user'] 
  };
  
  availableRoles: ClientRole[] = ['admin', 'merchant', 'support', 'user'];
  selectedRoles: ClientRole[] = ['user'];
  
  creatingUser = false;
  createUserError = '';

  // Données pour la réinitialisation de mot de passe
  selectedUserForReset: UserResponse | null = null;
  newPassword = '';
  temporaryPassword = false;
  resettingPassword = false;
  resetPasswordError = '';
  resetPasswordSuccess = '';

  selectedUserForDelete: UserResponse | null = null;
  deletingUser = false;
  deleteUserError = '';

  ngOnInit() {
    this.activeTab = 'list';
    this.synchronizeRoles();
  }

  private synchronizeRoles(): void {
    // S'assurer que les rôles sont synchronisés
    this.selectedRoles = [...this.newUser.clientRoles as ClientRole[]];
  }

  showTab(tab: 'list' | 'profile', userId?: string) {
    this.activeTab = tab;
    
    if (userId) {
      this.selectedUserId = userId;
    }
  }

  backToList() {
    this.activeTab = 'list';
    this.selectedUserId = null;
  }

  // Méthodes pour les modals
  openModal(content: TemplateRef<any>, size: 'sm' | 'lg' | 'xl' = 'lg') {
    this.modalService.open(content, { 
      size: size,
      centered: true,
      scrollable: true 
    });
  }

  // Méthode pour ouvrir le modal de création d'utilisateur
  openCreateUserModal() {
    this.newUser = {
      username: '',
      email: '',
      firstName: '',
      lastName: '',
      password: '',
      enabled: true,
      emailVerified: false,
      clientRoles: ['user']
    };
    this.selectedRoles = ['user'];
    this.createUserError = '';
    this.openModal(this.createUserModal);
  }

  // Méthode pour ouvrir le modal de réinitialisation de mot de passe
  openResetPasswordModal(userId: string) {
    // Charger les données de l'utilisateur
    this.usersService.getUserById(userId).subscribe({
      next: (user) => {
        this.selectedUserForReset = user;
        this.newPassword = '';
        this.temporaryPassword = false;
        this.resetPasswordError = '';
        this.openModal(this.resetPasswordModal);
      },
      error: (error) => {
        console.error('Error loading user for password reset:', error);
      }
    });
  }

  // Gestion des rôles sélectionnés
  toggleRole(role: ClientRole) {
    const index = this.selectedRoles.indexOf(role);
    if (index > -1) {
      this.selectedRoles.splice(index, 1);
    } else {
      this.selectedRoles.push(role);
    }
    
    // Mettre à jour les deux propriétés
    this.newUser.clientRoles = [...this.selectedRoles];
  }

  isRoleSelected(role: ClientRole): boolean {
    return this.selectedRoles.includes(role);
  }

  createUser() {
    const validation = this.validateUserForm();
    if (!validation.isValid) {
      this.createUserError = validation.error!;
      return;
    }

    this.creatingUser = true;
    this.createUserError = '';

    const payload = {
      username: this.newUser.username.trim(),
      email: this.newUser.email.trim(),
      firstName: this.newUser.firstName.trim(),
      lastName: this.newUser.lastName.trim(),
      password: this.newUser.password,
      enabled: this.newUser.enabled,
      emailVerified: this.newUser.emailVerified,
      clientRoles: this.selectedRoles
    };

    this.usersService.createUser(payload).subscribe({
      next: (createdUser) => {
        this.creatingUser = false;
        this.modalService.dismissAll();
        
        if(this.usersListComponent){
          this.usersListComponent.loadUsers();
          this.usersListComponent.onClearFilters();
        }

        this.showTab('list');
      },
      error: (error) => {
        this.creatingUser = false;
        this.createUserError = this.getErrorMessage(error);
      }
    });
  }

  // Réinitialiser le mot de passe
  confirmResetPassword() {
    if (!this.selectedUserForReset || !this.newPassword || this.newPassword.length < 8) {
      this.resetPasswordError = 'Veuillez saisir un mot de passe valide (au moins 8 caractères).';
      return;
    }

    this.resettingPassword = true;
    this.resetPasswordError = '';
    this.resetPasswordSuccess = '';

    const resetDto = {
      userId: this.selectedUserForReset.id,
      newPassword: this.newPassword,
      temporary: this.temporaryPassword
    };

    this.usersService.resetPassword(resetDto).subscribe({
      next: () => {
        this.resettingPassword = false;
        this.resetPasswordSuccess = 'Mot de passe réinitialisé avec succès !';
        this.cdRef.detectChanges(); // Forcer la détection des changements
      },
      error: (error) => {
        this.resettingPassword = false;
        this.resetPasswordError = this.getResetPasswordErrorMessage(error);
        this.cdRef.detectChanges(); // Forcer la détection des changements
      }
    });
  }

  // Gestion des erreurs améliorée
  private getErrorMessage(error: any): string {
    if (error.error?.message) {
      return error.error.message;
    }
    if (error.status === 400) {
      return 'Données invalides. Vérifiez les champs du formulaire.';
    }
    if (error.status === 409) {
      return 'Un utilisateur avec ce nom ou email existe déjà.';
    }
    return 'Erreur lors de la création de l\'utilisateur. Veuillez réessayer.';
  }

  private getResetPasswordErrorMessage(error: any): string {
    if (error.error?.message) {
      return error.error.message;
    }
    if (error.status === 404) {
      return 'Utilisateur non trouvé.';
    }
    if (error.status === 400) {
      return 'Le mot de passe ne respecte pas les critères de sécurité.';
    }
    return 'Erreur lors de la réinitialisation du mot de passe. Veuillez réessayer.';
  }

  // Méthode pour ouvrir le modal de suppression
  openDeleteUserModal(userId: string) {
    this.usersService.getUserById(userId).subscribe({
      next: (user) => {
        this.selectedUserForDelete = user;
        this.deleteUserError = '';
        this.openModal(this.deleteUserModal);
      },
      error: (error) => {
        console.error('Error loading user for password reset:', error);
      }
    });
  }

  @ViewChild(UsersList) usersListComponent!: UsersList;

  private refreshUsersList(): void {
    if (this.usersListComponent && typeof this.usersListComponent.loadUsers === 'function') {
      this.usersListComponent.loadUsers();
    } else {
      console.warn('UsersList component not available for refresh');
      // Alternative: reload the current tab
      this.showTab('list');
    }
  }

  confirmDeleteUser() {
    if (!this.selectedUserForDelete) return;

    this.deletingUser = true;
    this.deleteUserError = '';

    this.usersService.deleteUser(this.selectedUserForDelete.id).subscribe({
      next: () => {
        this.deletingUser = false;
        this.modalService.dismissAll();
        
        this.refreshUsersList();
        
        this.cdRef.detectChanges();
      },
      error: (error) => {
        this.deletingUser = false;
        this.deleteUserError = this.getDeleteErrorMessage(error);
        this.cdRef.detectChanges();
      }
    });
  }

  // Gestion des erreurs pour la suppression
  private getDeleteErrorMessage(error: any): string {
    if (error.error?.message) {
      return error.error.message;
    }
    if (error.status === 404) {
      return 'Utilisateur non trouvé.';
    }
    if (error.status === 403) {
      return 'Vous n\'avez pas les permissions pour supprimer cet utilisateur.';
    }
    return 'Erreur lors de la suppression de l\'utilisateur. Veuillez réessayer.';
  }

  // Méthode pour afficher un message de succès 
  private showSuccessMessage(message: string) {
    console.log('Success:', message);
  }

  // Validation du formulaire
  private validateUserForm(): { isValid: boolean; error?: string } {
    const requiredFields = [
      { field: this.newUser.username?.trim(), name: 'Nom d\'utilisateur' },
      { field: this.newUser.email?.trim(), name: 'Email' },
      { field: this.newUser.firstName?.trim(), name: 'Prénom' },
      { field: this.newUser.lastName?.trim(), name: 'Nom' }
    ];

    for (const { field, name } of requiredFields) {
      if (!field) {
        return { isValid: false, error: `${name} est requis` };
      }
    }

    if (!this.newUser.password || this.newUser.password.length < 8) {
      return { isValid: false, error: 'Le mot de passe doit contenir au moins 8 caractères' };
    }

    return { isValid: true };
  }

  // Références aux templates de modals
  @ViewChild('createUserModal') createUserModal!: TemplateRef<any>;
  @ViewChild('resetPasswordModal') resetPasswordModal!: TemplateRef<any>;
  @ViewChild('deleteUserModal') deleteUserModal!: TemplateRef<any>;
}