<style scoped lang="scss">
.entry-item {
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	cursor: pointer;
	transition: background-color 0.2s;
}

.entry-item:hover {
	background-color: #f8f9fa;
}

.entry-item.active {
	background-color: #e7f3ff;
	border-left: 4px solid #0d6efd;
}
</style>
<template>
	<!-- Error Alert -->
	<div v-if="error" class="mt-3 alert alert-danger alert-dismissible">
		{{ error }}
		<button type="button" class="btn-close" @click="error = null"></button>
	</div>

	<div class="p-3 border-bottom bg-primary text-white">
		<h5 class="mb-0"><i class="bi bi-list-ul"></i> Review Queue</h5>
		<small>{{ total }} entries pending</small>
	</div>

	<!-- Loading State -->
	<div v-if="tasks == null" class="p-4 text-center">
		<span class="spinner-border" role="status"></span>
		<p class="mt-2">Loading tasks...</p>
	</div>

	<!-- Empty State -->
	<div v-else-if="tasks.length === 0" class="p-4 text-center text-muted">
		<i class="bi bi-check-circle" style="font-size: 48px"></i>
		<p class="mt-2">No entries to review!</p>
	</div>

	<!-- Task List -->
	<div
		v-for="task in tasks"
		:key="task.id"
		class="entry-item"
		:class="{ active: selectedTaskID === task.id }"
		@click="emit('doSelectTask', task.id)"
	>
		<div class="d-flex justify-content-between align-items-start">
			<div>
				<i class="bi bi-droplet"></i>
				<strong>Pool {{ task.id }}</strong>
			</div>
			<small class="text-muted">{{ task.pool?.condition }}</small>
		</div>
		<small class="text-muted d-block mt-1">
			{{ formatAddress(task.address) }}
		</small>
	</div>
</template>
<script setup lang="ts">
import { formatAddress } from "@/format";
import { ReviewTask } from "@/type/api";

interface Emits {
	(e: "doSelectTask", id: number): void;
}
interface Props {
	error: string | null;
	selectedTaskID: number | null;
	tasks: ReviewTask[];
	total: number;
}
const emit = defineEmits<Emits>();
const props = defineProps<Props>();
</script>
