<template>
    <div class="pagination">
        <!-- Previous -->
        <Link
            :href="paginator.prev_page_url || '#'"
            class="page-btn"
            :class="{ 'is-disabled': !paginator.prev_page_url }"
            preserve-scroll
            :preserve-state="preserveState"
            aria-label="Previous page"
        >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>
        </Link>

        <!-- Page window -->
        <template v-for="(item, i) in pages" :key="i">
            <span v-if="item === '…'" class="page-ellipsis">…</span>
            <Link
                v-else
                :href="pageUrl(item)"
                class="page-btn"
                :class="{ 'is-active': item === paginator.current_page }"
                preserve-scroll
                :preserve-state="preserveState"
            >{{ item }}</Link>
        </template>

        <!-- Next -->
        <Link
            :href="paginator.next_page_url || '#'"
            class="page-btn"
            :class="{ 'is-disabled': !paginator.next_page_url }"
            preserve-scroll
            :preserve-state="preserveState"
            aria-label="Next page"
        >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
        </Link>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { Link } from '@inertiajs/vue3';

const props = defineProps({
    paginator:     { type: Object, required: true }, // Laravel paginator (current_page, last_page, *_page_url)
    preserveState: { type: Boolean, default: false }, // keep component state (e.g. active tab) across page visits
    pageName:      { type: String, default: 'page' }, // query param name (for multiple paginators on one page)
});

/**
 * Sliding window of page numbers, max 7 slots:
 *   ≤7 pages:        1 2 3 4 5 6 7
 *   near the start:  1 2 3 4 5 … 20
 *   in the middle:   1 … 9 10 11 … 20
 *   near the end:    1 … 16 17 18 19 20
 */
const pages = computed(() => {
    const current = props.paginator.current_page;
    const last    = props.paginator.last_page;

    if (last <= 7) {
        return Array.from({ length: last }, (_, i) => i + 1);
    }
    if (current <= 4) {
        return [1, 2, 3, 4, 5, '…', last];
    }
    if (current >= last - 3) {
        return [1, '…', last - 4, last - 3, last - 2, last - 1, last];
    }
    return [1, '…', current - 1, current, current + 1, '…', last];
});

// first_page_url carries the preserved query string (filters/search),
// so swapping the page param keeps all active filters intact.
function pageUrl(page) {
    const url = new URL(props.paginator.first_page_url, window.location.origin);
    url.searchParams.set(props.pageName, page);
    return url.pathname + '?' + url.searchParams.toString();
}
</script>

<style scoped>
.page-btn.is-disabled { pointer-events: none; opacity: 0.4; }
.page-ellipsis {
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #9ca3af;
    user-select: none;
}
</style>
