import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { <%= classify(name) %>, <%= classify(name) %>Value } from './<%= dasherize(name) %>';

@Component({
  imports: [<%= classify(name) %>],
  template: `
    <<%= selector %>
      title="Nova transferência"
      (transferSubmit)="submittedTransfer = $event"
    />
  `,
})
class HostComponent {
  submittedTransfer: <%= classify(name) %>Value | null = null;
}

describe('<%= classify(name) %>', () => {
  let fixture: ComponentFixture<HostComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
    fixture = TestBed.createComponent(HostComponent);
    fixture.detectChanges();
  });

  function form(): HTMLFormElement {
    return fixture.nativeElement.querySelector('form');
  }

  function recipient(): HTMLInputElement {
    return fixture.nativeElement.querySelector('input[name="recipient"]');
  }

  function amount(): HTMLInputElement {
    return fixture.nativeElement.querySelector('input[name="amount"]');
  }

  function submit(): void {
    form().dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
    fixture.detectChanges();
  }

  it('renders native form controls with labels and descriptions', () => {
    const legend = fixture.nativeElement.querySelector('legend');
    const select = fixture.nativeElement.querySelector('select');

    expect(form().getAttribute('aria-labelledby')).toBe(legend.id);
    expect(legend.textContent).toContain('Nova transferência');
    expect(select.required).toBe(true);
    expect(recipient().required).toBe(true);
    expect(amount().inputMode).toBe('decimal');
    expect(amount().getAttribute('aria-describedby')).toBeTruthy();
  });

  it('shows validation messages for missing transfer details', () => {
    submit();

    expect(fixture.nativeElement.textContent).toContain('Informe um destinatário.');
    expect(fixture.nativeElement.textContent).toContain('Informe um valor.');
    expect(fixture.nativeElement.querySelectorAll('[role="alert"]').length).toBeGreaterThan(0);
  });

  it('emits transferSubmit when required details are valid', () => {
    recipient().value = 'Camila Souza';
    recipient().dispatchEvent(new Event('input', { bubbles: true }));
    amount().value = '250.75';
    amount().dispatchEvent(new Event('input', { bubbles: true }));
    fixture.detectChanges();

    submit();

    expect(fixture.componentInstance.submittedTransfer?.recipient).toBe('Camila Souza');
    expect(fixture.componentInstance.submittedTransfer?.amount).toBe('250.75');
    expect(fixture.nativeElement.textContent).toContain('detalhes da transferência são válidos');
  });
});