import { TestBed } from '@angular/core/testing';

import { TransferAccount } from '../../checkout-page.models';
import { TransferPaymentContentComponent } from './transfer-payment-content.component';

describe('TransferPaymentContentComponent', () => {
  const transferAccount: TransferAccount = {
    titular: 'Titular Test',
    entidad: 'Entidad Test',
    cvu: '0000000000000000000000',
    alias: 'alias.test'
  };

  it('requests the payer DNI before showing account information', async () => {
    await TestBed.configureTestingModule({
      imports: [TransferPaymentContentComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toContain('DNI del pagador');
    expect(fixture.nativeElement.textContent).not.toContain('DATOS DE CUENTA');

    const emitted: string[] = [];
    fixture.componentInstance.requestTransferData.subscribe((dni) => emitted.push(dni));
    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
    input.value = '12345678';
    input.dispatchEvent(new Event('input'));
    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
    fixture.detectChanges();

    expect(emitted).toEqual(['12345678']);
  });

  it('shows validation errors and does not submit an invalid DNI', async () => {
    await TestBed.configureTestingModule({
      imports: [TransferPaymentContentComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
    const emitted: string[] = [];
    fixture.componentInstance.requestTransferData.subscribe((dni) => emitted.push(dni));
    fixture.detectChanges();

    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
    input.value = '12abc';
    input.dispatchEvent(new Event('input'));
    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
    fixture.detectChanges();

    expect(emitted).toEqual([]);
    expect(fixture.nativeElement.textContent).toContain('solo puede contener números');
  });

  it('shows the account information and copied-field feedback', async () => {
    await TestBed.configureTestingModule({
      imports: [TransferPaymentContentComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
    fixture.componentRef.setInput('transferAccount', transferAccount);
    fixture.componentRef.setInput('copiedTransferField', 'cvu');
    fixture.detectChanges();

    const text = fixture.nativeElement.textContent as string;
    expect(text).toContain(transferAccount.titular);
    expect(text).toContain(transferAccount.entidad);
    expect(text).toContain(transferAccount.cvu);
    expect(text).toContain(transferAccount.alias);
    expect(text).toContain('CVU copiado');
    expect(text).not.toContain('Alias copiado');
  });

  it('emits the selected transfer value', async () => {
    await TestBed.configureTestingModule({
      imports: [TransferPaymentContentComponent]
    }).compileComponents();

    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
    fixture.componentRef.setInput('transferAccount', transferAccount);
    fixture.detectChanges();

    const emitted: Array<{ field: string; value: string }> = [];
    fixture.componentInstance.copyTransferValue.subscribe((value) => emitted.push(value));

    const copyButtons = fixture.nativeElement.querySelectorAll('app-icon-button');
    copyButtons[0].click();
    copyButtons[1].click();

    expect(emitted).toEqual([
      { field: 'cvu', value: transferAccount.cvu },
      { field: 'alias', value: transferAccount.alias }
    ]);
  });
});
