<section class="product-detail">
  @if (loading()) {
    <div class="text-center py-5">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Cargando...</span>
      </div>
    </div>
  } @else if (error()) {
    <div class="alert alert-danger text-center mb-0" role="alert">
      {{ error() }}
    </div>
  } @else if (product(); as prod) {
    <div class="row g-4 g-xl-5 align-items-start">
      <div class="col-12 col-lg-5">
        <div #carouselHost class="product-detail__carousel">
          <app-product-carousel [images]="carouselImages()" />
        </div>
      </div>

      <div class="col-12 col-lg-7">
        <div class="product-detail__panel">
          <section class="product-detail__section">
            <h1 class="product-detail__title mb-0">{{ prod.nombre }}</h1>

            <div class="product-detail__title-price-divider"></div>

            <div class="product-detail__price-group">
              <span class="product-detail__price-current">
                {{ getFormattedPrice(effectivePrice()) }}
              </span>

              @if (oldPrice(); as oldPrice) {
                <span class="product-detail__price-previous">{{ oldPrice }}</span>
              }
            </div>
          </section>

          @if (hasRenderableAttributes()) {
            <div class="product-detail__divider"></div>

            <section class="product-detail__section product-detail__section--attributes">
              <app-product-attribute-selector
                [attributes]="renderableAttributes()"
                [variants]="prod.variants"
                [selectedVariant]="prod.selected_variant ?? null"
                [inventoryPolicy]="prod.inventory_policy"
                (variantChange)="onVariantChange($event)"
              />
            </section>
          }

          <div class="product-detail__divider"></div>

          <section class="product-detail__section">
            <div class="product-detail__purchase">
              <app-quantity-selector [(quantity)]="quantity" [max]="selectedVariantMax()" />

              <div class="product-detail__actions">
                <app-button
                  class="product-detail__cta"
                  variant="secondary"
                  type="button"
                  [disabled]="!selectedVariantAvailable() || variantLoading() || addingToCart()"
                  (click)="addToCart()"
                >
                  @if (addingToCart()) {
                    Guardando
                  } @else if (variantLoading()) {
                    <div class="spinner-border spinner-border-sm" role="status"></div>
                  } @else {
                    Agregar al carrito
                  }
                </app-button>

                <app-button
                  class="product-detail__cta"
                  type="button"
                  [disabled]="
                    !selectedVariantAvailable() || variantLoading() || creatingDirectPurchase()
                  "
                  (click)="buyNow()"
                >
                  @if (variantLoading() || creatingDirectPurchase()) {
                    <div class="spinner-border spinner-border-sm" role="status"></div>
                  } @else {
                    Comprar
                  }
                </app-button>
              </div>
            </div>
          </section>

          <div class="product-detail__divider"></div>

          <section class="product-detail__section product-detail__section--description">
            <h2 class="product-detail__description-heading">DESCRIPCIÓN</h2>

            <div
              #descriptionBody
              class="product-detail__description-body"
              [class.product-detail__description-body--expanded]="descriptionExpanded()"
              [style.max-height.px]="descriptionExpanded() ? descriptionMaxHeight() || null : null"
            >
              {{ effectiveDescription() }}
            </div>

            @if (showDescriptionToggle()) {
              <button
                type="button"
                class="product-detail__description-toggle"
                (click)="toggleDescription()"
              >
                {{ descriptionExpanded() ? 'Mostrar menos' : 'Mostrar más' }}
              </button>
            }
          </section>
        </div>
      </div>
    </div>
  } @else {
    <div class="alert alert-warning text-center mb-0" role="alert">
      No se encontró el producto especificado.
    </div>
  }
</section>
