@if (retailMode()) {
  <!-- ===== RETAIL MODE ===== -->
  <div class="retail-cart">
    <!-- Header -->
    <div class="retail-cart-header">
      <h2>{{ 'POS.CURRENT_ORDER' | translate }}</h2>
      <button class="retail-clear-btn" (click)="cartService.clear()" [disabled]="cartService.isEmpty()">
        <i class="pi pi-trash"></i>
      </button>
    </div>

    <!-- Cart Items -->
    <div class="retail-cart-items">
      @for (item of cartService.items(); track $index) {
        <div class="retail-item" [class.selected]="cartService.selectedItemIndex() === $index" (click)="cartService.selectItem($index)">
          <div class="retail-item-thumb">
            @if (item.product?.image) {
              <img [src]="item.product.image" [alt]="item.name" />
            } @else {
              <i class="pi pi-box"></i>
            }
          </div>
          <div class="retail-item-info">
            <p class="retail-item-name">{{ item.name }}</p>
            <p class="retail-item-price">{{ item.unit_price | number:'1.2-2' }} {{ currencySymbol() }} {{ 'POS.EACH' | translate }}</p>
          </div>
          <div class="retail-item-qty">
            <button class="qty-btn" (click)="onDecrement($index); $event.stopPropagation()">
              <i class="pi pi-minus"></i>
            </button>
            <span class="qty-value">{{ item.qty }}</span>
            <button class="qty-btn" (click)="onIncrement($index); $event.stopPropagation()">
              <i class="pi pi-plus"></i>
            </button>
          </div>
          <div class="retail-item-total">
            {{ item.line_total | number:'1.2-2' }} {{ currencySymbol() }}
          </div>
        </div>
      } @empty {
        <div class="retail-cart-empty">
          <i class="pi pi-shopping-cart"></i>
          <p>{{ 'POS.CART_EMPTY' | translate }}</p>
        </div>
      }
    </div>

    <!-- Summary -->
    <div class="retail-summary">
      <div class="retail-summary-row">
        <span>{{ 'POS.SUBTOTAL' | translate }}</span>
        <span class="retail-summary-val">{{ cartService.subtotal() | number:'1.2-2' }} {{ currencySymbol() }}</span>
      </div>
      @if (cartService.totalDiscount() > 0) {
        <div class="retail-summary-row discount">
          <span>{{ 'POS.DISCOUNT' | translate }}</span>
          <span class="retail-summary-val">-{{ cartService.totalDiscount() | number:'1.2-2' }} {{ currencySymbol() }}</span>
        </div>
      }
      @if (cartService.taxAmount() > 0) {
        <div class="retail-summary-row">
          <span>{{ 'POS.TAX' | translate }}</span>
          <span class="retail-summary-val">{{ cartService.taxAmount() | number:'1.2-2' }} {{ currencySymbol() }}</span>
        </div>
      }
      <div class="retail-total-row">
        <span>{{ 'POS.TOTAL' | translate }}</span>
        <span class="retail-total-val">{{ cartService.total() | number:'1.2-2' }} {{ currencySymbol() }}</span>
      </div>

      <!-- 2-column buttons: Cancel + Pay -->
      <div class="retail-btn-grid">
        <button class="retail-cancel-btn" (click)="cartService.clear()">
          <i class="pi pi-times"></i>
          {{ 'POS.CANCEL' | translate }}
        </button>
        <button class="retail-pay-btn" [disabled]="cartService.isEmpty()" (click)="paymentRequested.emit()">
          <i class="pi pi-wallet"></i>
          {{ 'POS.PAY_NOW' | translate }}
        </button>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="retail-quick-actions">
      <button (click)="showReturn.emit()">
        <i class="pi pi-replay"></i>
        {{ 'POS.RETURN' | translate }}
      </button>
      <button (click)="showCoupon.emit()">
        <i class="pi pi-percentage"></i>
        {{ 'POS.DISCOUNT' | translate }}
      </button>
      <button (click)="holdOrder.emit()" [disabled]="cartService.isEmpty()">
        <i class="pi pi-pause-circle"></i>
        {{ 'POS.HOLD' | translate }}
      </button>
      <button (click)="showHeldOrders.emit()">
        <i class="pi pi-list"></i>
        {{ 'POS.ORDERS' | translate }}
      </button>
      <button class="danger" (click)="closeSession.emit()">
        <i class="pi pi-power-off"></i>
        {{ 'POS.CLOSE' | translate }}
      </button>
    </div>
  </div>
} @else {
  <!-- ===== DEFAULT MODE (Modern/Classic) ===== -->
  <div class="cart-container">
    <!-- Customer selector -->
    <div class="customer-bar">
      <i class="pi pi-user"></i>
      <p-autoComplete
        [ngModel]="selectedCustomer()"
        (ngModelChange)="onCustomerChange($event)"
        [suggestions]="customerSuggestions()"
        (completeMethod)="searchCustomers($event)"
        optionLabel="name"
        [forceSelection]="true"
        [placeholder]="'POS.SEARCH_CUSTOMER' | translate"
        [style]="{width: '100%'}"
        [inputStyle]="{width: '100%', fontSize: '12px', padding: '4px 8px'}"
        [minLength]="2"
      />
      @if (selectedCustomer()?.id !== WALK_IN_ID) {
        <button class="walkin-btn" (click)="resetToWalkIn()" title="Walk-in">
          <i class="pi pi-times"></i>
        </button>
      }
    </div>

    <!-- Item count header -->
    @if (cartService.items().length > 0) {
      <div class="cart-count">
        <span>{{ cartService.items().length }} {{ 'POS.ITEMS' | translate }}</span>
      </div>
    }
    <div class="cart-items">
      @for (item of cartService.items(); track $index) {
        <div class="cart-item" [class.selected]="cartService.selectedItemIndex() === $index" (click)="cartService.selectItem($index)">
          <span class="item-index">{{ $index + 1 }}</span>
          <div class="item-info">
            <span class="item-name">{{ item.name }}</span>
            <span class="item-meta">{{ item.qty }} × {{ item.unit_price | number:'1.2-3' }} {{ currencySymbol() }}</span>
          </div>
          <div class="item-total">
            {{ item.line_total | number:'1.2-3' }} {{ currencySymbol() }}
          </div>
          <button class="item-remove" (click)="cartService.removeItem($index); $event.stopPropagation()">
            <i class="pi pi-times"></i>
          </button>
        </div>
      } @empty {
        <div class="cart-empty">
          <i class="pi pi-shopping-cart text-3xl"></i>
          <p>{{ 'POS.CART_EMPTY' | translate }}</p>
        </div>
      }
    </div>

    <!-- Totals -->
    <div class="cart-totals">
      <div class="total-row">
        <span>{{ 'POS.SUBTOTAL' | translate }}</span>
        <span>{{ cartService.subtotal() | number:'1.2-3' }} {{ currencySymbol() }}</span>
      </div>
      @if (cartService.totalDiscount() > 0) {
        <div class="total-row discount">
          <span>{{ 'POS.DISCOUNT' | translate }}</span>
          <span>-{{ cartService.totalDiscount() | number:'1.2-3' }} {{ currencySymbol() }}</span>
        </div>
      }
      @if (cartService.taxAmount() > 0) {
        <div class="total-row">
          <span>{{ 'POS.TAX' | translate }}</span>
          <span>{{ cartService.taxAmount() | number:'1.2-3' }} {{ currencySymbol() }}</span>
        </div>
      }
      <div class="total-row grand-total">
        <span>{{ 'POS.TOTAL' | translate }}</span>
        <span>{{ cartService.total() | number:'1.2-3' }} {{ currencySymbol() }}</span>
      </div>
    </div>

    <!-- Action buttons -->
    <div class="cart-actions">
      <button class="action-btn pay-btn" [disabled]="cartService.isEmpty()" (click)="paymentRequested.emit()">
        <i class="pi pi-wallet"></i>
        {{ 'POS.PAY' | translate }}
      </button>
      <div class="action-row">
        <button class="action-btn secondary" (click)="holdOrder.emit()" [disabled]="cartService.isEmpty()">
          <i class="pi pi-pause"></i>
        </button>
        <button class="action-btn secondary" (click)="showHeldOrders.emit()">
          <i class="pi pi-list"></i>
        </button>
        <button class="action-btn secondary" (click)="showCoupon.emit()">
          <i class="pi pi-tag"></i>
        </button>
        <button class="action-btn secondary" (click)="showReturn.emit()">
          <i class="pi pi-replay"></i>
        </button>
        <button class="action-btn secondary danger" (click)="closeSession.emit()">
          <i class="pi pi-power-off"></i>
        </button>
      </div>
    </div>
  </div>
}
