import { Component, OnInit, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatTableModule } from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';
import { MatCardModule } from '@angular/material/card';
import { ApiService } from '../../../core/services/api.service';
import { NotificationService } from '../../../core/services/notification.service';

@Component({
  selector: 'app-department-list',
  standalone: true,
  imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatChipsModule, MatCardModule],
  template: `
    <mat-card>
      <mat-card-header>
        <mat-card-title>Departments</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table mat-table [dataSource]="departments" class="full-width">
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>Name</th>
            <td mat-cell *matCellDef="let dept">{{ dept.name }}</td>
          </ng-container>

          <ng-container matColumnDef="code">
            <th mat-header-cell *matHeaderCellDef>Code</th>
            <td mat-cell *matCellDef="let dept"><code>{{ dept.code }}</code></td>
          </ng-container>

          <ng-container matColumnDef="wallet">
            <th mat-header-cell *matHeaderCellDef>Wallet</th>
            <td mat-cell *matCellDef="let dept"><code class="wallet-addr">{{ dept.walletAddress }}</code></td>
          </ng-container>

          <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef>Status</th>
            <td mat-cell *matCellDef="let dept">
              <mat-chip [color]="dept.isActive ? 'primary' : 'warn'">
                {{ dept.isActive ? 'Active' : 'Inactive' }}
              </mat-chip>
            </td>
          </ng-container>

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef>Actions</th>
            <td mat-cell *matCellDef="let dept">
              <button mat-icon-button><mat-icon>edit</mat-icon></button>
              <button mat-icon-button><mat-icon>key</mat-icon></button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
      </mat-card-content>
    </mat-card>
  `,
  styles: [`
    .full-width { width: 100%; }
    .wallet-addr { font-size: 0.75rem; }
  `]
})
export class DepartmentListComponent implements OnInit {
  departments: any[] = [];
  displayedColumns = ['name', 'code', 'wallet', 'status', 'actions'];
  readonly loading = signal(false);

  constructor(private api: ApiService, private notification: NotificationService) {}

  async ngOnInit() {
    this.loading.set(true);
    try {
      const response = await this.api.get<any>('/admin/departments').toPromise();
      this.departments = response.data || [];
    } catch (error) {
      this.loading.set(false);
      this.notification.error('Failed to load departments. Please try again.');
      console.error('Error:', error);
    } finally {
      this.loading.set(false);
    }
  }
}
