<section class="product-page">
  <div class="container wrapper">
    <a [routerLink]="productLinkRoot()" class="back-link">
      ← {{ "SHOP.BACK" | translate }}
    </a>

    @if (loading()) {
      <div class="detail-grid skeleton-grid">
        <div class="skeleton-block"></div>
        <div class="skeleton-block"></div>
      </div>
    } @else {
      @if (error()) {
        <div class="state-card">{{ error() | translate }}</div>
      } @else {
        @if (product(); as p) {
          <nav class="breadcrumbs">
            <a routerLink="/shop">{{ "SHOP.BREADCRUMB_ROOT" | translate }}</a>
            @for (crumb of p.breadcrumbs; track crumb.id) {
              <span>/</span>
              <a [routerLink]="['/shop', crumb.slug]">{{ crumb.name }}</a>
            }
          </nav>

          <div class="detail-grid">
            <section class="visual-column">
              <div class="hero-media">
                @if (imageUrl(selectedImage()); as imageUrl) {
                  <img
                    [src]="imageUrl"
                    [alt]="selectedImage().altText || p.name"
                    class="hero-image"
                  />
                } @else {
                  <div class="image-fallback">
                    <span>{{ p.category.name }}</span>
                  </div>
                }
              </div>

              @if (galleryImages().length > 1) {
                <div class="thumb-grid">
                  @for (image of galleryImages(); track image.mediaAssetId) {
                    <button
                      type="button"
                      class="thumb"
                      [class.active]="
                        selectedImage().mediaAssetId === image.mediaAssetId
                      "
                      (click)="selectImage(image.mediaAssetId)"
                    >
                      @if (imageUrl(image); as imageUrl) {
                        <img [src]="imageUrl" [alt]="image.altText || p.name" />
                      } @else {
                        <span>{{ p.name }}</span>
                      }
                    </button>
                  }
                </div>
              }

              @if (p.model3d) {
                <app-card class="viewer-card">
                  <div class="viewer-head">
                    <div>
                      <p class="viewer-kicker">
                        {{ "SHOP.MODEL_3D" | translate }}
                      </p>
                      <h3>{{ "SHOP.MODEL_TITLE" | translate }}</h3>
                    </div>
                    <div class="dimensions">
                      <span>
                        X
                        {{ p.model3d.boundingBoxXMm || 0 | number: "1.0-1" }} mm
                      </span>
                      <span>
                        Y
                        {{ p.model3d.boundingBoxYMm || 0 | number: "1.0-1" }} mm
                      </span>
                      <span>
                        Z
                        {{ p.model3d.boundingBoxZMm || 0 | number: "1.0-1" }} mm
                      </span>
                    </div>
                  </div>

                  @if (modelLoading()) {
                    <div class="viewer-state">
                      {{ "SHOP.MODEL_LOADING" | translate }}
                    </div>
                  } @else if (modelError()) {
                    <div class="viewer-state viewer-state-error">
                      {{ "SHOP.MODEL_UNAVAILABLE" | translate }}
                    </div>
                  } @else {
                    @if (modelFile(); as modelPreviewFile) {
                      <app-stl-viewer
                        [file]="modelPreviewFile"
                        [height]="360"
                        [color]="selectedVariant()?.colorHex || '#facf0a'"
                      ></app-stl-viewer>
                    }
                  }
                </app-card>
              }
            </section>

            <section class="info-column">
              <div class="title-block">
                <div class="title-meta">
                  <span class="category">{{ p.category.name }}</span>
                </div>
                <h1>{{ p.name }}</h1>
                <p class="excerpt">
                  {{
                    p.excerpt ||
                      p.description ||
                      ("SHOP.EXCERPT_FALLBACK" | translate)
                  }}
                </p>
              </div>

              <app-card>
                <div class="purchase-card">
                  <div class="price-row">
                    <div>
                      <p class="panel-kicker">
                        {{ "SHOP.SELECT_COLOR" | translate }}
                      </p>
                      <h3>{{ priceLabel() | currency: "CHF" }}</h3>
                    </div>
                    @if (selectedVariantCartQuantity() > 0) {
                      <span class="cart-pill">
                        {{
                          "SHOP.IN_CART_LONG"
                            | translate
                              : { count: selectedVariantCartQuantity() }
                        }}
                      </span>
                    }
                  </div>

                  <div class="variant-grid">
                    @for (variant of p.variants; track variant.id) {
                      <button
                        type="button"
                        class="variant-option"
                        [class.active]="selectedVariant()?.id === variant.id"
                        (click)="selectVariant(variant)"
                      >
                        <span
                          class="variant-swatch"
                          [style.background-color]="colorHex(variant)"
                        ></span>
                        <span class="variant-copy">
                          <strong>{{ colorLabel(variant) }}</strong>
                          @if (variant.variantLabel) {
                            <small>{{ variant.variantLabel }}</small>
                          }
                        </span>
                        <strong>{{
                          variant.priceChf | currency: "CHF"
                        }}</strong>
                      </button>
                    }
                  </div>

                  <div class="quantity-row">
                    <span>{{ "SHOP.QUANTITY" | translate }}</span>
                    <div class="qty-control">
                      <button type="button" (click)="decreaseQuantity()">
                        -
                      </button>
                      <span>{{ quantity() }}</span>
                      <button type="button" (click)="increaseQuantity()">
                        +
                      </button>
                    </div>
                  </div>

                  <div class="actions">
                    <app-button
                      variant="primary"
                      [disabled]="isAddingToCart()"
                      (click)="addToCart()"
                    >
                      {{
                        (isAddingToCart() ? "SHOP.ADDING" : "SHOP.ADD_CART")
                          | translate
                      }}
                    </app-button>

                    @if (shopService.cartItemCount() > 0) {
                      <app-button variant="outline" (click)="goToCheckout()">
                        {{ "SHOP.GO_TO_CHECKOUT" | translate }}
                      </app-button>
                    }
                  </div>

                  @if (addSuccess()) {
                    <p class="success-note">
                      {{ "SHOP.ADD_SUCCESS" | translate }}
                    </p>
                  }
                </div>
              </app-card>

              @if (p.description) {
                <div class="description-block">
                  <h2>{{ "SHOP.DESCRIPTION_TITLE" | translate }}</h2>
                  <p>{{ p.description }}</p>
                </div>
              }
            </section>
          </div>
        }
      }
    }
  </div>
</section>
