@props([
    'currentPage' => 1,
    'totalPages' => 10,
    'showFirstLast' => true,
    'maxVisible' => 5,
])

@php
    $hasPrevious = $currentPage > 1;
    $hasNext = $currentPage < $totalPages;

    // Berechne sichtbare Seitenzahlen
    $visiblePages = [];

    if ($totalPages <= $maxVisible) {
        // Zeige alle Seiten wenn weniger als maxVisible
        $visiblePages = range(1, $totalPages);
    } else {
        // Berechne dynamischen Bereich
        $start = max(1, $currentPage - floor($maxVisible / 2));
        $end = min($totalPages, $start + $maxVisible - 1);

        // Korrigiere Start wenn am Ende
        if ($end - $start < $maxVisible - 1) {
            $start = max(1, $end - $maxVisible + 1);
        }

        $visiblePages = range($start, $end);
    }

    $showStartEllipsis = $visiblePages[0] > 1;
    $showEndEllipsis = end($visiblePages) < $totalPages;
@endphp

<nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
    <div class="flex items-center gap-2">
        <!-- Vorherige Seite -->
        <button
            class="pagination-btn pagination-nav {{ !$hasPrevious ? 'disabled:opacity-50 disabled:cursor-not-allowed' : '' }}"
            {{ !$hasPrevious ? 'disabled' : '' }} aria-label="Vorherige Seite"
            @if ($hasPrevious) onclick="window.location.href='?page={{ $currentPage - 1 }}'" @endif>
            <svg class="h-5 w-5" 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"></path>
            </svg>
        </button>

        <!-- Erste Seite + Ellipsis -->
        @if ($showStartEllipsis && $showFirstLast)
            <button class="pagination-btn" onclick="window.location.href='?page=1'">
                1
            </button>
            <span class="px-2 text-zinc-600 dark:text-zinc-400">...</span>
        @endif

        <!-- Sichtbare Seitenzahlen -->
        @foreach ($visiblePages as $page)
            <button class="pagination-btn {{ $page === $currentPage ? 'pagination-active' : '' }}"
                {{ $page === $currentPage ? 'aria-current="page"' : '' }}
                @if ($page !== $currentPage) onclick="window.location.href='?page={{ $page }}'" @endif>
                {{ $page }}
            </button>
        @endforeach

        <!-- Ellipsis + Letzte Seite -->
        @if ($showEndEllipsis && $showFirstLast)
            <span class="px-2 text-zinc-600 dark:text-zinc-400">...</span>
            <button class="pagination-btn" onclick="window.location.href='?page={{ $totalPages }}'">
                {{ $totalPages }}
            </button>
        @endif

        <!-- Nächste Seite -->
        <button
            class="pagination-btn pagination-nav {{ !$hasNext ? 'disabled:opacity-50 disabled:cursor-not-allowed' : '' }}"
            {{ !$hasNext ? 'disabled' : '' }} aria-label="Nächste Seite"
            @if ($hasNext) onclick="window.location.href='?page={{ $currentPage + 1 }}'" @endif>
            <svg class="h-5 w-5" 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"></path>
            </svg>
        </button>
    </div>
</nav>