import { Component, computed, input, output, signal } from '@angular/core';

export interface <%= classify(name) %>Item {
  id: string;
  description: string;
  requester: string;
  amount: string;
  submittedAt: string;
  riskLevel: string;
  status: string;
}

const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
  {
    id: 'auth-001',
    description: 'Transferência TED para Acme Corp',
    requester: 'Ana Ribeiro',
    amount: 'R$ 12.500,00',
    submittedAt: '2026-07-24 14:35',
    riskLevel: 'Médio',
    status: 'Pendente de aprovação',
  },
  {
    id: 'auth-002',
    description: 'Lote de folha de pagamento',
    requester: 'Bruno Costa',
    amount: 'R$ 48.900,00',
    submittedAt: '2026-07-24 15:12',
    riskLevel: 'Alto',
    status: 'Pendente de aprovação',
  },
];

let nextId = 0;

@Component({
  selector: '<%= selector %>',
  imports: [],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
  protected readonly selectedIds = signal<readonly string[]>([]);
  protected readonly statusMessage = signal('');

  readonly caption = input('Autorizações pendentes');
  readonly emptyMessage = input('Nenhuma autorização pendente.');
  readonly approveLabel = input('Aprovar selecionados');
  readonly rejectLabel = input('Rejeitar selecionados');
  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
  readonly approve = output<readonly <%= classify(name) %>Item[]>();
  readonly reject = output<readonly <%= classify(name) %>Item[]>();

  protected readonly captionId = computed(() => `${this.instanceId}-caption`);
  protected readonly selectableItems = computed(() => this.items().filter((item) => item.status.toLowerCase().includes('pendente')));
  protected readonly selectedItems = computed(() => this.items().filter((item) => this.selectedIds().includes(item.id)));
  protected readonly allSelected = computed(() => {
    const selectable = this.selectableItems();
    return selectable.length > 0 && selectable.every((item) => this.selectedIds().includes(item.id));
  });
  protected readonly hasSelection = computed(() => this.selectedItems().length > 0);

  protected rowId(item: <%= classify(name) %>Item): string {
    return `${this.instanceId}-${item.id}`;
  }

  protected isSelected(item: <%= classify(name) %>Item): boolean {
    return this.selectedIds().includes(item.id);
  }

  protected toggleAll(event: Event): void {
    const checked = (event.target as HTMLInputElement).checked;
    this.selectedIds.set(checked ? this.selectableItems().map((item) => item.id) : []);
  }

  protected toggleItem(item: <%= classify(name) %>Item, event: Event): void {
    const checked = (event.target as HTMLInputElement).checked;
    this.selectedIds.update((current) => {
      if (checked) {
        return current.includes(item.id) ? current : [...current, item.id];
      }

      return current.filter((id) => id !== item.id);
    });
  }

  protected approveSelected(): void {
    const selected = this.selectedItems();
    this.statusMessage.set(`${selected.length} solicitaç${selected.length === 1 ? 'ão' : 'ões'} de autorização aprovada${selected.length === 1 ? '' : 's'}.`);
    this.approve.emit(selected);
    this.selectedIds.set([]);
  }

  protected rejectSelected(): void {
    const selected = this.selectedItems();
    this.statusMessage.set(`${selected.length} solicitaç${selected.length === 1 ? 'ão' : 'ões'} de autorização rejeitada${selected.length === 1 ? '' : 's'}.`);
    this.reject.emit(selected);
    this.selectedIds.set([]);
  }
}