<div class="checkout-payment">
  <div class="checkout-payment__content">
    <section class="payment-methods" aria-labelledby="payment-methods-title">
      <h2 id="payment-methods-title" class="payment-methods__title">Selecciona el metodo de pago</h2>

      <div class="payment-methods__list" role="radiogroup" aria-label="Metodo de pago">
        @for (method of paymentMethods(); track method.id) {
          <label
            class="payment-method"
            [class.is-selected]="selectedPaymentMethod() === method.id"
          >
            <input
              class="payment-method__radio"
              type="radio"
              name="payment-method"
              [value]="method.id"
              [checked]="selectedPaymentMethod() === method.id"
              (change)="selectPaymentMethod(method.id)"
            />

            <span class="payment-method__label">
              @if (method.id === 'telepagos') {
                <span class="telepagos-logo" aria-label="TelePagos">
                  <span class="telepagos-logo__tele">tele</span><span class="telepagos-logo__pagos">pagos</span>
                </span>
              } @else {
                {{ method.label }}
              }
            </span>

            <i class="fa-solid fa-angle-right payment-method__chevron" aria-hidden="true"></i>
          </label>
        }
      </div>
    </section>

    <section class="payment-panel d-flex justify-content-end" aria-live="polite">
      @if (isGeneratingIntent()) {
        <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
          <h3 class="payment-panel__title">Cargando información de pago...</h3>
        </div>
      } @else if (selectedPaymentMethod() === 'qr') {
        <div class="payment-panel__card">
          <h3 class="payment-panel__title">Ingresa a tu billetera y escanea el siguiente QR</h3>
          <div class="payment-panel__divider"></div>

          <div class="qr-code" aria-label="QR de pago">
            @if (qrData()) {
              <qrcode [qrdata]="qrData()!" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
            } @else {
              <span class="qr-code__finder qr-code__finder--tl"></span>
              <span class="qr-code__finder qr-code__finder--tr"></span>
              <span class="qr-code__finder qr-code__finder--bl"></span>
            }
          </div>
        </div>
      } @else if (selectedPaymentMethod() === 'transfer') {
        <div class="payment-panel__card">
          <h3 class="payment-panel__title">Transferi a la siguiente cuenta desde cualquier billetera</h3>
          <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>
              <strong class="payment-detail__value">{{ transferAccount().titular }}</strong>
            </div>

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

            <div class="payment-detail payment-detail--copy">
              <span class="payment-detail__label">CVU:</span>
              <strong class="payment-detail__value">{{ transferAccount().cvu }}</strong>
              <app-icon-button
                variant="copy"
                ariaLabel="Copiar CVU"
                (click)="requestCopy('cvu', transferAccount().cvu)"
              />
            </div>

            @if (copiedTransferField() === 'cvu') {
              <small class="payment-detail__feedback">CVU copiado</small>
            }

            <div class="payment-detail payment-detail--copy">
              <span class="payment-detail__label">Alias:</span>
              <strong class="payment-detail__value">{{ transferAccount().alias }}</strong>
              <app-icon-button
                variant="copy"
                ariaLabel="Copiar alias"
                (click)="requestCopy('alias', transferAccount().alias)"
              />
            </div>

            @if (copiedTransferField() === 'alias') {
              <small class="payment-detail__feedback">Alias copiado</small>
            }
          </div>
        </div>
      } @else {
        <div class="payment-panel__card">
          <h3 class="payment-panel__title">Descarga la app de TelePagos para finalizar la compra</h3>
          <div class="payment-panel__divider"></div>

          <div class="store-badges" aria-label="Tiendas disponibles">
            <div class="store-badge">
              <i class="fa-brands fa-google-play" aria-hidden="true"></i>
              <span class="store-badge__text">
                <small>Disponible en</small>
                <strong>Google Play</strong>
              </span>
            </div>

            <div class="store-badge">
              <i class="fa-brands fa-apple" aria-hidden="true"></i>
              <span class="store-badge__text">
                <small>Descargalo en</small>
                <strong>App Store</strong>
              </span>
            </div>
          </div>
        </div>
      }
    </section>
  </div>

  <div class="checkout-payment__actions">
    <app-button
      type="button"
      variant="cancel"
      hostClass="checkout-payment__action-btn"
      buttonClass="w-100"
      [disabled]="true"
    >
      Cancelar
    </app-button>

    <app-button
      type="button"
      hostClass="checkout-payment__action-btn"
      buttonClass="w-100"
      [disabled]="isGeneratingIntent()"
      (click)="complete.emit()"
    >
      Finalizar compra
    </app-button>
  </div>
</div>

