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

/**
 * Pagination component.
 * 
 * Handles Laravel pagination with Inertia.js integration.
 * 
 * @example
 * <Pagination :links="users.links" :meta="users.meta" />
 * 
 * Or with just links array:
 * <Pagination :links="users.links" />
 */

const props = defineProps({
    // Laravel pagination links array
    links: {
        type: Array,
        required: true,
    },
    // Optional meta information
    meta: {
        type: Object,
        default: null,
    },
    // Show info text
    showInfo: {
        type: Boolean,
        default: true,
    },
    // Preserve scroll position
    preserveScroll: {
        type: Boolean,
        default: true,
    },
    // Preserve state
    preserveState: {
        type: Boolean,
        default: true,
    },
});

// Filter out first and last links (prev/next) for page numbers
const pageLinks = computed(() => {
    if (!props.links || props.links.length <= 2) return [];
    return props.links.slice(1, -1);
});

const prevLink = computed(() => props.links?.[0] || null);
const nextLink = computed(() => props.links?.[props.links.length - 1] || null);

const hasPages = computed(() => {
    return props.links && props.links.length > 3;
});

// Info text
const infoText = computed(() => {
    if (!props.meta) return '';
    const { from, to, total } = props.meta;
    if (!from || !to || !total) return '';
    return `Mostrando ${from} a ${to} de ${total} resultados`;
});

const navigate = (url) => {
    if (!url) return;
    
    router.get(url, {}, {
        preserveScroll: props.preserveScroll,
        preserveState: props.preserveState,
    });
};

const isFirstOrLast = (label) => {
    return label.includes('Previous') || 
           label.includes('Anterior') || 
           label.includes('Next') || 
           label.includes('Siguiente') ||
           label === '&laquo;' ||
           label === '&raquo;';
};
</script>

<template>
    <div
        v-if="hasPages"
        class="flex flex-col sm:flex-row items-center justify-between gap-4 py-3"
    >
        <!-- Info text -->
        <div
            v-if="showInfo && meta"
            class="text-sm text-gray-500"
        >
            {{ infoText }}
        </div>

        <!-- Pagination links -->
        <nav class="flex items-center gap-1">
            <!-- Previous button -->
            <button
                type="button"
                :disabled="!prevLink?.url"
                :class="[
                    'relative inline-flex items-center px-2 py-2 text-sm font-medium rounded-md',
                    prevLink?.url
                        ? 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-50'
                        : 'text-gray-300 bg-gray-100 border border-gray-200 cursor-not-allowed'
                ]"
                @click="navigate(prevLink?.url)"
            >
                <Icon name="chevron-left" class="h-4 w-4" />
            </button>

            <!-- Page numbers -->
            <template v-for="link in pageLinks" :key="link.label">
                <span
                    v-if="link.label === '...'"
                    class="px-3 py-2 text-gray-500"
                >
                    ...
                </span>
                <button
                    v-else
                    type="button"
                    :disabled="link.active"
                    :class="[
                        'relative inline-flex items-center px-3 py-2 text-sm font-medium rounded-md',
                        link.active
                            ? 'bg-orange-500 text-white'
                            : 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-50'
                    ]"
                    @click="navigate(link.url)"
                    v-html="link.label"
                />
            </template>

            <!-- Next button -->
            <button
                type="button"
                :disabled="!nextLink?.url"
                :class="[
                    'relative inline-flex items-center px-2 py-2 text-sm font-medium rounded-md',
                    nextLink?.url
                        ? 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-50'
                        : 'text-gray-300 bg-gray-100 border border-gray-200 cursor-not-allowed'
                ]"
                @click="navigate(nextLink?.url)"
            >
                <Icon name="chevron-right" class="h-4 w-4" />
            </button>
        </nav>
    </div>
</template>
