use Acun\Ui\Livewire\Concerns\WithListing;
use Acun\Ui\Search\SearchField;
use Acun\Ui\Search\SearchMode;

new class extends Component
{
    use WithListing;

    public string $status = '';

    protected function defaultSortField(): string
    {
        return 'name';
    }

    protected function sortableFields(): array
    {
        return ['name', 'sku'];
    }

    protected function currentPageKeys(): array
    {
        return $this->baseQuery()->forPage($this->getPage(), $this->perPage)->pluck('id')->all();
    }

    public function updatedStatus(): void
    {
        $this->resetPage();
        $this->clearSelection();
    }

    // A word anywhere in the product name, the SKU from the start (name_search, sku_search columns).
    protected function searchFields(): array
    {
        return [SearchField::make('name', SearchMode::Contains), SearchField::make('sku')];
    }

    private function baseQuery(): Builder
    {
        return $this->applySearch(Product::query())
            ->when($this->status !== '', fn ($q) => $q->where('is_active', $this->status))
            ->orderBy($this->sortField, $this->sortDirection);
    }

    public function with(): array
    {
        $this->fillPageSelection();

        return ['products' => $this->baseQuery()->paginate($this->perPage)];
    }
};

<acun:list-toolbar>
    <acun:search wire:model.live.debounce.400ms="search" placeholder="Product name or SKU" />
    <acun:slot:actions>
        <acun:filter-button drawer="product-filters" :count="$status !== '' ? 1 : 0" />
    </acun:slot:actions>
</acun:list-toolbar>

<acun:selection-bar :count="count($selected)" :all-matching="$allMatchingSelected" :total="$products->total()">
    <acun:modal.trigger name="bulk-delete-products"><acun:button variant="danger" size="sm">Delete</acun:button></acun:modal.trigger>
</acun:selection-bar>

<acun:table>
    <table class="ui-table">
        <thead>
            <tr>
                <th class="w-10"><acun:checkbox wire:model.live="pageSelected" aria-label="Select all on this page" /></th>
                <acun:sortable-th field="name" :sort-field="$sortField" :sort-direction="$sortDirection">Product Name</acun:sortable-th>
                <acun:sortable-th field="sku" :sort-field="$sortField" :sort-direction="$sortDirection">SKU</acun:sortable-th>
            </tr>
        </thead>
        <tbody>
            @foreach ($products as $product)
                <tr wire:key="product-{{ $product->id }}">
                    <td><acun:checkbox wire:model.live="selected" value="{{ $product->id }}" /></td>
                    <td>{{ $product->name }}</td>
                    <td>{{ $product->sku }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</acun:table>

{{ $products->links() }}

// Migration
Schema::table('customers', function (Blueprint $table) {
    $table->searchColumn('tax_number');                                 // tax_number_search + index
    $table->searchColumn(['first_name', 'last_name'], 'full_name_search'); // "Ayşe Yılmaz" is searched as a whole
});

// Component
protected function searchFields(): array
{
    return [
        SearchField::make('tax_number', SearchMode::Exact),
        SearchField::column('full_name_search', SearchMode::Contains),
    ];
}