@props([
    'items',
    'columns',
    'actions' => null,
    'enableColumnFilters' => false,
    'rowClass' => null,
    'bulkSelectField' => null,
    'bulkSelectName' => 'sector_ids[]',
    'bulkSelectCheckboxClass' => 'js-bulk-row-select',
])

<x-page.card>
    <div
        x-data="{
            filters: {},
            normalize(value) {
                return String(value ?? '')
                    .toLowerCase()
                    .normalize('NFD')
                    .replace(/[\u0300-\u036f]/g, '')
                    .trim();
            },
            rowMatches(values) {
                return Object.entries(this.filters).every(([index, term]) => {
                    if (!term) return true;
                    const value = values[index] ?? '';
                    return this.normalize(value).includes(this.normalize(term));
                });
            }
        }"
    >
    <div class="overflow-x-auto">
    <x-table.table>

        <thead class="bg-gray-50 border-b">
            <tr>
                @if($bulkSelectField)
                    <x-table.th class="w-10">
                        <input
                            type="checkbox"
                            class="js-bulk-select-all rounded border-gray-300 text-red-600 focus:ring-red-500"
                            title="Selecionar todas"
                            aria-label="Selecionar todas as linhas"
                        />
                    </x-table.th>
                @endif
                @foreach($columns as $column)
                    <x-table.th>
                        @php
                            $sortBy = $column['sort_by'] ?? null;
                            $currentSort = request('sort');
                            $currentDirection = request('direction', 'asc');
                        @endphp

                        @if($sortBy)
                            @php
                                $nextDirection = ($currentSort === $sortBy && $currentDirection === 'asc') ? 'desc' : 'asc';
                                $sortUrl = request()->fullUrlWithQuery([
                                    'sort' => $sortBy,
                                    'direction' => $nextDirection,
                                ]);
                            @endphp
                            <a href="{{ $sortUrl }}" class="inline-flex items-center gap-1 text-gray-700 hover:text-gray-900">
                                <span>{{ $column['label'] }}</span>
                                @if($currentSort === $sortBy)
                                    <span aria-hidden="true">{{ $currentDirection === 'asc' ? '↑' : '↓' }}</span>
                                @else
                                    <span class="text-gray-300" aria-hidden="true">↕</span>
                                @endif
                            </a>
                        @else
                            {{ $column['label'] }}
                        @endif
                    </x-table.th>
                @endforeach

                @isset($actions)
                    <x-table.th>Ações</x-table.th>
                @endisset
            </tr>
            @if($enableColumnFilters)
                <tr class="bg-white border-t">
                    @foreach($columns as $column)
                        <th class="px-4 py-2">
                            <input
                                type="text"
                                x-model="filters['{{ $loop->index }}']"
                                placeholder="Filtrar {{ \Illuminate\Support\Str::lower($column['label']) }}..."
                                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-xs text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40"
                            />
                        </th>
                    @endforeach
                    @isset($actions)
                        <th class="px-4 py-2"></th>
                    @endisset
                </tr>
            @endif
        </thead>

        <tbody class="divide-y">
            @forelse($items as $item)
                @php
                    $computedRowClass = $rowClass ? (string) $rowClass($item) : '';
                    $rowFilterValues = [];
                    foreach ($columns as $col) {
                        $rawValue = data_get($item, $col['field']);
                        $colType = $col['type'] ?? 'text';

                        if ($colType === 'datetime') {
                            $rowFilterValues[] = $rawValue
                                ? \Illuminate\Support\Carbon::parse($rawValue)->timezone(config('app.timezone'))->format('d/m/Y H:i')
                                : '—';
                            continue;
                        }

                        if ($colType === 'allocation-holder') {
                            $holder = (string) (data_get($item, 'holder_label') ?? '—');
                            $allocatedAt = (string) (data_get($item, 'holder_allocated_at_label') ?? '');
                            $rowFilterValues[] = trim($holder.' '.$allocatedAt);
                            continue;
                        }

                        if ($colType === 'battery-progress') {
                            $eligible = (int) data_get($item, 'progress_eligible', 0);
                            $started = (int) data_get($item, 'progress_started', 0);
                            $pending = (int) data_get($item, 'progress_pending', 0);
                            $percent = (int) data_get($item, 'progress_percent', 0);
                            $rowFilterValues[] = $eligible === 0
                                ? '—'
                                : "{$percent}% {$started} iniciaram {$pending} pendentes de {$eligible}";
                            continue;
                        }

                        $rowFilterValues[] = is_scalar($rawValue) || $rawValue === null
                            ? (string) ($rawValue ?? '—')
                            : (string) json_encode($rawValue);
                    }
                @endphp
                <tr
                    class="hover:bg-gray-50 {{ $computedRowClass }}"
                    @if($enableColumnFilters)
                        x-show="rowMatches({{ \Illuminate\Support\Js::from($rowFilterValues) }})"
                    @endif
                >
                    @if($bulkSelectField)
                        <x-table.td class="w-10">
                            @can('delete', $item)
                                <input
                                    type="checkbox"
                                    name="{{ $bulkSelectName }}"
                                    value="{{ data_get($item, $bulkSelectField) }}"
                                    class="{{ $bulkSelectCheckboxClass }} rounded border-gray-300 text-red-600 focus:ring-red-500"
                                    aria-label="Selecionar {{ data_get($item, 'name', 'registro') }}"
                                />
                            @endcan
                        </x-table.td>
                    @endif
                    @foreach($columns as $column)
                    <x-table.td>
                        @php
                            $value = data_get($item, $column['field']);
                            $type = $column['type'] ?? 'text';
                        @endphp

                        @switch($type)
                            @case('status')
                                <x-ui.status-badge :value="$value" />
                                @break
                            @case('account-kind')
                                @php
                                    $kind = $value instanceof \App\Enums\AccountKind
                                        ? $value
                                        : \App\Enums\AccountKind::tryFrom((string) $value);
                                @endphp
                                {{ $kind === \App\Enums\AccountKind::PORTAL_ONLY ? 'Portal' : ($kind === \App\Enums\AccountKind::STAFF ? 'Equipe' : '—') }}
                                @break
                            @case('equipment-availability')
                                <x-ui.equipment-availability-badge :value="$value" />
                                @break
                            @case('datetime')
                                {{ $value ? \Illuminate\Support\Carbon::parse($value)->timezone(config('app.timezone'))->format('d/m/Y H:i') : '—' }}
                                @break
                            @case('allocation-holder')
                                <x-ui.allocation-holder-badge
                                    :holder="data_get($item, 'holder_label')"
                                    :allocatedAt="data_get($item, 'holder_allocated_at_label')"
                                />
                                @break
                            @case('battery-progress')
                                @php
                                    $progressEligible = (int) data_get($item, 'progress_eligible', 0);
                                    $progressStarted = (int) data_get($item, 'progress_started', 0);
                                    $progressPending = (int) data_get($item, 'progress_pending', 0);
                                    $progressPercent = (int) data_get($item, 'progress_percent', 0);
                                @endphp
                                @if($progressEligible === 0)
                                    <span class="text-sm text-gray-400">—</span>
                                @else
                                    <div class="min-w-[10rem] text-sm leading-snug">
                                        <div class="flex items-center justify-between gap-2 mb-1">
                                            <span class="text-xs font-medium text-gray-600">Início da bateria</span>
                                            <span class="text-xs font-semibold text-gray-800">{{ $progressPercent }}%</span>
                                        </div>
                                        <div
                                            class="h-1.5 w-full overflow-hidden rounded-full bg-gray-200"
                                            role="progressbar"
                                            aria-valuenow="{{ $progressPercent }}"
                                            aria-valuemin="0"
                                            aria-valuemax="100"
                                            aria-label="Progresso de início da bateria"
                                        >
                                            <div
                                                class="h-full rounded-full bg-emerald-600 transition-all"
                                                style="width: {{ $progressPercent }}%"
                                            ></div>
                                        </div>
                                        <p class="mt-1.5 text-gray-600">
                                            <span class="font-semibold text-emerald-700">{{ $progressStarted }}</span> iniciaram
                                            <span class="text-gray-400 mx-1">·</span>
                                            <span class="font-semibold text-amber-700">{{ $progressPending }}</span> pendentes
                                        </p>
                                        <p class="text-xs text-gray-500">de {{ $progressEligible }} na bateria</p>
                                    </div>
                                @endif
                                @break
                            @default
                                {{ $value }}
                        @endswitch
                    </x-table.td>
                    @endforeach

                    @if($actions)
                        <x-table.td>
                            {!! $actions($item) !!}
                        </x-table.td>
                    @endif
                </tr>
            @empty
                <tr>
                    @php
                        $emptyColspan = count($columns) + ($bulkSelectField ? 1 : 0) + (isset($actions) ? 1 : 0);
                    @endphp
                    <td colspan="{{ $emptyColspan }}"
                        class="px-6 py-10 text-center text-gray-500">
                        Nenhum registro encontrado
                    </td>
                </tr>
            @endforelse
        </tbody>

    </x-table.table>
    </div>
    </div>
</x-page.card>

@if($bulkSelectField)
    @once
        @push('scripts')
            <script>
                document.addEventListener('change', function (event) {
                    const target = event.target;
                    if (!(target instanceof HTMLInputElement)) {
                        return;
                    }
                    if (target.classList.contains('js-bulk-select-all')) {
                        const form = target.closest('form');
                        const boxes = form
                            ? form.querySelectorAll('.js-bulk-row-select')
                            : document.querySelectorAll('.js-bulk-row-select');
                        boxes.forEach(function (checkbox) {
                            if (checkbox instanceof HTMLInputElement && !checkbox.disabled) {
                                checkbox.checked = target.checked;
                            }
                        });
                        return;
                    }
                    if (target.classList.contains('js-bulk-row-select')) {
                        const form = target.closest('form');
                        if (!form) {
                            return;
                        }
                        const submitBtn = form.querySelector('.js-bulk-submit');
                        if (!(submitBtn instanceof HTMLButtonElement)) {
                            return;
                        }
                        const anyChecked = form.querySelectorAll('.js-bulk-row-select:checked').length > 0;
                        submitBtn.disabled = !anyChecked;
                    }
                });
                document.addEventListener('DOMContentLoaded', function () {
                    document.querySelectorAll('form.js-bulk-select-form').forEach(function (form) {
                        const submitBtn = form.querySelector('.js-bulk-submit');
                        if (submitBtn instanceof HTMLButtonElement) {
                            submitBtn.disabled = form.querySelectorAll('.js-bulk-row-select:checked').length === 0;
                        }
                    });
                });
            </script>
        @endpush
    @endonce
@endif