<template>
	<div class="bid-meeting-notes">
		<div v-if="loading" class="loading-state">
			<v-progress-circular indeterminate color="primary"></v-progress-circular>
			<p>Loading bid notes...</p>
		</div>

		<div v-else-if="error" class="error-state">
			<i class="pi pi-exclamation-triangle"></i>
			<p>{{ error }}</p>
		</div>

		<div v-else-if="bidNote" class="notes-content">
			<!-- General Notes (if exists) -->
			<div v-if="bidNote.notes" class="general-notes">
				<div class="section-header">
					<i class="pi pi-file-edit"></i>
					<span>General Notes</span>
				</div>
				<div class="notes-text">{{ bidNote.notes }}</div>
			</div>

			<!-- Dynamic Fields organized by rows -->
			<div v-if="fieldsByRow && Object.keys(fieldsByRow).length > 0" class="fields-section">
				<div v-for="(rowFields, rowIndex) in fieldsByRow" :key="rowIndex" class="field-row">
					<div v-for="field in rowFields" :key="field.name" class="field-item" :class="`field-type-${field.type.toLowerCase().replace(/\s+/g, '-')}`">
						<!-- Check if field should be displayed based on conditionals -->
						<template v-if="shouldShowField(field)">
							<!-- Check Type -->
							<div v-if="field.type === 'Check'" class="field-check">
								<i :class="field.value === '1' ? 'pi pi-check-square' : 'pi pi-square'" :style="{ color: field.value === '1' ? 'var(--primary-color)' : '#999' }"></i>
								<span class="field-label">{{ field.label }}</span>
							</div>

							<!-- Text Type -->
							<div v-else-if="field.type === 'Text'" class="field-text">
								<div class="field-label">{{ field.label }}</div>
								<div class="field-value">{{ field.value || 'N/A' }}</div>
							</div>

							<!-- Multi-Select Type -->
							<div v-else-if="field.type === 'Multi-Select'" class="field-multiselect">
								<div class="field-label">{{ field.label }}</div>
								<div class="field-value">
									<div v-if="getParsedMultiSelect(field.value).length > 0" class="selected-items">
										<span v-for="(item, idx) in getParsedMultiSelect(field.value)" :key="idx" class="selected-item">
											{{ item }}
										</span>
									</div>
									<div v-else class="no-selection">No items selected</div>
								</div>
							</div>

							<!-- Multi-Select w/ Quantity Type -->
							<div v-else-if="field.type === 'Multi-Select w/ Quantity'" class="field-multiselect-qty">
								<div class="field-label">{{ field.label }}</div>
								<div class="field-value">
									<div v-if="loading" class="loading-items">
										<v-progress-circular size="20" indeterminate></v-progress-circular>
										<span>Loading items...</span>
									</div>
									<div v-else-if="getParsedMultiSelectQty(field.value).length > 0" class="quantity-items">
										<div v-for="(item, idx) in getParsedMultiSelectQty(field.value)" :key="idx" class="quantity-item">
											<span class="item-label">{{ getItemLabel(field, item) }}</span>
											<span class="item-quantity">Qty: {{ item.quantity }}</span>
										</div>
									</div>
									<div v-else class="no-selection">No items selected</div>
								</div>
							</div>

							<!-- Default/Unknown Type -->
							<div v-else class="field-unknown">
								<div class="field-label">{{ field.label }}</div>
								<div class="field-value">{{ field.value || 'N/A' }}</div>
								<div class="field-type-note">(Type: {{ field.type }})</div>
							</div>
						</template>
					</div>
				</div>
			</div>

			<!-- Empty State -->
			<div v-else class="empty-state">
				<i class="pi pi-inbox"></i>
				<p>No fields to display</p>
			</div>

			<!-- Header Information (moved to bottom) -->
			<div class="notes-header">
				<div class="header-info">
					<div class="info-item">
						<span class="label">Created By:</span>
						<span class="value">{{ bidNote.owner }}</span>
					</div>
					<div class="info-item">
						<span class="label">Submitted on:</span>
						<span class="value">{{ formatDate(bidNote.creation) }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import Api from "../../api";
import { useNotificationStore } from "../../stores/notifications-primevue";

const notificationStore = useNotificationStore();

// Props
const props = defineProps({
	bidNote: {
		type: Object,
		required: true,
	},
});

// Local state
const loading = ref(false);
const error = ref(null);
const doctypeCache = ref({});

// Organize fields by row
const fieldsByRow = computed(() => {
	if (!props.bidNote?.fields) return {};
	
	const rows = {};
	props.bidNote.fields.forEach(field => {
		const rowNum = field.row || 0;
		if (!rows[rowNum]) {
			rows[rowNum] = [];
		}
		rows[rowNum].push(field);
	});
	
	// Sort fields within each row by column
	Object.keys(rows).forEach(rowNum => {
		rows[rowNum].sort((a, b) => (a.column || 0) - (b.column || 0));
	});
	
	return rows;
});

// Methods
const shouldShowField = (field) => {
	// If no conditional, always show
	if (!field.conditionalOnField) {
		return true;
	}
	
	// Find the field this one depends on
	const parentField = props.bidNote.fields.find(f => f.label === field.conditionalOnField);
	if (!parentField) {
		return true; // If parent not found, show anyway
	}
	
	// For checkboxes, show if checked
	if (parentField.type === 'Check') {
		return parentField.value === '1';
	}
	
	// If conditional value is specified, check against it
	if (field.conditionalOnValue) {
		return parentField.value === field.conditionalOnValue;
	}
	
	// Otherwise, show if parent has any value
	return !!parentField.value;
};

const getParsedMultiSelect = (value) => {
	if (!value) return [];
	try {
		const parsed = JSON.parse(value);
		return Array.isArray(parsed) ? parsed : [];
	} catch (e) {
		console.error("Error parsing multi-select value:", e);
		return [];
	}
};

const getParsedMultiSelectQty = (value) => {
	if (!value) return [];
	try {
		const parsed = JSON.parse(value);
		return Array.isArray(parsed) ? parsed : [];
	} catch (e) {
		console.error("Error parsing multi-select with quantity value:", e);
		return [];
	}
};

const getItemLabel = (field, item) => {
	// If we have a cached label from doctype lookup
	if (item.fetchedLabel) {
		return item.fetchedLabel;
	}
	
	// If label is provided in the item itself
	if (item.label) {
		return item.label;
	}
	
	// Otherwise use the item ID
	return item.item || 'Unknown Item';
};

const loadDoctypeLabels = async () => {
	if (!props.bidNote?.fields) return;
	
	// Check if there are quantities to fetch
	if (!props.bidNote.quantities || props.bidNote.quantities.length === 0) {
		return;
	}
	
	// Find all Multi-Select w/ Quantity fields that have valueDoctype
	const quantityFields = props.bidNote.fields.filter(
		f => f.type === 'Multi-Select w/ Quantity' && f.valueDoctype
	);
	
	if (quantityFields.length === 0) {
		return;
	}
	
	// For each field type (valueDoctype), collect all item IDs and fetch them in batch
	for (const field of quantityFields) {
		const items = getParsedMultiSelectQty(field.value);
		if (items.length === 0) continue;
		
		// Collect all item IDs for this field
		const itemIds = items.map(item => item.item).filter(Boolean);
		if (itemIds.length === 0) continue;
		
		// Check which items are not already cached
		const uncachedItemIds = itemIds.filter(itemId => {
			const cacheKey = `${field.valueDoctype}:${itemId}`;
			return !doctypeCache.value[cacheKey];
		});
		
		// If all items are cached, skip the API call
		if (uncachedItemIds.length === 0) {
			// Just map the cached data to the items
			items.forEach(item => {
				if (item.item) {
					const cacheKey = `${field.valueDoctype}:${item.item}`;
					const cachedData = doctypeCache.value[cacheKey];
					if (cachedData && field.doctypeLabelField) {
						item.fetchedLabel = cachedData[field.doctypeLabelField] || item.item;
					}
				}
			});
			continue;
		}
		
		try {
			// Build filter to fetch all uncached items at once
			const filters = {
				name: ['in', uncachedItemIds]
			};
			
			// Fetch all items in one API call
			const fetchedItems = await Api.getDocsList(field.valueDoctype, ["*"], filters);
			
			// Cache the fetched items
			if (Array.isArray(fetchedItems)) {
				fetchedItems.forEach(docData => {
					const cacheKey = `${field.valueDoctype}:${docData.name}`;
					doctypeCache.value[cacheKey] = docData;
				});
			}
			
			// Now map the labels to all items (including previously cached ones)
			items.forEach(item => {
				if (item.item) {
					const cacheKey = `${field.valueDoctype}:${item.item}`;
					const cachedData = doctypeCache.value[cacheKey];
					if (cachedData && field.doctypeLabelField) {
						item.fetchedLabel = cachedData[field.doctypeLabelField] || item.item;
					}
				}
			});
		} catch (error) {
			console.error(`Error fetching doctype ${field.valueDoctype}:`, error);
			// On error, items will just show their IDs
		}
	}
};

const formatDate = (dateString) => {
	if (!dateString) return '';
	return new Date(dateString).toLocaleString('en-US', {
		year: 'numeric',
		month: 'short',
		day: 'numeric',
		hour: '2-digit',
		minute: '2-digit',
	});
};

// Lifecycle
onMounted(async () => {
	try {
		loading.value = true;
		await loadDoctypeLabels();
	} catch (err) {
		console.error("Error loading bid note details:", err);
		error.value = "Failed to load some field details";
	} finally {
		loading.value = false;
	}
});
</script>

<style scoped>
.bid-meeting-notes {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.loading-state,
.error-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
	text-align: center;
	color: #666;
}

.error-state {
	color: #f44336;
}

.error-state i {
	font-size: 3rem;
	margin-bottom: 16px;
}

.notes-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.notes-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 12px 16px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-top: 20px;
}

.header-info {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 120px;
}

.info-item .label {
	font-size: 0.75em;
	opacity: 0.9;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.info-item .value {
	font-weight: 600;
	font-size: 0.9em;
}

.general-notes {
	background: #f8f9fa;
	border-left: 4px solid #667eea;
	padding: 16px;
	border-radius: 4px;
}

.section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #667eea;
	margin-bottom: 12px;
	font-size: 1.1em;
}

.section-header i {
	font-size: 1.2em;
}

.notes-text {
	color: #333;
	line-height: 1.6;
	white-space: pre-wrap;
}

.fields-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
}

.field-item {
	background: white;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 12px;
	transition: all 0.2s;
}

.field-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-color: #667eea;
}

.field-check {
	display: flex;
	align-items: center;
	gap: 8px;
}

.field-check i {
	font-size: 1.2em;
}

.field-check .field-label {
	font-weight: 500;
	color: #333;
}

.field-text,
.field-multiselect,
.field-multiselect-qty,
.field-unknown {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field-label {
	font-weight: 600;
	color: #667eea;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.field-value {
	color: #333;
	line-height: 1.5;
}

.selected-items {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.selected-item {
	background: #e3f2fd;
	color: #1976d2;
	padding: 4px 12px;
	border-radius: 16px;
	font-size: 0.85em;
	font-weight: 500;
}

.quantity-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.quantity-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f5f5f5;
	padding: 8px 12px;
	border-radius: 4px;
	border-left: 3px solid #667eea;
}

.item-label {
	font-weight: 500;
	color: #333;
}

.item-quantity {
	background: #667eea;
	color: white;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.85em;
	font-weight: 600;
}

.loading-items {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #666;
	font-size: 0.9em;
}

.no-selection {
	color: #999;
	font-style: italic;
	font-size: 0.9em;
}

.field-type-note {
	font-size: 0.75em;
	color: #999;
	margin-top: 4px;
	font-style: italic;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	color: #999;
}

.empty-state i {
	font-size: 3rem;
	margin-bottom: 16px;
	opacity: 0.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.header-info {
		grid-template-columns: 1fr;
	}
	
	.field-row {
		grid-template-columns: 1fr;
	}
}
</style>
