<template>
	<div class="items-container">
		<div v-if="items.length === 0" class="no-items-message">
			<i class="pi pi-inbox"></i>
			<p>{{ emptyMessage }}</p>
		</div>
		<div v-else v-for="item in items" :key="item.itemCode" class="item-card" :class="{ 'item-selected': isItemSelected(item.itemCode) }" @click="handleItemClick(item, $event)">
			<div class="item-card-header">
				<span class="item-code">{{ item.itemCode }}</span>
				<span class="item-name">{{ item.itemName }}</span>
				<span class="item-price">${{ item.standardRate?.toFixed(2) || '0.00' }}</span>
				<Button
					:label="isItemSelected(item.itemCode) ? 'Selected' : 'Select'"
					:icon="isItemSelected(item.itemCode) ? 'pi pi-check' : 'pi pi-plus'"
					@click.stop="handleItemClick(item, $event)"
					size="small"
					:severity="isItemSelected(item.itemCode) ? 'success' : 'secondary'"
					class="select-item-button"
				/>
			</div>
			<div v-if="item.description" class="item-description">
				{{ item.description }}
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, watch, computed, shallowRef } from "vue";
import Button from "primevue/button";

const props = defineProps({
	items: {
		type: Array,
		required: true,
		default: () => []
	},
	selectedItems: {
		type: Array,
		default: () => []
	},
	emptyMessage: {
		type: String,
		default: "No items found in this category"
	}
});

const emit = defineEmits(['select']);

const internalSelection = ref([]);
const selectionSet = shallowRef(new Set());

// Sync internal selection with prop
watch(() => props.selectedItems, (newVal) => {
	internalSelection.value = [...newVal];
	selectionSet.value = new Set(newVal.map(item => item.itemCode));
}, { immediate: true });

const isItemSelected = (itemCode) => {
	return selectionSet.value.has(itemCode);
};

const handleItemClick = (item, event) => {
	// Always multi-select mode - toggle item in selection
	const index = internalSelection.value.findIndex(i => i.itemCode === item.itemCode);
	const newSet = new Set(selectionSet.value);
	
	if (index >= 0) {
		internalSelection.value.splice(index, 1);
		newSet.delete(item.itemCode);
	} else {
		internalSelection.value.push(item);
		newSet.add(item.itemCode);
	}
	
	// Update Set directly instead of recreating from array
	selectionSet.value = newSet;
	// Emit the entire selection array
	emit('select', [...internalSelection.value]);
};
</script>

<style scoped>
.items-container {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	overflow-y: scroll;
	padding: 0.5rem;
}

.no-items-message {
	text-align: center;
	padding: 3rem 2rem;
	color: #666;
}

.no-items-message i {
	font-size: 3em;
	color: #ccc;
	margin-bottom: 1rem;
	display: block;
}

.no-items-message p {
	margin: 0;
	font-size: 1rem;
}

.item-card {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 0.75rem;
	background-color: #fafafa;
	transition: all 0.2s ease;
	cursor: pointer;
}

.item-card:hover {
	background-color: #f0f0f0;
	border-color: #2196f3;
}

.item-selected {
	background-color: #e3f2fd;
	border-color: #2196f3;
	border-width: 2px;
}

.item-card-header {
	display: grid;
	grid-template-columns: 150px 1fr 120px 100px;
	align-items: center;
	gap: 1rem;
}

.item-code {
	font-weight: 600;
	color: #333;
	font-family: monospace;
	font-size: 0.9rem;
}

.item-name {
	color: #555;
}

.item-price {
	font-weight: 600;
	color: #2196f3;
	text-align: right;
}

.select-item-button {
	justify-self: end;
}

.item-description {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid #e0e0e0;
	color: #666;
	font-size: 0.9rem;
	line-height: 1.4;
}
</style>
