<template>
  <div class="px-4 py-3 border-t border-gray-200 flex items-center justify-between">
    <!-- Left side: Page info and per-page selector -->
    <div class="flex items-center gap-4 text-sm text-gray-600">
      <span>{{ $t('Page %s of %s', currentPage, totalPages) }}</span>
      <select
        :value="perPage"
        @change="handlePerPageChange"
        class="pagination-select border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
      >
        <option v-for="option in perPageOptions" :key="option" :value="option">
          {{ option }}
        </option>
      </select>
      <span>/ page</span>
      <span>{{ $t('Total %s', totalItems) }}</span>
    </div>

    <!-- Right side: Page navigation -->
    <div class="flex items-center gap-1">
      <!-- Previous button -->
      <button
        @click="goToPage(currentPage - 1)"
        :disabled="currentPage === 1"
        class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      >
        <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"></path>
        </svg>
      </button>

      <!-- Page numbers -->
      <template v-for="pageNum in visiblePages" :key="pageNum">
        <button
          v-if="pageNum !== '...'"
          @click="goToPage(pageNum)"
          :class="[
            'px-3 py-2 text-sm font-medium border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500',
            pageNum === currentPage
              ? 'bg-blue-600 text-white border-blue-600'
              : 'bg-white text-gray-700 hover:bg-gray-50'
          ]"
        >
          {{ pageNum }}
        </button>
        <span
          v-else
          class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300"
        >
          ...
        </span>
      </template>

      <!-- Next button -->
      <button
        @click="goToPage(currentPage + 1)"
        :disabled="currentPage === totalPages"
        class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      >
        <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"></path>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// Props
const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
    default: 1
  },
  totalPages: {
    type: Number,
    required: true,
    default: 1
  },
  totalItems: {
    type: Number,
    required: true,
    default: 0
  },
  perPage: {
    type: Number,
    required: true,
    default: 10
  },
  perPageOptions: {
    type: Array,
    default: () => [10, 25, 50, 100]
  }
})

// Events
const emit = defineEmits(['paginate', 'per-page-change'])

// Computed property for visible page numbers
const visiblePages = computed(() => {
  const current = props.currentPage
  const total = props.totalPages
  const pages = []
  
  if (total <= 7) {
    // Show all pages if total is 7 or less
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    // Always show first page
    pages.push(1)
    
    if (current > 4) {
      pages.push('...')
    }
    
    // Show pages around current page
    const start = Math.max(2, current - 1)
    const end = Math.min(total - 1, current + 1)
    
    for (let i = start; i <= end; i++) {
      if (!pages.includes(i)) {
        pages.push(i)
      }
    }
    
    if (current < total - 3) {
      pages.push('...')
    }
    
    // Always show last page
    if (!pages.includes(total)) {
      pages.push(total)
    }
  }
  
  return pages
})

// Methods
const goToPage = (pageNum) => {
  if (pageNum >= 1 && pageNum <= props.totalPages && pageNum !== props.currentPage) {
    emit('paginate', {
      page: pageNum,
      perPage: props.perPage
    })
  }
}

const handlePerPageChange = (event) => {
  const newPerPage = parseInt(event.target.value)
  emit('per-page-change', {
    perPage: newPerPage
  })
  
  // Also emit paginate event to reset to page 1
  emit('paginate', {
    page: 1,
    perPage: newPerPage
  })
}
</script>

<style scoped>
/* Use higher specificity to override conflicting CSS */
div.px-4.py-3 select.pagination-select {
  border: 1px solid #d1d5db;
  background: white;
  -webkit-appearance: menulist;
  appearance: menulist;
}

div.px-4.py-3 select.pagination-select:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-color: #3b82f6;
}
</style>
