<template>
	<Modal
		:visible="visible"
		@update:visible="$emit('update:visible', $event)"
		@close="handleClose"
		:options="{ showActions: false, maxWidth: '90vw', width: '1350px' }"
		class="add-item-modal"
	>
		<template #title>
			<div class="modal-title-container">
				<span>Add Item</span>
				<span v-if="selectedItemsCount > 0" class="selection-badge">{{ selectedItemsCount }} selected</span>
			</div>
		</template>
		<div class="modal-content items-modal-content">
			<div class="search-section">
				<label for="item-search" class="field-label">Search Items</label>
				<InputText
					id="item-search"
					v-model="searchTerm"
					placeholder="Search by item code or name..."
					fluid
				/>
			</div>
			<div class="tabs-container">
				<Tabs v-model="activeItemTab" v-if="itemGroups.length > 0 || packageGroups.length > 0">
				<TabList>
					<Tab v-if="packageGroups.length > 0" value="Packages">
						<i class="pi pi-box"></i>
						<span>Packages</span>
					</Tab>
					<Tab v-for="group in itemGroups" :key="group" :value="group">{{ group }}</Tab>
				</TabList>
				<TabPanels>
					<!-- Packages tab with nested sub-tabs -->
					<TabPanel v-if="packageGroups.length > 0" value="Packages">
						<Tabs v-model="activePackageTab" class="nested-tabs">
							<TabList>
								<Tab v-for="packageGroup in packageGroups" :key="packageGroup" :value="packageGroup">{{ packageGroup }}</Tab>
							</TabList>
							<TabPanels>
								<TabPanel v-for="packageGroup in packageGroups" :key="packageGroup" :value="packageGroup">
									<div class="package-items-container">
										<div v-for="item in getFilteredPackageItemsForGroup(packageGroup)" :key="item.itemCode" class="package-item" :class="{ 'package-item-selected': item._selected }">
											<div class="package-item-header">
												<Button
													:icon="isPackageExpanded(item.itemCode) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
													@click="togglePackageExpansion(item.itemCode)"
													text
													rounded
													class="expand-button"
												/>
												<span class="package-item-code">{{ item.itemCode }}</span>
												<span class="package-item-name">{{ item.itemName }}</span>
												<span class="package-item-price">${{ item.standardRate?.toFixed(2) || '0.00' }}</span>
												<Button
													:label="item._selected ? 'Selected' : 'Select'"
													:icon="item._selected ? 'pi pi-check' : 'pi pi-plus'"
													@click="handleItemSelection(item)"
													size="small"
													:severity="item._selected ? 'success' : 'secondary'"
													class="add-package-button"
												/>
											</div>
											<div v-if="isPackageExpanded(item.itemCode) && item.bom && item.bom.items" class="bom-details">
												<div class="bom-header">Bill of Materials:</div>
												<div v-for="bomItem in item.bom.items" :key="bomItem.itemCode" class="bom-item-wrapper">
													<BomItem :item="bomItem" :parentPath="item.itemCode" :level="0" />
												</div>
											</div>
										</div>
									</div>
								</TabPanel>
							</TabPanels>
						</Tabs>
					</TabPanel>
					<!-- Regular category tabs -->
					<TabPanel v-for="group in itemGroups" :key="group" :value="group">
						<ItemSelector 
							:items="getFilteredItemsForGroup(group)"
							:selected-items="getSelectedItemsForGroup(group)"
							@select="handleItemSelection" 
						/>
					</TabPanel>
				</TabPanels>
			</Tabs>
			<!-- Fallback if no categories -->
			<ItemSelector v-else :items="[]" empty-message="No items available. Please select a Project Template first." />
			</div>
			<div class="modal-actions">
				<Button 
					label="Clear Selection" 
					@click="clearSelection" 
					severity="secondary"
					:disabled="selectedItemsCount === 0"
				/>
				<Button 
					:label="`Add ${selectedItemsCount} Item${selectedItemsCount !== 1 ? 's' : ''}`" 
					@click="addItems" 
					icon="pi pi-plus"
					:disabled="selectedItemsCount === 0"
				/>
			</div>
		</div>
	</Modal>
</template>

<script setup>
import { ref, computed, watch, defineComponent, h, shallowRef } from "vue";
import Modal from "../common/Modal.vue";
import ItemSelector from "../common/ItemSelector.vue";
import InputText from "primevue/inputtext";
import Button from "primevue/button";
import Tabs from "primevue/tabs";
import TabList from "primevue/tablist";
import Tab from "primevue/tab";
import TabPanels from "primevue/tabpanels";
import TabPanel from "primevue/tabpanel";

const props = defineProps({
	visible: {
		type: Boolean,
		required: true
	},
	quotationItems: {
		type: Object,
		default: () => ({})
	}
});

const emit = defineEmits(['update:visible', 'add-items']);

const searchTerm = ref("");
const expandedPackageItems = shallowRef(new Set());
const selectedItemsInModal = shallowRef(new Set());

// BomItem component for recursive rendering
const BomItem = defineComponent({
	name: 'BomItem',
	props: {
		item: Object,
		parentPath: String,
		level: {
			type: Number,
			default: 0
		}
	},
	setup(props) {
		const itemPath = computed(() => {
			return props.parentPath ? `${props.parentPath}.${props.item.itemCode}` : props.item.itemCode;
		});

		const isPackage = computed(() => {
			return props.item.bom && props.item.bom.items && props.item.bom.items.length > 0;
		});

		const isExpanded = computed(() => {
			return expandedPackageItems.value.has(itemPath.value);
		});

		const toggleExpansion = () => {
			if (expandedPackageItems.value.has(itemPath.value)) {
				expandedPackageItems.value.delete(itemPath.value);
			} else {
				expandedPackageItems.value.add(itemPath.value);
			}
			expandedPackageItems.value = new Set(expandedPackageItems.value);
		};

		return () => h('div', { 
			class: 'bom-item',
			style: { paddingLeft: `${props.level * 1}rem` }
		}, [
			h('div', { class: 'bom-item-content' }, [
				isPackage.value ? h(Button, {
					icon: isExpanded.value ? 'pi pi-chevron-down' : 'pi pi-chevron-right',
					onClick: toggleExpansion,
					text: true,
					rounded: true,
					size: 'small',
					class: 'bom-expand-button'
				}) : h('i', { class: 'pi pi-circle-fill bom-item-bullet' }),
				isPackage.value ? h('i', { class: 'pi pi-box package-icon' }) : null,
				h('span', { class: 'bom-item-code' }, props.item.itemCode),
				h('span', { class: 'bom-item-name' }, props.item.itemName),
				h('span', { class: 'bom-item-qty' }, `Qty: ${props.item.qty}`)
			]),
			isPackage.value && isExpanded.value && props.item.bom?.items ? h('div', { class: 'nested-bom' }, 
				props.item.bom.items.map(nestedItem => 
					h(BomItem, {
						key: nestedItem.itemCode,
						item: nestedItem,
						parentPath: itemPath.value,
						level: props.level + 1
					})
				)
			) : null
		]);
	}
});

const itemGroups = computed(() => {
	if (!props.quotationItems || typeof props.quotationItems !== 'object') return [];
	// Get all keys except 'Packages'
	const groups = Object.keys(props.quotationItems).filter(key => key !== 'Packages').sort();
	return groups;
});

const packageGroups = computed(() => {
	if (!props.quotationItems?.Packages || typeof props.quotationItems.Packages !== 'object') return [];
	return Object.keys(props.quotationItems.Packages).sort();
});

// Active tabs with default to Packages
const activeItemTab = computed({
	get: () => _activeItemTab.value || (packageGroups.value.length > 0 ? "Packages" : itemGroups.value[0]) || "",
	set: (val) => { _activeItemTab.value = val; }
});

const activePackageTab = computed({
	get: () => _activePackageTab.value || packageGroups.value[0] || "",
	set: (val) => { _activePackageTab.value = val; }
});

const _activeItemTab = ref("");
const _activePackageTab = ref("");

const getFilteredItemsForGroup = (group) => {
	if (!props.quotationItems || typeof props.quotationItems !== 'object') return [];
	
	let items = [];
	
	// Get items from the specified group
	if (group && props.quotationItems[group]) {
		items = [...props.quotationItems[group]];
	}
	
	// Filter by search term
	if (searchTerm.value.trim()) {
		const term = searchTerm.value.toLowerCase();
		items = items.filter(
			(item) =>
				item.itemCode?.toLowerCase().includes(term) ||
				item.itemName?.toLowerCase().includes(term),
		);
	}
	
	// Map items and mark those that are selected
	return items.map((item) => ({
		...item,
		id: item.itemCode
	}));
};

const getSelectedItemsForGroup = (group) => {
	if (selectedItemsInModal.value.size === 0) return [];
	const allItems = getFilteredItemsForGroup(group);
	return allItems.filter(item => selectedItemsInModal.value.has(item.itemCode));
};

const getFilteredPackageItemsForGroup = (packageGroup) => {
	if (!props.quotationItems?.Packages || typeof props.quotationItems.Packages !== 'object') return [];
	
	let items = [];
	
	// Get items from the specified package group
	if (packageGroup && props.quotationItems.Packages[packageGroup]) {
		items = [...props.quotationItems.Packages[packageGroup]];
	}
	
	// Filter by search term
	if (searchTerm.value.trim()) {
		const term = searchTerm.value.toLowerCase();
		items = items.filter(
			(item) =>
				item.itemCode?.toLowerCase().includes(term) ||
				item.itemName?.toLowerCase().includes(term),
		);
	}
	
	return items.map((item) => ({ 
		...item, 
		id: item.itemCode,
		_selected: selectedItemsInModal.value.has(item.itemCode)
	}));
};

const selectedItemsCount = computed(() => selectedItemsInModal.value.size);

const togglePackageExpansion = (itemCode) => {
	const newExpanded = new Set(expandedPackageItems.value);
	if (newExpanded.has(itemCode)) {
		newExpanded.delete(itemCode);
	} else {
		newExpanded.add(itemCode);
	}
	expandedPackageItems.value = newExpanded;
};

const isPackageExpanded = (itemCode) => {
	return expandedPackageItems.value.has(itemCode);
};

const handleItemSelection = (itemOrRows) => {
	// Handle both single item (from package cards) and array (from DataTable)
	if (Array.isArray(itemOrRows)) {
		// From ItemSelector - merge with existing selection
		const newSelection = new Set(selectedItemsInModal.value);
		const itemCodes = itemOrRows.map(row => row.itemCode);
		
		// Check if all items are already selected
		const allSelected = itemCodes.every(code => newSelection.has(code));
		
		if (allSelected) {
			// Deselect all items
			itemCodes.forEach(code => newSelection.delete(code));
		} else {
			// Select all items
			itemCodes.forEach(code => newSelection.add(code));
		}
		
		selectedItemsInModal.value = newSelection;
	} else {
		// From package card - toggle single item
		const newSelection = new Set(selectedItemsInModal.value);
		if (newSelection.has(itemOrRows.itemCode)) {
			newSelection.delete(itemOrRows.itemCode);
		} else {
			newSelection.add(itemOrRows.itemCode);
		}
		selectedItemsInModal.value = newSelection;
	}
};

const clearSelection = () => {
	selectedItemsInModal.value = new Set();
};

const addItems = () => {
	// Get all selected items from all categories
	const allItems = [];
	
	// Collect from regular categories
	if (props.quotationItems && typeof props.quotationItems === 'object') {
		Object.keys(props.quotationItems).forEach(key => {
			if (key !== 'Packages' && Array.isArray(props.quotationItems[key])) {
				props.quotationItems[key].forEach(item => {
					if (selectedItemsInModal.value.has(item.itemCode)) {
						allItems.push(item);
					}
				});
			}
		});
		
		// Collect from Packages sub-categories
		if (props.quotationItems.Packages && typeof props.quotationItems.Packages === 'object') {
			Object.keys(props.quotationItems.Packages).forEach(subKey => {
				if (Array.isArray(props.quotationItems.Packages[subKey])) {
					props.quotationItems.Packages[subKey].forEach(item => {
						if (selectedItemsInModal.value.has(item.itemCode)) {
							allItems.push(item);
						}
					});
				}
			});
		}
	}
	
	if (allItems.length > 0) {
		emit('add-items', allItems);
		selectedItemsInModal.value = new Set();
	}
};

const handleClose = () => {
	selectedItemsInModal.value = new Set();
	searchTerm.value = "";
	emit('update:visible', false);
};

// Watch modal visibility to reset state when closing
watch(() => props.visible, (newVal) => {
	if (newVal) {
		// Modal is opening - reset to first tabs
		_activeItemTab.value = "";
		_activePackageTab.value = "";
	} else {
		// Modal is closing - reset state
		selectedItemsInModal.value = new Set();
		searchTerm.value = "";
	}
});
</script>

<style scoped>
.items-modal-content {
	height: 70vh;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	overflow: hidden;
}

.tabs-container {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.tabs-container :deep(.p-tabs) {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tabs-container :deep(.p-tabpanels) {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.tabs-container :deep(.p-tabpanel) {
	height: 100%;
	overflow: hidden;
}

.search-section {
	/* margin removed - parent gap handles spacing */
}

.field-label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.tip-section {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background-color: #e3f2fd;
	border: 1px solid #2196f3;
	border-radius: 4px;
	color: #1565c0;
	font-size: 0.9rem;
}

.tip-section i {
	color: #2196f3;
}

.tip-section kbd {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 2px 6px;
	font-family: monospace;
	font-size: 0.85em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.modal-title-container {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.modal-title-container :deep(.p-tab) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.selection-badge {
	background-color: #2196f3;
	color: white;
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.85rem;
	font-weight: 600;
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid #e0e0e0;
	flex-shrink: 0;
}

.nested-tabs {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.nested-tabs :deep(.p-tabs) {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.nested-tabs :deep(.p-tabpanels) {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.nested-tabs :deep(.p-tabpanel) {
	height: 100%;
	overflow: hidden;
}

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

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

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

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

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

.expand-button {
	width: 2rem;
	height: 2rem;
}

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

.package-item-name {
	color: #555;
}

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

.add-package-button {
	justify-self: end;
}

.bom-details {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.bom-header {
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #666;
	font-size: 0.9rem;
}

.bom-item {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #f0f0f0;
}

.bom-item:last-child {
	border-bottom: none;
}

.bom-item-content {
	display: grid;
	grid-template-columns: 32px 24px 120px 1fr 100px;
	gap: 0.5rem;
	padding: 0.5rem;
	align-items: center;
}

.bom-expand-button {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
}

.bom-item-bullet {
	font-size: 0.4rem;
	color: #ccc;
	margin-left: 0.5rem;
}

.package-icon {
	color: #2196f3;
	font-size: 0.9rem;
}

.bom-item-code {
	font-family: monospace;
	color: #666;
	font-size: 0.85rem;
}

.bom-item-name {
	color: #555;
	font-size: 0.85rem;
}

.bom-item-qty {
	color: #888;
	font-size: 0.85rem;
	text-align: right;
}

.nested-bom {
	background-color: #fafafa;
	border-left: 2px solid #e0e0e0;
	margin-left: 1rem;
}
</style>
