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

export interface <%= classify(name) %>Value {
  name: string;
  document: string;
  bankCode: string;
  branch: string;
  account: string;
  accountType: string;
}

export interface <%= classify(name) %>AccountType {
  value: string;
  label: string;
}

const ACCOUNT_TYPES: readonly <%= classify(name) %>AccountType[] = [
  { value: 'checking', label: 'Conta corrente' },
  { value: 'savings', label: 'Conta poupança' },
  { value: 'payment', label: 'Conta de pagamento' },
];

const INITIAL_VALUE: <%= classify(name) %>Value = {
  name: '',
  document: '',
  bankCode: '',
  branch: '',
  account: '',
  accountType: 'checking',
};

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 submitted = signal(false);
  protected readonly formValue = signal<<%= classify(name) %>Value>({ ...INITIAL_VALUE });
  protected readonly statusMessage = signal('');

  readonly title = input('Dados do beneficiário');
  readonly submitLabel = input('Salvar beneficiário');
  readonly resetLabel = input('Limpar');
  readonly requiredMessage = input('Este campo é obrigatório.');
  readonly successMessage = input('Os dados do beneficiário estão prontos para revisão.');
  readonly accountTypes = input<readonly <%= classify(name) %>AccountType[]>(ACCOUNT_TYPES);
  readonly beneficiarySubmit = output<<%= classify(name) %>Value>();
  readonly beneficiaryReset = output<void>();

  protected readonly titleId = computed(() => `${this.instanceId}-title`);
  protected readonly nameId = computed(() => `${this.instanceId}-name`);
  protected readonly documentId = computed(() => `${this.instanceId}-document`);
  protected readonly bankCodeId = computed(() => `${this.instanceId}-bank-code`);
  protected readonly branchId = computed(() => `${this.instanceId}-branch`);
  protected readonly accountId = computed(() => `${this.instanceId}-account`);
  protected readonly accountTypeId = computed(() => `${this.instanceId}-account-type`);

  protected errorId(field: keyof <%= classify(name) %>Value): string {
    return `${this.instanceId}-${field}-error`;
  }

  protected fieldError(field: keyof <%= classify(name) %>Value): string {
    if (!this.submitted()) {
      return '';
    }

    return this.formValue()[field].trim() ? '' : this.requiredMessage();
  }

  protected describedBy(field: keyof <%= classify(name) %>Value): string | null {
    return this.fieldError(field) ? this.errorId(field) : null;
  }

  protected updateField(field: keyof <%= classify(name) %>Value, event: Event): void {
    const value = (event.target as HTMLInputElement | HTMLSelectElement).value;
    this.formValue.update((current) => ({ ...current, [field]: value }));
  }

  protected submit(event: SubmitEvent): void {
    event.preventDefault();
    this.submitted.set(true);

    const hasError = (['name', 'document', 'bankCode', 'branch', 'account'] as const).some((field) => this.fieldError(field));
    if (hasError) {
      this.statusMessage.set('Verifique os dados do beneficiário e tente novamente.');
      return;
    }

    this.statusMessage.set(this.successMessage());
    this.beneficiarySubmit.emit(this.formValue());
  }

  protected reset(): void {
    this.submitted.set(false);
    this.formValue.set({ ...INITIAL_VALUE });
    this.statusMessage.set('');
    this.beneficiaryReset.emit();
  }
}