import {Component, inject, OnInit, signal} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {firstValueFrom} from "rxjs";
import {UsersService} from "../../../services/api";
import {AuthService} from "../../../core/auth/auth.service";


@Component({
  selector: 'app-parameters-profile',
  imports: [FormsModule, CommonModule],
  templateUrl: './parameters-profile.component.html',
  standalone: true,
  styleUrl: './parameters-profile.component.css'
})
export class ParametersProfileComponent implements OnInit {
  private usersService = inject(UsersService);
  private authService = inject(AuthService);

  profileImage = signal<string>(null);
  username = signal<string>(null);
  bio = signal<string>(null);

  editingUsername = signal(false);
  editingBio = signal(false);

  usernameError = signal<string>(null);
  loading = signal(false);

  ngOnInit() {
    const user = this.authService.currentUser();
    this.profileImage.set(user?.profilePicture ?? null);
    this.username.set(user?.username ?? null);
    this.bio.set(user?.description ?? null);
  }

  // --- Username ---

  toggleEditUsername() {
    if (this.editingUsername()) {
      this.submitUsername();
    } else {
      this.usernameError.set(null);
      this.editingUsername.set(true);
    }
  }

  async submitUsername() {
    const value = this.username()?.trim();

    if (!value) {
      this.usernameError.set('Le pseudo ne peut pas être vide.');
      return;
    }
    if (value === this.authService.currentUser()?.username) {
      this.editingUsername.set(false);
      return;
    }

    this.loading.set(true);
    const user = this.authService.currentUser();
    if (!user) return;

    try {
      await firstValueFrom(this.usersService.patchUsernameEndpoint(
          String(user.id), { username: value }
      ));
      this.authService.updateCurrentUser({ username: value }); // 👈 maj locale
      this.usernameError.set(null);
      this.editingUsername.set(false);
    } catch (e: any) {
      if (e?.status === 400) {
        this.usernameError.set('Ce nom d\'utilisateur est déjà pris.');
      } else {
        this.usernameError.set('Erreur lors de la mise à jour.');
      }
    }

    this.loading.set(false);
  }

  // --- Bio ---

  toggleEditBio() {
    if (this.editingBio()) {
      this.submitBio();
    } else {
      this.editingBio.set(true);
    }
  }

  async submitBio() {
    this.loading.set(true);
    const user = this.authService.currentUser();
    if (!user) return;

    try {
      await firstValueFrom(this.usersService.patchUserDescriptionEndpoint(
          String(user.id), { description: this.bio() }
      ));
      this.authService.updateCurrentUser({ description: this.bio() }); // 👈 maj locale
      this.editingBio.set(false);
    } catch (e) {
      console.error('Erreur lors de la mise à jour de la bio', e);
    }

    this.loading.set(false);
  }

  // --- Photo ---

  triggerFileInput() {
    document.getElementById('photoInput')?.click();
  }

  async onPhotoChange(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = async () => {
      const base64 = reader.result as string;
      this.profileImage.set(base64);

      this.loading.set(true);
      const user = this.authService.currentUser();
      if (!user) return;

      try {
        await firstValueFrom(this.usersService.patchUserProfilePictureEndpoint(
            String(user.id), { profilePicture: base64 }
        ));
        this.authService.updateCurrentUser({ profilePicture: base64 }); // 👈 maj locale
      } catch (e) {
        console.error('Erreur lors de la mise à jour de la photo', e);
      }

      this.loading.set(false);
    };
    reader.readAsDataURL(file);
  }

}