import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
import { ZardCardComponent } from '@shared/components/card/card.component';
import { ZardFormModule } from '@shared/components/form/form.module';
import { ZardInputDirective } from '@shared/components/input/input.directive';
import { ZardButtonComponent } from '@shared/components/button/button.component';
import { ZardAvatarComponent } from '@shared/components/avatar/avatar.component';

@Component({
  standalone: true,
  selector: 'app-profile',
  templateUrl: './profile.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    CommonModule,
    ReactiveFormsModule,
    ZardCardComponent,
    ZardFormModule,
    ZardInputDirective,
    ZardButtonComponent,
    ZardAvatarComponent,
  ],
})
export class ProfilePage {
  profileForm;
  passwordForm;
  savingProfile = signal(false);
  savingPassword = signal(false);
  submittedProfile = false;
  submittedPassword = false;

  avatar = { fallback: 'PM', url: '/assets/images/avatar.svg', alt: 'Profil' };

  constructor(private fb: FormBuilder) {
    this.profileForm = this.fb.group({
      nom: ['', Validators.required],
      prenom: ['', Validators.required],
      identifiant: ['', Validators.required],
    });

    this.passwordForm = this.fb.group({
      current: ['', Validators.required],
      next: ['', [Validators.required, Validators.minLength(6)]],
      confirm: ['', [Validators.required, Validators.minLength(6)]],
    });
  }

  saveProfile() {
    this.submittedProfile = true;
    if (this.profileForm.invalid) {
      this.profileForm.markAllAsTouched();
      return;
    }
    this.savingProfile.set(true);
    setTimeout(() => this.savingProfile.set(false), 600);
  }

  changePassword() {
    this.submittedPassword = true;
    if (this.passwordForm.invalid) {
      this.passwordForm.markAllAsTouched();
      return;
    }
    const { next, confirm } = this.passwordForm.getRawValue();
    if (next !== confirm) {
      // simple inline mismatch handling; in real app, set an error
      return;
    }
    this.savingPassword.set(true);
    setTimeout(() => this.savingPassword.set(false), 600);
  }
}


