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

export interface <%= classify(name) %>Limit {
  id: string;
  label: string;
  current: number;
  requested: number;
  max: number;
  currency: string;
  status: string;
}

export interface <%= classify(name) %>Request {
  id: string;
  requested: number;
}

const DEFAULT_LIMITS: readonly <%= classify(name) %>Limit[] = [
  { id: 'pix-day', label: 'Limite diário do Pix', current: 1000, requested: 1500, max: 5000, currency: 'BRL', status: 'Ativo' },
  { id: 'card-online', label: 'Limite do cartão online', current: 2500, requested: 3000, max: 10000, currency: 'BRL', status: 'Ativo' },
];

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 requestedLimits = signal<Record<string, number>>(
    Object.fromEntries(DEFAULT_LIMITS.map((limit) => [limit.id, limit.requested])),
  );
  protected readonly statusMessage = signal('');

  readonly title = input('Gerenciar limites');
  readonly description = input('Revise os limites bancários atuais e solicite alterações.');
  readonly submitLabel = input('Solicitar alteração de limites');
  readonly successMessage = input('A solicitação de alteração de limite está pronta para aprovação.');
  readonly limits = input<readonly <%= classify(name) %>Limit[]>(DEFAULT_LIMITS);
  readonly limitChange = output<<%= classify(name) %>Request>();
  readonly limitSubmit = output<readonly <%= classify(name) %>Request[]>();

  protected readonly titleId = computed(() => `${this.instanceId}-title`);
  protected readonly descriptionId = computed(() => `${this.instanceId}-description`);

  protected inputId(limit: <%= classify(name) %>Limit): string {
    return `${this.instanceId}-${limit.id}-requested`;
  }

  protected detailsId(limit: <%= classify(name) %>Limit): string {
    return `${this.instanceId}-${limit.id}-details`;
  }

  protected requestedValue(limit: <%= classify(name) %>Limit): number {
    return this.requestedLimits()[limit.id] ?? limit.requested;
  }

  protected usageText(limit: <%= classify(name) %>Limit): string {
    return `${limit.current} ${limit.currency} de ${limit.max} ${limit.currency} disponíveis atualmente. Situação: ${limit.status}.`;
  }

  protected updateRequestedLimit(limit: <%= classify(name) %>Limit, event: Event): void {
    const input = event.target as HTMLInputElement;
    const requested = Number(input.value);
    this.requestedLimits.update((current) => ({ ...current, [limit.id]: requested }));
    this.limitChange.emit({ id: limit.id, requested });
  }

  protected submit(event: SubmitEvent): void {
    event.preventDefault();
    const requests = this.limits().map((limit) => ({ id: limit.id, requested: this.requestedValue(limit) }));
    this.statusMessage.set(this.successMessage());
    this.limitSubmit.emit(requests);
  }
}