<template>
	<div v-if="totalItems > 0" class="pagination-controls">
		<div class="pagination-controls__nav">
			<NcButton :disabled="currentPage <= 1"
				@click="$emit('page', currentPage - 1)">
				Zurück
			</NcButton>
			<span class="pagination-controls__info">
				Seite {{ currentPage }} von {{ totalPages }}
				({{ totalItems }} {{ itemLabel }})
			</span>
			<NcButton :disabled="currentPage >= totalPages"
				@click="$emit('page', currentPage + 1)">
				Weiter
			</NcButton>
		</div>
		<div class="pagination-controls__size">
			<label for="page-size-select">Zeilen pro Seite:</label>
			<select id="page-size-select"
				:value="pageSize"
				class="pagination-controls__select"
				@change="$emit('update:pageSize', parseInt($event.target.value))">
				<option v-for="opt in pageSizeOptions"
					:key="opt"
					:value="opt">
					{{ opt }}
				</option>
			</select>
		</div>
	</div>
</template>

<script setup>
import { computed } from 'vue'
import { NcButton } from '@nextcloud/vue'
import { PAGE_SIZE_OPTIONS } from '../utils/usePageSize.js'

const props = defineProps({
	currentPage: { type: Number, required: true },
	totalItems: { type: Number, required: true },
	pageSize: { type: Number, required: true },
	itemLabel: { type: String, default: 'Einträge' },
})

defineEmits(['page', 'update:pageSize'])

const pageSizeOptions = PAGE_SIZE_OPTIONS

const totalPages = computed(() => Math.max(1, Math.ceil(props.totalItems / props.pageSize)))
</script>

<style scoped>
.pagination-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	padding: 12px 0;
	flex-wrap: wrap;
}

.pagination-controls__nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pagination-controls__info {
	color: var(--color-text-lighter);
	white-space: nowrap;
}

.pagination-controls__size {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
}

.pagination-controls__size label {
	color: var(--color-text-lighter);
	white-space: nowrap;
}

.pagination-controls__select {
	padding: 4px 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-main-background);
	color: var(--color-text);
}
</style>
