{{--
    The catalog grid header: product search + POS-style category chips,
    shared by the sales-order picker (sales-order-product-grid.blade.php) and
    the POS terminal (pos.blade.php — the terminal switches from its combobox
    header onto this partial in the Phase 3 refactor).

    Alpine contract on the consuming root (both screens provide it):
      search           — the query string
      mainCat          — selected main category name ('' = all)
      subCat           — selected sub category name ('' = all)
      mainCategories() — sorted unique main category names
      subCategories()  — sorted unique sub category names, scoped to mainCat

    Extra toolbar buttons (e.g. the order form's "Add custom item") go in the
    `actions` slot — the slot renders between the search input and the chips.
--}}
<div class="flex flex-col gap-3">
    <div class="flex flex-col gap-2 @sm:flex-row @sm:items-center">
        <div class="relative flex-1">
            <x-filament::icon icon="heroicon-m-magnifying-glass" class="pointer-events-none absolute inset-y-0 start-3 my-auto h-4 w-4 text-gray-400 dark:text-gray-500" />
            <input
                type="search"
                x-ref="scanInput"
                {{--
                    Debounced, not plain x-model: every keystroke re-filters
                    the ENTIRE catalog (visibleProducts()) and re-renders every
                    matching card, which is the "typing in the filter feels
                    slow" complaint on a catalog of any real size. 150ms is
                    short enough that it reads as instant once a search settles,
                    long enough to collapse a fast typist's keystrokes into one
                    filter pass instead of one per character.

                    keydown.enter reads $event.target.value directly rather
                    than the debounced `search` model — a fast scanner's Enter
                    can fire before the debounce has caught up, and reading the
                    model here would hand scanAdd() a stale (possibly empty)
                    string. The `typeof` guard means this partial stays safe to
                    include somewhere with no scanAdd() of its own.
                --}}
                x-model.debounce.150ms="search"
                x-on:keydown.enter="typeof scanAdd === 'function' && scanAdd($event.target.value)"
                placeholder="Search products by name, SKU or barcode — or scan…"
                class="fi-input w-full rounded-lg border-gray-300 ps-9 dark:bg-gray-800"
                {{-- This box already owns Enter (scanAdd() above) — the
                     page-wide scan listener must stay out of its way. See
                     resources/views/filament/partials/scan-capture-script.blade.php. --}}
                data-scan-ignore
            >
        </div>

        {{ $actions }}
    </div>

    {{-- Category chips, POS-style ─────────────────────────────────────── --}}
    <div class="flex flex-wrap items-center gap-1.5">
        <button
            type="button"
            x-on:click="mainCat = ''"
            :class="mainCat === '' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
            class="rounded-full px-3 py-1 text-xs font-medium transition"
        >All</button>
        <template x-for="c in mainCategories()" :key="c">
            <button
                type="button"
                x-on:click="mainCat = c"
                :class="mainCat === c ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
                class="rounded-full px-3 py-1 text-xs font-medium transition"
                x-text="c"
            ></button>
        </template>
    </div>

    <template x-if="mainCat">
        <div class="flex flex-wrap items-center gap-1.5 border-t border-gray-100 pt-2.5 dark:border-white/10">
            <button
                type="button"
                x-on:click="subCat = ''"
                :class="subCat === '' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
                class="rounded-full px-3 py-1 text-xs font-medium transition"
            >All sub-categories</button>
            <template x-for="c in subCategories()" :key="c">
                <button
                    type="button"
                    x-on:click="subCat = c"
                    :class="subCat === c ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
                    class="rounded-full px-3 py-1 text-xs font-medium transition"
                    x-text="c"
                ></button>
            </template>
        </div>
    </template>
</div>