SimpleCloudNotifier/webapp/src/app/features/account/account-info/account-info.component.ts

import { Component, inject, signal, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzSpinModule } from 'ng-zorro-antd/spin';
import { NzProgressModule } from 'ng-zorro-antd/progress';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { ApiService } from '../../../core/services/api.service';
import { AuthService } from '../../../core/services/auth.service';
import { NotificationService } from '../../../core/services/notification.service';
import { SettingsService } from '../../../core/services/settings.service';
import { UserWithExtra } from '../../../core/models';
import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';

@Component({
  selector: 'app-account-info',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    NzCardModule,
    NzButtonModule,
    NzIconModule,
    NzDescriptionsModule,
    NzTagModule,
    NzSpinModule,
    NzProgressModule,
    NzModalModule,
    NzFormModule,
    NzInputModule,
    NzDividerModule,
    NzPopconfirmModule,
    RelativeTimePipe,
    MetadataGridComponent,
    MetadataValueComponent,
  ],
  templateUrl: './account-info.component.html',
  styleUrl: './account-info.component.scss'
})
export class AccountInfoComponent implements OnInit {
  private apiService = inject(ApiService);
  private authService = inject(AuthService);
  private notification = inject(NotificationService);
  private settingsService = inject(SettingsService);
  private router = inject(Router);

  user = signal<UserWithExtra | null>(null);
  loading = signal(true);
  deleting = signal(false);
  expertMode = this.settingsService.expertMode;

  // Edit username modal
  showEditModal = signal(false);
  editUsername = '';
  saving = signal(false);

  ngOnInit(): void {
    this.loadUser();
  }

  loadUser(): void {
    const userId = this.authService.getUserId();
    if (!userId) return;

    this.loading.set(true);
    this.apiService.getUser(userId).subscribe({
      next: (user) => {
        this.user.set(user);
        this.loading.set(false);
      },
      error: () => {
        this.loading.set(false);
      }
    });
  }

  getQuotaPercent(): number {
    const user = this.user();
    if (!user || user.quota_max === 0) return 0;
    return Math.round((user.quota_used / user.quota_max) * 100);
  }

  getQuotaStatus(): 'success' | 'normal' | 'exception' {
    const percent = this.getQuotaPercent();
    if (percent >= 90) return 'exception';
    if (percent >= 70) return 'normal';
    return 'success';
  }

  // Edit username
  openEditModal(): void {
    const user = this.user();
    this.editUsername = user?.username || '';
    this.showEditModal.set(true);
  }

  closeEditModal(): void {
    this.showEditModal.set(false);
  }

  saveUsername(): void {
    const userId = this.authService.getUserId();
    if (!userId) return;

    this.saving.set(true);
    this.apiService.updateUser(userId, {
      username: this.editUsername || undefined
    }).subscribe({
      next: () => {
        this.notification.success('Username updated');
        this.closeEditModal();
        this.saving.set(false);
        this.loadUser();
      },
      error: () => {
        this.saving.set(false);
      }
    });
  }

  deleteAccount(): void {
    const userId = this.authService.getUserId();
    if (!userId) return;

    this.deleting.set(true);
    this.apiService.deleteUser(userId).subscribe({
      next: () => {
        this.notification.success('Account deleted');
        this.authService.logout();
        this.router.navigate(['/login']);
      },
      error: () => {
        this.deleting.set(false);
      }
    });
  }
}