<app-card>
  <h3 class="title">{{ "CALC.RESULT" | translate }}</h3>

  <app-price-breakdown
    [rows]="priceBreakdownRows()"
    [total]="costBreakdown().total"
    [currency]="result().currency"
    [totalSuffix]="'*'"
    [totalLabelKey]="'CHECKOUT.TOTAL'"
  ></app-price-breakdown>

  <div class="result-grid">
    <app-summary-card [label]="'CALC.TIME' | translate">
      {{ totals().hours }}h {{ totals().minutes }}m
    </app-summary-card>

    <app-summary-card [label]="'CALC.MATERIAL' | translate">
      {{ totals().weight }}g
    </app-summary-card>
  </div>

  <div class="setup-note">
    <small class="shipping-note" style="color: #666">{{
      "CALC.SHIPPING_NOTE" | translate
    }}</small>
  </div>

  @if (result().notes) {
    <div class="notes-section">
      <label>{{ "CALC.NOTES" | translate }}:</label>
      <p>{{ result().notes }}</p>
    </div>
  }
  @if (recalculationRequired()) {
    <div class="recalc-banner">
      Hai modificato i parametri di stampa. Ricalcola il preventivo prima di
      procedere con l'ordine.
    </div>
  }

  <div class="divider"></div>

  <!-- Detailed Items List (NOW ON BOTTOM) -->
  <div class="items-list">
    @for (item of items(); track item.fileName; let i = $index) {
      <div class="item-row">
        <div class="item-info">
          <span class="file-name">{{ item.fileName }}</span>
          <span class="file-details">
            {{ item.unitTime / 3600 | number: "1.1-1" }}h |
            {{ item.unitWeight | number: "1.0-0" }}g |
            {{ item.material || "N/D" }}
            @if (getItemDifferenceLabel(item.fileName, item.material)) {
              |
              <small class="item-settings-diff">
                {{ getItemDifferenceLabel(item.fileName, item.material) }}
              </small>
            }
          </span>
        </div>

        <div class="item-controls">
          <div class="qty-control">
            <label>{{ "CHECKOUT.QTY" | translate }}:</label>
            <input
              type="number"
              min="1"
              [max]="maxInputQuantity"
              [ngModel]="item.quantity"
              (ngModelChange)="updateQuantity(i, $event)"
              (blur)="flushQuantityUpdate(i)"
              (keydown.enter)="flushQuantityUpdate(i)"
              class="qty-input"
            />
          </div>
          <div class="item-price">
            <span class="item-total-price">
              {{ item.unitPrice * item.quantity | currency: result().currency }}
            </span>
            <small
              class="item-unit-price"
              *ngIf="item.quantity > 1; else unitPricePlaceholder"
            >
              {{ item.unitPrice | currency: result().currency }}
              {{ "CHECKOUT.PER_PIECE" | translate }}
            </small>
            <ng-template #unitPricePlaceholder>
              <small class="item-unit-price item-unit-price--placeholder"
                >&nbsp;</small
              >
            </ng-template>
          </div>
        </div>
      </div>
    }
  </div>

  <div class="actions">
    <div class="actions-left">
      <app-button variant="secondary" (click)="consult.emit()">
        {{ "QUOTE.CONSULT" | translate }}
      </app-button>
    </div>

    <div class="actions-right">
      @if (!hasQuantityOverLimit()) {
        <app-button
          [disabled]="recalculationRequired()"
          (click)="proceed.emit()"
        >
          {{ "QUOTE.PROCEED_ORDER" | translate }}
        </app-button>
      } @else {
        <small class="limit-note">{{
          "QUOTE.MAX_QTY_NOTICE" | translate: { max: directOrderLimit }
        }}</small>
      }
      @if (recalculationRequired()) {
        <small class="limit-note">
          Ricalcola il preventivo per riattivare il checkout.
        </small>
      }
    </div>
  </div>
</app-card>
