<main class="product-details-page">
  @if (loading()) {
    <section class="product-details-loading" role="status" aria-live="polite">
      <div class="product-details-spinner"></div>
      <p>{{ 'productDetails.loading' | translate }}</p>
    </section>
  }

  @if (error()) {
    <section class="product-details-message error" role="alert">
      <h1>{{ 'productDetails.errorTitle' | translate }}</h1>
      <p>{{ error()! | translate }}</p>
      <button type="button" (click)="retry()">{{ 'productDetails.retry' | translate }}</button>
    </section>
  }

  @if (missing() && !loading() && !error()) {
    <section class="product-details-message">
      <h1>{{ 'productDetails.missingTitle' | translate }}</h1>
      <p>{{ 'productDetails.missingDescription' | translate }}</p>
      <a [routerLink]="'/catalog' | langRoute">{{ 'productDetails.backToCatalog' | translate }}</a>
    </section>
  }

  @if (product(); as currentProduct) {
    @if (!loading() && !error()) {
      <section class="product-details-layout">
        <app-product-gallery
          [product]="currentProduct"
          [selectedIndex]="selectedPhotoIndex()"
          (selectedIndexChange)="selectedPhotoIndex.set($event)"
        />

        <div class="product-details-main">
          <app-product-information
            [product]="currentProduct"
            [title]="productTitle(currentProduct)"
            [price]="effectivePrice()"
            [discountedPrice]="discountedPrice()"
            [currency]="effectiveCurrency()"
            [remaining]="effectiveRemaining()"
            [stockStatus]="stockStatus()"
            [showAddToCart]="false"
            (addToCart)="addToCart()"
          />

          <app-product-actions
            [config]="actionsConfig()"
            [outOfStock]="stockStatus() === 'out'"
            [inWishlist]="isInWishlist()"
            [inCompare]="isInCompare()"
            (addToCart)="addToCart()"
            (buyNow)="buyNow()"
            (wishlist)="toggleWishlist()"
            (compare)="toggleCompare()"
            (share)="shareProduct()"
            (notifyMe)="notifyMe()" />

          <app-product-variant-selector
            [optionGroups]="variantOptionGroups()"
            [selectedOptions]="selectedOptions()"
            [colours]="availableColours()"
            [sizes]="availableSizes()"
            [selectedColour]="selectedColour()"
            [selectedSize]="selectedSize()"
            [fallbackColour]="currentProduct.colour ?? null"
            [fallbackSize]="currentProduct.size ?? null"
            (optionSelected)="selectVariantOption($event)"
            (colourSelected)="selectColour($event)"
            (sizeSelected)="selectSize($event)"
          />

          <app-product-delivery-information [product]="currentProduct" [currency]="effectiveCurrency()" />
        </div>
      </section>

      @if (tabsEnabled()) {
        <section class="product-engagement">
          <app-product-tabs
            [tabs]="tabs()"
            [activeKey]="activeTab()"
            (activeKeyChange)="activeTab.set($event)" />

          <div class="product-tab-content">
            @switch (activeTab()) {
              @case ('description') {
                <app-product-description [product]="currentProduct" [simpleDescription]="productDescription(currentProduct)" />
              }

              @case ('specifications') {
                <app-product-specifications [product]="currentProduct" />
              }

              @case ('reviews') {
                <app-review-list
                  [result]="reviewsResult()"
                  [ratingSummary]="ratingSummary()"
                  [loading]="reviewsLoading() || ratingLoading()"
                  [submitting]="reviewSubmitting()"
                  [showSummary]="productPageConfigState().reviews.showSummary !== false"
                  [mode]="reviewsMode()"
                  (pageChange)="loadReviews($event)"
                  (loadMore)="loadReviews($event, true)"
                  (submitReview)="submitReview($event)" />
              }

              @case ('questions') {
                <app-question-list
                  [result]="questionsResult()"
                  [loading]="questionsLoading()"
                  [submitting]="questionSubmitting()"
                  [allowSubmission]="productPageConfigState().questions.allowSubmission !== false"
                  (pageChange)="loadQuestions($event)"
                  (submitQuestion)="submitQuestion($event)" />
              }

              @case ('delivery') {
                <app-product-delivery-information [product]="currentProduct" [currency]="effectiveCurrency()" />
              }

              @case ('warranty') {
                <app-product-warranty />
              }
            }
          </div>
        </section>
      } @else {
        <section class="product-engagement product-engagement-stacked">
          @if (isSectionEnabled('description')) {
            <app-product-description [product]="currentProduct" [simpleDescription]="productDescription(currentProduct)" />
          }

          @if (isSectionEnabled('specifications')) {
            <app-product-specifications [product]="currentProduct" />
          }

          @if (isSectionEnabled('reviews')) {
            <app-review-list
              [result]="reviewsResult()"
              [ratingSummary]="ratingSummary()"
              [loading]="reviewsLoading() || ratingLoading()"
              [submitting]="reviewSubmitting()"
              [showSummary]="productPageConfigState().reviews.showSummary !== false"
              [mode]="reviewsMode()"
              (pageChange)="loadReviews($event)"
              (loadMore)="loadReviews($event, true)"
              (submitReview)="submitReview($event)" />
          }

          @if (isSectionEnabled('questions')) {
            <app-question-list
              [result]="questionsResult()"
              [loading]="questionsLoading()"
              [submitting]="questionSubmitting()"
              [allowSubmission]="productPageConfigState().questions.allowSubmission !== false"
              (pageChange)="loadQuestions($event)"
              (submitQuestion)="submitQuestion($event)" />
          }

          @if (isSectionEnabled('delivery')) {
            <app-product-delivery-information [product]="currentProduct" [currency]="effectiveCurrency()" />
          }

          @if (isSectionEnabled('warranty')) {
            <app-product-warranty />
          }
        </section>
      }

      @if (productPageConfigState().relatedProducts.enabled !== false) {
        <app-related-products
          [products]="relatedProducts()"
          [collections]="relatedCollections()"
          (productSelected)="selectRelatedProduct($event)"
          (addToCart)="addRelatedToCart($event)"
        />
      }
    }
  }
</main>
