@if (cashierMode()) {
  <!-- ===== CASHIER MODE NUMPAD (numbers only) ===== -->
  <div class="cashier-numpad" (mousedown)="$event.preventDefault()">
    <div class="cashier-numpad-label">
      <i class="pi pi-calculator"></i>
      <span>{{ 'POS.MANUAL_INPUT' | translate }}</span>
    </div>

    <!-- Mode tabs -->
    <div class="cashier-mode-tabs">
      <button [class.active]="mode() === 'qty'" (click)="setMode('qty')">{{ 'POS.QTY' | translate }}</button>
      <button [class.active]="mode() === 'price'" (click)="setMode('price')">{{ 'POS.PRICE' | translate }}</button>
      <button [class.active]="mode() === 'discount'" (click)="setMode('discount')">{{ 'POS.DISCOUNT' | translate }}</button>
      <button [class.active]="mode() === 'tax'" (click)="setMode('tax')">{{ 'POS.TAX' | translate }}</button>
    </div>

    <!-- Display -->
    <div class="cashier-display">{{ inputBuffer() || '0' }}</div>

    <!-- Numeric Pad -->
    <div class="cashier-num-grid">
      @for (key of ['7','8','9','4','5','6','1','2','3','0','.','⌫']; track key) {
        @if (key === '⌫') {
          <button class="cashier-num-key backspace" (click)="pressBackspace()">
            <i class="pi pi-delete-left"></i>
          </button>
        } @else {
          <button class="cashier-num-key" (click)="pressKey(key)">{{ key }}</button>
        }
      }
    </div>

    <!-- Action row -->
    <div class="cashier-numpad-actions">
      <button class="cashier-numpad-action minus" (click)="pressMinus()">
        <i class="pi pi-minus"></i>
      </button>
      <button class="cashier-numpad-action plus" (click)="pressPlus()">
        <i class="pi pi-plus"></i>
      </button>
      <button class="cashier-numpad-action enter" (click)="pressEnter()">
        <i class="pi pi-check"></i>
      </button>
    </div>
  </div>
} @else {
  <!-- ===== DEFAULT NUMPAD ===== -->
  <div class="numpad-container" [class.expanded]="expanded() || forceExpanded()" [class.force-expanded]="forceExpanded()" (mousedown)="$event.preventDefault()">
    <!-- Toggle bar — always visible -->
    <div class="numpad-toggle" (click)="expanded.set(!expanded())">
      <div class="toggle-left">
        <div class="mode-tabs">
          <button [class.active]="mode() === 'qty'" (click)="setMode('qty'); $event.stopPropagation()">{{ 'POS.QTY' | translate }}</button>
          <button [class.active]="mode() === 'price'" (click)="setMode('price'); $event.stopPropagation()">{{ 'POS.PRICE' | translate }}</button>
          <button [class.active]="mode() === 'discount'" (click)="setMode('discount'); $event.stopPropagation()">%</button>
          <button [class.active]="mode() === 'tax'" (click)="setMode('tax'); $event.stopPropagation()">{{ 'POS.TAX' | translate }}</button>
        </div>
      </div>
      <div class="toggle-display" (click)="$event.stopPropagation()">
        {{ inputBuffer() || '0' }}
      </div>
      <div class="toggle-actions">
        <button class="mini-btn accent" (click)="pressMinus(); $event.stopPropagation()">&minus;</button>
        <button class="mini-btn accent" (click)="pressPlus(); $event.stopPropagation()">+</button>
        <button class="mini-btn enter" (click)="pressEnter(); $event.stopPropagation()"><i class="pi pi-check"></i></button>
        @if (!forceExpanded()) {
          <button class="mini-btn toggle-chevron" (click)="expanded.set(!expanded())">
            <i class="pi" [class.pi-chevron-up]="!expanded()" [class.pi-chevron-down]="expanded()"></i>
          </button>
        }
      </div>
    </div>

    <!-- Numpad keys (always visible if forceExpanded) -->
    @if (expanded() || forceExpanded()) {
      <div class="numpad-keys" [class.classic-grid]="forceExpanded()">
        @if (forceExpanded()) {
          <!-- Classic Odoo-style: 4 columns with mode buttons -->
          @for (key of ['1','2','3','Qty','4','5','6','% Disc','7','8','9','Price','+/-','0','.','⌫']; track key) {
            @if (key === '⌫') {
              <button class="num-key" (click)="pressBackspace()"><i class="pi pi-delete-left"></i></button>
            } @else if (key === 'Qty') {
              <button class="num-key mode-key" [class.active]="mode() === 'qty'" (click)="setMode('qty')">{{ 'POS.QTY' | translate }}</button>
            } @else if (key === '% Disc') {
              <button class="num-key mode-key" [class.active]="mode() === 'discount'" (click)="setMode('discount')">% {{ 'POS.DISCOUNT' | translate }}</button>
            } @else if (key === 'Price') {
              <button class="num-key mode-key" [class.active]="mode() === 'price'" (click)="setMode('price')">{{ 'POS.PRICE' | translate }}</button>
            } @else if (key === '+/-') {
              <button class="num-key" (click)="pressMinus()">&plusmn;</button>
            } @else {
              <button class="num-key" (click)="pressKey(key)">{{ key }}</button>
            }
          }
        } @else {
          <!-- Modern: 3 columns -->
          @for (key of ['7','8','9','4','5','6','1','2','3','.','0','⌫']; track key) {
            @if (key === '⌫') {
              <button class="num-key" (click)="pressBackspace()"><i class="pi pi-delete-left"></i></button>
            } @else {
              <button class="num-key" (click)="pressKey(key)">{{ key }}</button>
            }
          }
        }
      </div>
    }
  </div>
}
