<div class="payment-panel__card">
  @if (validationStatus() === 'error') {
    <app-payment-verification-error
      [paymentAmount]="paymentAmount()"
      [whatsappUrl]="whatsappUrl()"
      [title]="verificationErrorTitle()"
    />
  } @else {
    <div class="dni-form-container">
      <h3 class="dni-form-title">Ingresá DNI de quién va a transferir</h3>
      <form class="dni-form row gx-2" (submit)="$event.preventDefault(); onSubmitDni()">
        <div class="col-8">
          <app-input
            type="text"
            [value]="dniControl.value"
            (valueChange)="dniControl.setValue($event.toString()); dniControl.markAsDirty()"
            [disabled]="isDniDisabled()"
            [invalid]="dniControl.invalid && (dniControl.dirty || dniControl.touched)"
          />
        </div>
        <div class="col-4">
          @if (isDniDisabled()) {
            <app-button
              type="button"
              variant="secondary"
              hostClass="w-100 h-100"
              buttonClass="w-100 h-100 px-0"
              (click)="enableEditing()"
            >
              Modificar
            </app-button>
          } @else {
            <app-button
              type="submit"
              variant="primary"
              hostClass="w-100 h-100"
              buttonClass="w-100 h-100 px-0"
              [disabled]="dniControl.invalid"
            >
              Continuar
            </app-button>
          }
        </div>
      </form>
    </div>

    @if (transferAccount() && !isEditing()) {
      <div class="payment-panel__divider"></div>
      <div class="payment-panel__account">
        <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>

        <div class="payment-detail">
          <span class="payment-detail__label">Titular:</span>
          <span class="payment-detail__value">{{ transferAccount()?.titular }}</span>
        </div>

        <div class="payment-detail">
          <span class="payment-detail__label">Entidad:</span>
          <span class="payment-detail__value">{{ transferAccount()?.entidad }}</span>
        </div>

        <div class="payment-detail payment-detail--copy">
          <span class="payment-detail__label">CVU:</span>
          <span class="payment-detail__value">{{ transferAccount()?.cvu }}</span>
          <app-icon-button
            variant="copy"
            ariaLabel="Copiar CVU"
            (click)="requestCopy('cvu', transferAccount()!.cvu)"
          />
          @if (copiedTransferField() === 'cvu') {
            <span class="payment-detail__feedback" style="grid-column: 1 / -1; text-align: center"
              >¡Copiado!</span
            >
          }
        </div>

        <div class="payment-detail payment-detail--copy">
          <span class="payment-detail__label">Alias:</span>
          <span class="payment-detail__value">{{ transferAccount()?.alias }}</span>
          <app-icon-button
            variant="copy"
            ariaLabel="Copiar Alias"
            (click)="requestCopy('alias', transferAccount()!.alias)"
          />
          @if (copiedTransferField() === 'alias') {
            <span class="payment-detail__feedback" style="grid-column: 1 / -1; text-align: center"
              >¡Copiado!</span
            >
          }
        </div>
      </div>

      <div class="mt-4">
        <app-button
          type="button"
          variant="primary"
          hostClass="w-100"
          buttonClass="w-100"
          [disabled]="validationStatus() === 'checking'"
          (click)="completePurchase.emit()"
        >
          {{ validationStatus() === 'checking' ? 'Validando pago...' : 'Ya transferí' }}
        </app-button>
      </div>
    }

    @if (validationStatus() === 'checking') {
      <div class="payment-verification" role="status" aria-live="polite">
        <span class="payment-verification__spinner" aria-hidden="true"></span>
        <span class="payment-verification__message">Verificando pago</span>
      </div>
    }
  }
</div>
