import {
  ChangeDetectionStrategy,
  Component,
  OnInit,
  inject,
  signal,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminService, AdminUser } from '../../core/services/admin.service';

@Component({
  selector: 'app-admin-users',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule],
  template: `
    <section class="admin-area">
      <h2>Admin area</h2>
      <p data-testid="admin-loading" *ngIf="loading()">Loading users...</p>
      <p data-testid="admin-error" *ngIf="error()" style="color:var(--color-danger)">{{ error() }}</p>
      <ul data-testid="admin-user-list" *ngIf="!loading() && !error()">
        <li *ngFor="let u of users()">
          <b>{{ u.username }}</b> ({{ u.role }})
        </li>
      </ul>
    </section>
  `,
})
export class AdminUsersComponent implements OnInit {
  private readonly admin = inject(AdminService);

  readonly users = signal<AdminUser[]>([]);
  readonly loading = signal(false);
  readonly error = signal<string | null>(null);

  async ngOnInit(): Promise<void> {
    this.loading.set(true);
    this.error.set(null);
    try {
      const list = await this.admin.listUsers();
      this.users.set(list);
    } catch (e: any) {
      this.error.set(e?.error?.message ?? e?.message ?? 'Failed to load users');
    } finally {
      this.loading.set(false);
    }
  }
}