@props([
    'items' => null,
    'perPageOptions' => [5, 10, 20, 50],
    'perPageModel' => 'perPage',
    'pageName' => 'page',
    'showInfo' => true,
    'showPageSelector' => true
])

@if($items && $items->hasPages())
<div class="mt-6 bg-base-100 pt-2 pb-2 rounded-lg relative">
    <!-- Indicador de carga -->
    <div wire:loading class="absolute inset-0 bg-base-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center z-10">
        <div class="flex flex-col items-center gap-3">
            <span class="loading loading-spinner loading-lg text-primary"></span>
            <span class="text-sm text-base-content/70 font-medium">Cargando...</span>
        </div>
    </div>
    
    <div class="flex flex-col lg:flex-row justify-between items-center gap-6">
        @if($showPageSelector)
        <!-- Selector de elementos por página - Contenedor más amplio -->
        <div class="flex items-center gap-2 min-w-max">
            <span class="text-sm text-base-content/70 whitespace-nowrap">Mostrar</span>
            <select wire:model.live="{{ $perPageModel }}" class="select select-sm border-base-300 focus:border-primary w-20">
                @foreach($perPageOptions as $option)
                    <option value="{{ $option }}">{{ $option }}</option>
                @endforeach
            </select>
            <span class="text-sm text-base-content/70 whitespace-nowrap">elementos por página</span>
        </div>
        @endif

        <!-- Información de registros y navegación -->
        <div class="flex flex-col sm:flex-row items-center gap-6">
            @if($showInfo)
            <!-- Info de registros -->
            <div class="text-sm text-base-content/70 whitespace-nowrap">
                Mostrando {{ $items->firstItem() ?? 0 }} a {{ $items->lastItem() ?? 0 }} 
                de {{ $items->total() }} resultados
            </div>
            @endif

            <!-- Navegación de páginas mejorada -->
            <div class="join">
                <!-- Botón anterior -->
                @if ($items->onFirstPage())
                    <button class="join-item btn btn-sm btn-disabled">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>
                @else
                    <button wire:click="previousPage('{{ $pageName }}')" class="join-item btn btn-sm hover:btn-primary">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>
                @endif

                <!-- Números de página expandidos -->
                @php
                    $currentPage = $items->currentPage();
                    $lastPage = $items->lastPage();
                    $start = max(1, $currentPage - 3);
                    $end = min($lastPage, $currentPage + 3);
                    
                    // Ajustar para mostrar siempre 10 números cuando sea posible
                    if ($end - $start < 4) {
                        if ($start == 1) {
                            $end = min($lastPage, $start + 4);
                        } else {
                            $start = max(1, $end - 4);
                        }
                    }
                @endphp

                @if($start > 1)
                    <button wire:click="gotoPage(1, '{{ $pageName }}')" class="join-item btn btn-sm hover:btn-primary">1</button>
                    @if($start > 2)
                        <span class="join-item btn btn-sm btn-disabled">...</span>
                    @endif
                @endif

                @foreach (range($start, $end) as $page)
                    @if ($page == $currentPage)
                        <button class="join-item btn btn-sm btn-active btn-primary font-bold">{{ $page }}</button>
                    @else
                        <button wire:click="gotoPage({{ $page }}, '{{ $pageName }}')" class="join-item btn btn-sm hover:btn-primary">{{ $page }}</button>
                    @endif
                @endforeach

                @if($end < $lastPage)
                    @if($end < $lastPage - 1)
                        <span class="join-item btn btn-sm btn-disabled">...</span>
                    @endif
                    <button wire:click="gotoPage({{ $lastPage }}, '{{ $pageName }}')" class="join-item btn btn-sm hover:btn-primary">{{ $lastPage }}</button>
                @endif

                <!-- Botón siguiente -->
                @if ($items->hasMorePages())
                    <button wire:click="nextPage('{{ $pageName }}')" class="join-item btn btn-sm hover:btn-primary">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                @else
                    <button class="join-item btn btn-sm btn-disabled">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>
@endif