@if (cashierMode()) {
  <!-- ===== CASHIER MODE HEADER ===== -->
  <div class="pos-header cashier">
    <!-- Logo + title -->
    <div class="cashier-brand">
      <i class="pi pi-shopping-cart cashier-logo-icon"></i>
      <h2>{{ 'POS.QUICK_SALE' | translate }}</h2>
    </div>

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

    <!-- Branch + Cashier info -->
    @if (session()) {
      <div class="cashier-branch">
        <i class="pi pi-building"></i>
        <span>{{ session()!.branch?.name }} - {{ session()!.terminal?.name }}</span>
      </div>
    }

    <!-- Barcode input (no dropdown, Enter = add product) -->
    <div class="cashier-barcode-field">
      <i class="pi pi-barcode"></i>
      <input
        #barcodeInput
        class="barcode-input"
        [placeholder]="'POS.SCAN_BARCODE' | translate"
        [value]="barcodeValue()"
        (input)="onBarcodeInput($event)"
        (keydown.enter)="onBarcodeScan($event)"
        autocomplete="off"
      />
      @if (barcodeValue()) {
        <button class="barcode-clear" (click)="clearBarcode()">
          <i class="pi pi-times"></i>
        </button>
      }
    </div>

    <!-- Search button (opens search overlay) -->
    <button class="cashier-search-btn" [class.active]="showSearchOverlay()" (click)="toggleSearchOverlay()">
      <i class="pi pi-search"></i>
      <span>{{ 'POS.SEARCH' | translate }}</span>
    </button>

    <!-- Sync badge (pending transactions) -->
    @if (pendingCount() > 0) {
      <button
        class="cashier-sync-badge"
        [class.syncing]="isSyncing()"
        (click)="syncRequested.emit()"
        [title]="'POS.SYNC_NOW' | translate"
      >
        <i class="pi" [class.pi-sync]="!isSyncing()" [class.pi-spin]="isSyncing()" [class.pi-spinner]="isSyncing()"></i>
        <span class="sync-count">{{ pendingCount() }}</span>
        <span class="sync-label">{{ 'POS.PENDING' | translate }}</span>
      </button>
    }

    <!-- Connection status dot -->
    <div class="cashier-conn-dot" [class]="connectionStatus()">
      <span class="dot"></span>
    </div>

    <!-- Right actions -->
    <div class="cashier-actions">
      <!-- On-screen keyboard toggle -->
      @if (keyboardEnabled()) {
        <button
          class="cashier-icon-btn"
          [class.active]="keyboardVisible()"
          (click)="keyboardToggled.emit()"
          [title]="'POS.TOGGLE_KEYBOARD' | translate"
        >
          <i class="pi pi-calculator"></i>
        </button>
      }

      <!-- Keyboard setting (enable/disable) -->
      <button
        class="cashier-icon-btn"
        [class.setting-on]="keyboardEnabled()"
        (click)="keyboardSettingToggled.emit()"
        [title]="'POS.KEYBOARD_SETTING' | translate"
      >
        <i class="pi pi-th-large"></i>
      </button>

      <!-- Language toggle -->
      <button class="cashier-icon-btn lang-btn" (click)="langService.toggleLang()">
        {{ langService.currentLang() === 'ar' ? 'EN' : 'عربي' }}
      </button>

      <!-- Layout toggle -->
      <button class="cashier-icon-btn" (click)="layoutToggled.emit()" [title]="'POS.SWITCH_LAYOUT' | translate">
        <i class="pi pi-sync"></i>
      </button>

      <!-- Exit -->
      <button class="cashier-icon-btn" (click)="exitRequested.emit()" [title]="'POS.EXIT' | translate">
        <i class="pi pi-sign-out"></i>
      </button>

      <!-- User -->
      @if (session()) {
        <div class="cashier-user">
          <div class="cashier-user-info">
            <span class="cashier-user-name">{{ session()!.user?.name }}</span>
            <span class="cashier-user-role">{{ 'POS.CASHIER' | translate }}</span>
          </div>
          <div class="cashier-avatar">
            <i class="pi pi-user"></i>
          </div>
        </div>
      }
    </div>
  </div>

  <!-- Search overlay (opens below header) -->
  @if (showSearchOverlay()) {
    <div class="search-overlay-backdrop" (click)="closeSearchOverlay()"></div>
    <div class="search-overlay">
      <div class="search-overlay-header">
        <i class="pi pi-search"></i>
        <input
          #searchOverlayInput
          class="search-overlay-input"
          [placeholder]="'POS.SEARCH_PRODUCT' | translate"
          [value]="searchQuery()"
          (input)="onSearch($event)"
          (keydown.enter)="onSearchEnter($event)"
          (keydown.escape)="closeSearchOverlay()"
          autocomplete="off"
        />
        <button class="search-overlay-close" (click)="closeSearchOverlay()">
          <i class="pi pi-times"></i>
          <span>ESC</span>
        </button>
      </div>
      @if (searchResults().length) {
        <div class="search-overlay-results">
          @for (product of searchResults(); track product.id) {
            <div
              class="search-result-item"
              [class.highlighted]="highlightedIndex() === $index"
              (click)="selectProduct(product)"
              (mouseenter)="highlightedIndex.set($index)"
            >
              <div class="result-info">
                <span class="result-name">{{ product.name }}</span>
                @if (product.barcode) {
                  <span class="result-barcode">{{ product.barcode }}</span>
                }
              </div>
              <span class="result-price">{{ product.sale_price | number:'1.2-2' }}</span>
            </div>
          }
        </div>
      } @else if (searchQuery().length >= 2) {
        <div class="search-overlay-empty">
          <i class="pi pi-inbox"></i>
          <span>{{ 'POS.NO_RESULTS' | translate }}</span>
        </div>
      }
    </div>
  }
} @else {
  <!-- ===== DEFAULT HEADER ===== -->
  <div class="pos-header">
    <!-- Search / barcode input -->
    <div class="header-search" (clickOutside)="onClickOutside()">
      <span class="p-input-icon-left w-full">
        <i class="pi pi-search"></i>
        <input
          #searchInput
          pInputText
          class="search-input"
          [placeholder]="'POS.SEARCH_PRODUCT' | translate"
          [value]="searchQuery()"
          (input)="onSearch($event)"
          (keydown.enter)="onBarcodeEnter($event)"
        />
      </span>
      <!-- Dropdown results -->
      @if (showResults() && searchResults().length) {
        <div class="search-dropdown">
          @for (product of searchResults(); track product.id) {
            <div class="search-item" (click)="selectProduct(product)">
              <div class="item-info">
                <span class="item-name">{{ product.name }}</span>
                @if (product.barcode) {
                  <span class="item-barcode">{{ product.barcode }}</span>
                }
              </div>
              <span class="item-price">{{ product.sale_price }}</span>
            </div>
          }
        </div>
      }
    </div>

    <!-- Session info -->
    <div class="header-info">
      @if (session()) {
        <span class="session-badge">
          <i class="pi pi-hashtag"></i> {{ session()!.id }}
        </span>
        <span class="user-badge">
          <i class="pi pi-user"></i> {{ session()!.user.name }}
        </span>
      }
      <!-- Connection status -->
      <span class="status-badge" [ngClass]="connectionStatus()">
        <span class="status-dot-inner"></span>
        @if (connectionStatus() === 'online') {
          <span class="status-text">{{ 'POS.ONLINE' | translate }}</span>
        } @else if (connectionStatus() === 'offline') {
          <span class="status-text">{{ 'POS.OFFLINE' | translate }}</span>
        } @else {
          <span class="status-text">{{ 'POS.SYNCING' | translate }} ({{ pendingCount() }})</span>
        }
      </span>
    </div>

    <!-- Language toggle -->
    <button class="lang-toggle-btn" (click)="langService.toggleLang()">
      {{ langService.currentLang() === 'ar' ? 'EN' : 'عربي' }}
    </button>

    <!-- Layout toggle -->
    <button class="layout-toggle-btn" (click)="layoutToggled.emit()" [title]="'POS.SWITCH_LAYOUT' | translate">
      <i class="pi pi-sync"></i>
      <span>{{ 'POS.LAYOUT_' + posLayout().toUpperCase() | translate }}</span>
    </button>

    <!-- Exit button -->
    <button class="exit-btn" (click)="exitRequested.emit()" [title]="'POS.EXIT' | translate">
      <i class="pi pi-times"></i>
    </button>
  </div>
}
