<template>
	<div>
		<div class="form-section">
			<div class="section-header">
				<i class="pi pi-user" style="color: var(--primary-color); font-size: 1.2rem;"></i>
				<h3>Client Information</h3>
			</div>
			<div class="form-grid">
				<div class="form-field">
					<label for="customer-type"><i class="pi pi-building" style="font-size: 0.75rem; margin-right: 0.25rem;"></i>Customer Type <span class="required">*</span></label>
					<Select
						id="customer-type"
						v-model="localFormData.customerType"
						:options="customerTypeOptions"
						:disabled="isSubmitting || (!isNewClient && !isEditMode)"
						placeholder="Select customer type"
						class="w-full"
					/>
				</div>
				<div class="form-field">
					<label for="customer-name"><i class="pi pi-id-card" style="font-size: 0.75rem; margin-right: 0.25rem;"></i>Customer Name <span class="required">*</span></label>
					<div class="input-with-button">
						<InputText
							id="customer-name"
							v-model="localFormData.customerName"
							:disabled="isSubmitting || isEditMode || localFormData.customerType !== 'Company'"
							placeholder="Enter customer name"
							class="w-full"
						/>
						<Button
							label="Check"
							size="small"
							icon="pi pi-check-circle"
							class="check-btn"
							@click="checkCustomerExists"
							:disabled="isSubmitting"
						/>
						<Button
							v-if="!isNewClient && !isEditMode"
							@click="searchCustomers"
							:disabled="isSubmitting || !localFormData.customerName.trim()"
							size="small"
							icon="pi pi-search"
							class="search-btn"
						/>
					</div>
				</div>
			</div>
		</div>

		<!-- Customer Search Results Modal -->
		<Dialog
			:visible="showCustomerSearchModal"
			@update:visible="showCustomerSearchModal = $event"
			header="Select Customer"
			:modal="true"
			class="search-dialog"
		>
			<div class="search-results">
				<div v-if="customerSearchResults.length === 0" class="no-results">
					<i class="pi pi-info-circle"></i>
					<p>No customers found matching your search.</p>
				</div>
				<div v-else class="results-list">
					<div
						v-for="(customerName, index) in customerSearchResults"
						:key="index"
						class="result-item"
						@click="selectCustomer(customerName)"
					>
						<strong>{{ customerName }}</strong>
						<i class="pi pi-chevron-right"></i>
					</div>
				</div>
			</div>
			<template #footer>
				<Button label="Cancel" severity="secondary" @click="showCustomerSearchModal = false" />
			</template>
		</Dialog>
	</div>
</template><script setup>
import { ref, watch, computed } from "vue";
import InputText from "primevue/inputtext";
import Select from "primevue/select";
import Dialog from "primevue/dialog";
import Api from "../../api";
import { useNotificationStore } from "../../stores/notifications-primevue";

const props = defineProps({
	formData: {
		type: Object,
		required: true,
	},
	isSubmitting: {
		type: Boolean,
		default: false,
	},
	isEditMode: {
		type: Boolean,
		default: false,
	},
});

const emit = defineEmits(["update:formData", "newClientToggle", "customerSelected"]);

const notificationStore = useNotificationStore();

const localFormData = computed({
	get: () => props.formData,
	set: (value) => emit("update:formData", value),
});

const isNewClient = ref(true);
const showCustomerSearchModal = ref(false);
const customerSearchResults = ref([]);
const customerTypeOptions = ["Individual", "Partnership", "Company"];

const mapContactsFromClient = (contacts = []) => {
	if (!Array.isArray(contacts) || contacts.length === 0) {
		return [
			{
				firstName: "",
				lastName: "",
				phoneNumber: "",
				email: "",
				contactRole: "",
				isPrimary: true,
			},
		];
	}

	return contacts.map((contact, index) => ({
		firstName: contact.firstName || "",
		lastName: contact.lastName || "",
		phoneNumber: contact.phoneNumber || contact.phone || contact.mobileNo || "",
		email: contact.email || contact.emailId || contact.customEmail || "",
		contactRole: contact.contactRole || contact.role || "",
		isPrimary: contact.isPrimary ?? contact.isPrimaryContact ?? index === 0,
	}));
};

// Watch for toggle changes
watch(isNewClient, (newValue) => {
	emit("newClientToggle", newValue);
});

// Watch for changes that affect customer name
watch(
	() => localFormData.value,
	(newData) => {
		if (newData.customerType === "Individual" && newData.contacts && newData.contacts.length > 0) {
			const primary = newData.contacts.find((c) => c.isPrimary) || newData.contacts[0];
			const firstName = primary.firstName || "";
			const lastName = primary.lastName || "";
			const fullName = `${firstName} ${lastName}`.trim();
			if (fullName !== newData.customerName) {
				newData.customerName = fullName;
			}
		}
	},
	{ deep: true },
);

const searchCustomers = async () => {
	const searchTerm = localFormData.value.customerName.trim();
	if (!searchTerm) return;

	try {
		// Get all customers and filter by search term
		const allCustomers = await Api.getClientNames(searchTerm);
		const matchingNames = allCustomers.filter((name) =>
			name.toLowerCase().includes(searchTerm.toLowerCase()),
		);

		if (matchingNames.length === 0) {
			notificationStore.addWarning("No customers found matching your search criteria.");
		} else {
			// Store just the names for display
			customerSearchResults.value = matchingNames;
			showCustomerSearchModal.value = true;
		}
	} catch (error) {
		console.error("Error searching customers:", error);
		notificationStore.addError("Failed to search customers. Please try again.");
	}
};

const checkCustomerExists = async () => {
	const searchTerm = (localFormData.value.customerName || "").trim();
	if (!searchTerm) {
		notificationStore.addWarning("Please ensure a customer name is entered before checking.");
		return;
	}

	try {
		const client = await Api.getClient(searchTerm);

		if (!client) {
			notificationStore.addInfo("Customer is not in our system yet.");
			return;
		}

		localFormData.value.customerName = client.customerName || searchTerm;
		localFormData.value.customerType = client.customerType || localFormData.value.customerType;
		localFormData.value.contacts = mapContactsFromClient(client.contacts);

		isNewClient.value = false;
		showCustomerSearchModal.value = false;

		emit("customerSelected", client);
		notificationStore.addSuccess(
			`Customer ${localFormData.value.customerName} found and loaded from system.`,
		);
	} catch (error) {
		console.error("Error checking customer:", error);
		const message =
			typeof error?.message === "string" &&
			error.message.toLowerCase().includes("not found")
				? "Customer is not in our system yet."
				: "Failed to check customer. Please try again.";

		if (message.includes("not in our system")) {
			notificationStore.addInfo(message);
		} else {
			notificationStore.addError(message);
		}
	}
};

const selectCustomer = async (customerName) => {
	try {
		// Fetch full customer data
		const clientData = await Api.getClient(customerName);

		localFormData.value.customerName = clientData.customerName;
		localFormData.value.customerType = clientData.customerType;
		localFormData.value.contacts = mapContactsFromClient(clientData.contacts);
		showCustomerSearchModal.value = false;

		// Pass the full client data including contacts
		emit("customerSelected", clientData);
	} catch (error) {
		console.error(`Error fetching client ${customerName}:`, error);
		notificationStore.addError("Failed to load customer details. Please try again.");
	}
};

defineExpose({
	isNewClient,
});
</script>

<style scoped>
.form-section {
	background: var(--surface-card);
	border-radius: 6px;
	padding: 0.75rem;
	border: 1px solid var(--surface-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease;
}

.form-section:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.section-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--surface-border);
}

.section-header h3 {
	margin: 0;
	color: var(--text-color);
	font-size: 1.1rem;
	font-weight: 600;
}

.toggle-container {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.85rem;
}

.toggle-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text-color-secondary);
	cursor: pointer;
	user-select: none;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.form-field label {
	font-weight: 500;
	color: var(--text-color);
	font-size: 0.85rem;
	display: flex;
	align-items: center;
}

.required {
	color: var(--red-500);
}

.input-with-button {
	display: flex;
	gap: 0.375rem;
	align-items: stretch;
}

.w-full {
	width: 100% !important;
}

.search-dialog {
	max-width: 500px;
}

.search-results {
	min-height: 200px;
}

.no-results {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-color-secondary);
}

.no-results i {
	font-size: 2em;
	color: var(--orange-500);
	margin-bottom: 10px;
	display: block;
}

.results-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.result-item {
	padding: 1rem;
	border: 1px solid var(--surface-border);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.result-item:hover {
	background-color: var(--surface-hover);
	border-color: var(--primary-color);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.customer-info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.customer-type {
	font-size: 0.85rem;
	color: var(--text-color-secondary);
}

.iconoir-btn {
	background: none;
	border: none;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.2s;
}

.iconoir-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.iconoir-btn:hover:not(:disabled) {
	background: var(--surface-hover);
}

.check-btn {
	white-space: nowrap;
	flex-shrink: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	height: 100%;
}

.search-btn {
	white-space: nowrap;
	flex-shrink: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	height: 100%;
}

@media (max-width: 768px) {
	.form-grid {
		grid-template-columns: 1fr;
	}

	.section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}
</style>
