<div class="invoice-container">
  <!-- Header bar -->
  <div class="invoice-header">
    <div class="invoice-title">
      <i class="pi pi-file-edit"></i>
      <h3>{{ 'POS.CURRENT_INVOICE' | translate }} #{{ invoiceNumber() }}</h3>
    </div>
    <div class="invoice-actions">
      <!-- Customer selector (touch-friendly) -->
      <button class="customer-btn" (click)="openCustomerSearch()">
        <i class="pi pi-user"></i>
        <span>{{ selectedCustomer()?.name || ('POS.WALK_IN' | translate) }}</span>
        <i class="pi pi-chevron-down"></i>
      </button>
      @if (selectedCustomer()?.id !== WALK_IN_ID) {
        <button class="walkin-reset-btn" (click)="resetToWalkIn()">
          <i class="pi pi-times"></i>
        </button>
      }
      <button class="hold-btn" (click)="holdOrder.emit()" [disabled]="cartService.isEmpty()">
        {{ 'POS.HOLD' | translate }} (F4)
      </button>
      <button class="cancel-btn" (click)="cartService.clear()" [disabled]="cartService.isEmpty()">
        {{ 'POS.CANCEL_ALL' | translate }}
      </button>
    </div>
  </div>

  <!-- Table -->
  <div class="invoice-body">
    <table class="invoice-table">
      <thead>
        <tr>
          <th class="col-name">{{ 'POS.PRODUCT_NAME' | translate }}</th>
          <th class="col-qty">{{ 'POS.QTY' | translate }}</th>
          <th class="col-price">{{ 'POS.UNIT_PRICE' | translate }}</th>
          <th class="col-discount">{{ 'POS.DISCOUNT' | translate }}</th>
          <th class="col-tax">{{ 'POS.TAX' | translate }}</th>
          <th class="col-total">{{ 'POS.LINE_TOTAL' | translate }}</th>
          <th class="col-actions"></th>
        </tr>
      </thead>
      <tbody>
        @for (item of cartService.items(); track $index) {
          <tr
            [class.selected]="cartService.selectedItemIndex() === $index"
            (click)="cartService.selectItem($index)"
          >
            <td class="col-name">
              <div class="product-info">
                <span class="product-name">{{ item.name }}</span>
                @if (item.barcode) {
                  <span class="product-barcode">{{ item.barcode }}</span>
                }
              </div>
            </td>
            <td class="col-qty">
              <div class="qty-control">
                <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>
            </td>
            <td class="col-price">{{ item.unit_price | number:'1.2-2' }}</td>
            <td class="col-discount">
              @if (item.discount_percent > 0) {
                <span class="badge-discount">{{ item.discount_percent }}%</span>
              } @else {
                <span class="badge-none">-</span>
              }
            </td>
            <td class="col-tax">
              @if (item.tax_rate > 0) {
                <span class="badge-tax">{{ item.tax_rate }}%</span>
              } @else {
                <span class="badge-none">-</span>
              }
            </td>
            <td class="col-total">{{ item.line_total | number:'1.2-2' }}</td>
            <td class="col-actions">
              <button
                class="delete-btn"
                (click)="cartService.removeItem($index); $event.stopPropagation()"
              >
                <i class="pi pi-trash"></i>
              </button>
            </td>
          </tr>
        } @empty {
          <tr class="empty-row">
            <td colspan="7">
              <div class="empty-state">
                <i class="pi pi-shopping-cart"></i>
                <p>{{ 'POS.CART_EMPTY' | translate }}</p>
                <span class="empty-hint">{{ 'POS.SCAN_OR_SEARCH' | translate }}</span>
              </div>
            </td>
          </tr>
        }
      </tbody>
    </table>
  </div>

  <!-- Edit Bar (appears when a row is selected) -->
  @if (selectedItem()) {
    <div class="edit-bar">
      <div class="edit-bar-header">
        <span class="edit-bar-name">{{ selectedItem()!.name }}</span>
        <button class="edit-bar-close" (click)="cartService.selectedItemIndex.set(null)">
          <i class="pi pi-times"></i>
        </button>
      </div>
      <div class="edit-bar-fields">
        <!-- Qty -->
        <div class="edit-field">
          <label>{{ 'POS.QTY' | translate }}</label>
          <div class="edit-field-control">
            <button class="edit-btn minus" (click)="onDecrement(cartService.selectedItemIndex()!)">
              <i class="pi pi-minus"></i>
            </button>
            <input
              type="number"
              class="edit-input"
              [value]="selectedItem()!.qty"
              (change)="onQtyInput($event)"
              min="1"
              inputmode="none"
            />
            <button class="edit-btn plus" (click)="onIncrement(cartService.selectedItemIndex()!)">
              <i class="pi pi-plus"></i>
            </button>
          </div>
        </div>

        <!-- Price -->
        <div class="edit-field">
          <label>{{ 'POS.UNIT_PRICE' | translate }}</label>
          <input
            type="number"
            class="edit-input"
            [value]="selectedItem()!.unit_price"
            (change)="onPriceChange(cartService.selectedItemIndex()!, $event)"
            min="0"
            step="0.01"
            inputmode="none"
          />
        </div>

        <!-- Discount % -->
        <div class="edit-field">
          <label>{{ 'POS.DISCOUNT' | translate }} %</label>
          <input
            type="number"
            class="edit-input"
            [value]="selectedItem()!.discount_percent"
            (change)="onDiscountChange(cartService.selectedItemIndex()!, $event)"
            min="0"
            max="100"
            inputmode="none"
          />
        </div>

        <!-- Tax % -->
        <div class="edit-field">
          <label>{{ 'POS.TAX' | translate }} %</label>
          <input
            type="number"
            class="edit-input"
            [value]="selectedItem()!.tax_rate"
            (change)="onTaxChange(cartService.selectedItemIndex()!, $event)"
            min="0"
            max="100"
            inputmode="none"
          />
        </div>

        <!-- Delete -->
        <div class="edit-field edit-field-delete">
          <button class="edit-delete-btn" (click)="cartService.removeItem(cartService.selectedItemIndex()!)">
            <i class="pi pi-trash"></i>
            {{ 'POS.DELETE' | translate }}
          </button>
        </div>
      </div>
    </div>
  }

  <!-- Summary Footer -->
  <div class="invoice-summary">
    <div class="summary-item">
      <span class="summary-label">{{ 'POS.SUBTOTAL' | translate }}</span>
      <span class="summary-value">{{ cartService.subtotal() | number:'1.2-2' }} {{ currencySymbol() }}</span>
    </div>
    <div class="summary-item">
      <span class="summary-label">{{ 'POS.TAX' | translate }}</span>
      <span class="summary-value">{{ cartService.taxAmount() | number:'1.2-2' }} {{ currencySymbol() }}</span>
    </div>
    <div class="summary-item">
      <span class="summary-label">{{ 'POS.DISCOUNT' | translate }}</span>
      <span class="summary-value discount">-{{ cartService.totalDiscount() | number:'1.2-2' }} {{ currencySymbol() }}</span>
    </div>
    <div class="summary-item grand-total">
      <span class="summary-label">{{ 'POS.GRAND_TOTAL' | translate }}</span>
      <span class="summary-value">{{ cartService.total() | number:'1.2-2' }} {{ currencySymbol() }}</span>
    </div>
  </div>
</div>

<!-- Customer Search Overlay -->
@if (showCustomerSearch()) {
  <div class="cust-overlay-backdrop" (click)="closeCustomerSearch(false)"></div>
  <div class="cust-overlay">
    <div class="cust-overlay-header">
      <i class="pi pi-users"></i>
      <input
        class="cust-search-input"
        [placeholder]="'POS.SEARCH_CUSTOMER' | translate"
        [value]="customerQuery()"
        (input)="onCustomerSearchInput($event)"
        (keydown.escape)="closeCustomerSearch()"
        autocomplete="off"
      />
      <button class="cust-overlay-close" (click)="closeCustomerSearch()">
        <i class="pi pi-times"></i>
      </button>
    </div>

    @if (!showNewCustomerForm()) {
      <!-- Walk-in option -->
      <div class="cust-walkin" (click)="resetToWalkIn()">
        <i class="pi pi-user"></i>
        <span>{{ 'POS.WALK_IN' | translate }}</span>
        @if (selectedCustomer()?.id === WALK_IN_ID) {
          <i class="pi pi-check cust-check"></i>
        }
      </div>

      <!-- Results -->
      @if (customerSearching()) {
        <div class="cust-loading">
          <i class="pi pi-spin pi-spinner"></i>
        </div>
      } @else if (customerResults().length > 0) {
        <div class="cust-results">
          @for (c of customerResults(); track c.id) {
            <div class="cust-result-item" [class.active]="selectedCustomer()?.id === c.id" (click)="selectCustomer(c)">
              <div class="cust-result-info">
                <span class="cust-result-name">{{ c.name }}</span>
                @if (c.phone) {
                  <span class="cust-result-phone">{{ c.phone }}</span>
                }
              </div>
              @if (selectedCustomer()?.id === c.id) {
                <i class="pi pi-check cust-check"></i>
              }
            </div>
          }
        </div>
      } @else if (customerQuery().length >= 2) {
        <div class="cust-empty">
          <i class="pi pi-inbox"></i>
          <span>{{ 'POS.NO_RESULTS' | translate }}</span>
        </div>
      }

      <!-- Add new customer button -->
      <div class="cust-add-new" (click)="openNewCustomerForm()">
        <i class="pi pi-plus-circle"></i>
        <span>{{ 'POS.ADD_NEW_CUSTOMER' | translate }}</span>
      </div>
    } @else {
      <!-- New customer form -->
      <div class="cust-new-form">
        <div class="cust-form-field">
          <label>{{ 'POS.CUSTOMER_NAME' | translate }} *</label>
          <input
            class="cust-form-input"
            [value]="newCustomerName()"
            (input)="newCustomerName.set($any($event.target).value)"
            [placeholder]="'POS.CUSTOMER_NAME' | translate"
          />
        </div>
        <div class="cust-form-field">
          <label>{{ 'POS.PHONE' | translate }}</label>
          <input
            class="cust-form-input"
            [value]="newCustomerPhone()"
            (input)="newCustomerPhone.set($any($event.target).value)"
            [placeholder]="'POS.PHONE' | translate"
            type="tel"
          />
        </div>
        <div class="cust-form-actions">
          <button class="cust-form-cancel" (click)="showNewCustomerForm.set(false)">
            {{ 'COMMON.CANCEL' | translate }}
          </button>
          <button class="cust-form-save" [disabled]="savingCustomer() || !newCustomerName().trim()" (click)="saveNewCustomer()">
            @if (savingCustomer()) {
              <i class="pi pi-spin pi-spinner"></i>
            } @else {
              <i class="pi pi-check"></i>
            }
            {{ 'COMMON.SAVE' | translate }}
          </button>
        </div>
      </div>
    }
  </div>
}
