@props([
    'headers' => [],
    'searchable' => true,
    'searchPlaceholder' => 'Search...',
])

<div
    x-data="{
        query: '',
        sortKey: null,
        sortDir: 'asc',
        init() {
            this.applyFilters();
        },
        applyFilters() {
            const rows = this.$refs.tbody ? Array.from(this.$refs.tbody.querySelectorAll('tr')) : [];
            rows.forEach((row) => {
                const text = row.innerText.toLowerCase();
                row.classList.toggle('hidden', this.query && !text.includes(this.query.toLowerCase()));
            });
            this.applySort();
        },
        toggleSort(key) {
            if (!key) {
                return;
            }
            if (this.sortKey === key) {
                this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
            } else {
                this.sortKey = key;
                this.sortDir = 'asc';
            }
            this.applySort();
        },
        applySort() {
            if (!this.sortKey || !this.$refs.tbody) {
                return;
            }
            const rows = Array.from(this.$refs.tbody.querySelectorAll('tr'));
            const factor = this.sortDir === 'asc' ? 1 : -1;
            rows.sort((a, b) => {
                const aVal = (a.dataset[this.sortKey] ?? a.innerText).toLowerCase();
                const bVal = (b.dataset[this.sortKey] ?? b.innerText).toLowerCase();
                if (aVal < bVal) {
                    return -1 * factor;
                }
                if (aVal > bVal) {
                    return 1 * factor;
                }
                return 0;
            });
            rows.forEach((row) => this.$refs.tbody.appendChild(row));
        },
        hasVisibleRows() {
            if (!this.$refs.tbody) {
                return false;
            }
            return this.$refs.tbody.querySelectorAll('tr:not(.hidden)').length > 0;
        }
    }"
    class="space-y-4"
>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        @if($searchable)
            <div class="w-full sm:max-w-sm">
                <x-input
                    name="table_search"
                    type="text"
                    :placeholder="$searchPlaceholder"
                    x-model="query"
                    x-on:input="applyFilters"
                />
            </div>
        @endif

        <div class="flex items-center gap-2">
            {{ $actions ?? '' }}
        </div>
    </div>

    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-800">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
                <thead class="bg-slate-50 dark:bg-slate-900/40">
                    <tr>
                        @foreach($headers as $header)
                            @php
                                $key = $header['key'] ?? null;
                                $sortable = (bool) ($header['sortable'] ?? false);
                                $label = $header['label'] ?? $key;
                            @endphp
                            <th scope="col" class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                                <button
                                    type="button"
                                    class="inline-flex items-center gap-1 {{ $sortable ? 'cursor-pointer hover:text-slate-700 dark:hover:text-slate-200' : 'cursor-default' }}"
                                    @if($sortable) x-on:click="toggleSort('{{ $key }}')" @endif
                                >
                                    <span>{{ $label }}</span>
                                    @if($sortable)
                                        <span class="text-[10px]" x-show="sortKey === '{{ $key }}'" x-text="sortDir === 'asc' ? '▲' : '▼'"></span>
                                    @endif
                                </button>
                            </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody x-ref="tbody" class="divide-y divide-slate-100 text-sm text-slate-700 dark:divide-slate-700 dark:text-slate-200">
                    {{ $row ?? $slot }}
                </tbody>
            </table>
        </div>

        <div x-show="!hasVisibleRows()" class="border-t border-slate-100 px-6 py-10 dark:border-slate-700">
            {{ $empty ?? 'No matching records found.' }}
        </div>

        <div class="border-t border-slate-100 px-4 py-3 dark:border-slate-700">
            {{ $pagination ?? '' }}
        </div>
    </div>
</div>