<template>
	<div class="property-details">
		<h3>Property Details</h3>

		<div class="details-grid">
			<!-- Address Information -->
			<div class="detail-section">
				<div class="section-header">
					<i class="pi pi-map-marker"></i>
					<h4>Address</h4>
				</div>
				<div class="address-info">
					<p class="full-address">{{ fullAddress }}</p>
					<div class="address-badges">
						<Badge
							v-if="addressData.isPrimaryAddress && !addressData.isServiceAddress"
							value="Billing Only"
							severity="info"
						/>
						<Badge
							v-if="addressData.isPrimaryAddress && addressData.isServiceAddress"
							value="Billing & Service"
							severity="success"
						/>
						<Badge
							v-if="!addressData.isPrimaryAddress && addressData.isServiceAddress"
							value="Service Address"
							severity="secondary"
						/>
					</div>
				</div>
			</div>

			<!-- Associated Companies -->
			<div class="detail-section">
				<div class="section-header">
					<i class="pi pi-building"></i>
					<h4>Companies</h4>
				</div>
				<div v-if="associatedCompanies.length > 0" class="companies-list">
					<div
						v-for="company in associatedCompanies"
						:key="company"
						class="company-item"
					>
						<i class="pi pi-building"></i>
						<span>{{ company }}</span>
					</div>
				</div>
				<div v-else class="empty-state">
					<i class="pi pi-building"></i>
					<p>No companies associated</p>
				</div>
			</div>

			<!-- Primary Contact -->
			<div class="detail-section">
				<div class="section-header">
					<i class="pi pi-user"></i>
					<h4>Primary Contact</h4>
				</div>
				<div v-if="primaryContact" class="contact-card primary">
					<div class="contact-badge">
						<Badge value="Primary" severity="success" />
					</div>
					<div class="contact-info">
						<h5>{{ primaryContactName }}</h5>
						<div class="contact-details">
							<div class="contact-detail">
								<i class="pi pi-envelope"></i>
								<span>{{ primaryContactEmail }}</span>
							</div>
							<div class="contact-detail">
								<i class="pi pi-phone"></i>
								<span>{{ primaryContactPhone }}</span>
							</div>
							<div v-if="primaryContact.role" class="contact-detail">
								<i class="pi pi-briefcase"></i>
								<span>{{ primaryContact.role }}</span>
							</div>
						</div>
					</div>
				</div>
				<div v-else class="empty-state">
					<i class="pi pi-user-minus"></i>
					<p>No primary contact</p>
				</div>
			</div>

			<!-- Other Contacts -->
			<div class="detail-section">
				<div class="section-header">
					<i class="pi pi-users"></i>
					<h4>Other Contacts</h4>
				</div>
				<div v-if="otherContacts.length > 0" class="contacts-grid">
					<div
						v-for="contact in otherContacts"
						:key="contact.name"
						class="contact-card small"
					>
						<div class="contact-info-compact">
							<span class="contact-name">{{ getContactName(contact) }}</span>
							<span class="contact-email">{{ getContactEmail(contact) }}</span>
							<span class="contact-phone">{{ getContactPhone(contact) }}</span>
							<span v-if="contact.role" class="contact-role">{{ contact.role }}</span>
						</div>
					</div>
				</div>
				<div v-else class="empty-state">
					<i class="pi pi-user-minus"></i>
					<p>No other contacts</p>
				</div>
			</div>

			<!-- Edit Mode -->
			<div v-if="editMode" class="detail-section full-width">
				<div class="section-header">
					<i class="pi pi-pencil"></i>
					<h4>Edit Contacts</h4>
				</div>
				<div class="contacts-edit">
					<div class="edit-instructions">
						<i class="pi pi-info-circle"></i>
						<span>Select contacts to associate with this address. One must be marked as primary.</span>
					</div>

					<div class="contacts-list">
						<div
							v-for="contact in allContacts"
							:key="contact.name"
							class="contact-checkbox-item"
							:class="{ 'is-selected': isContactSelected(contact) }"
						>
							<Checkbox
								:model-value="isContactSelected(contact)"
								:binary="true"
								@update:model-value="toggleContact(contact)"
								:input-id="`contact-${contact.name}`"
							/>
							<label :for="`contact-${contact.name}`" class="contact-label">
								<div class="contact-info-inline">
									<span class="contact-name">{{ getContactName(contact) }}</span>
									<span class="contact-email">{{ getContactEmail(contact) }}</span>
									<span class="contact-phone">{{ getContactPhone(contact) }}</span>
								</div>
							</label>
							<div v-if="isContactSelected(contact)" class="primary-checkbox">
								<Checkbox
									:model-value="isPrimaryContact(contact)"
									:binary="true"
									@update:model-value="setPrimaryContact(contact)"
									:input-id="`primary-${contact.name}`"
								/>
								<label :for="`primary-${contact.name}`">Primary</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Map Section -->
			<div class="detail-section full-width">
				<div class="section-header">
					<i class="pi pi-map"></i>
					<h4>Location</h4>
				</div>
				<LeafletMap
					:latitude="latitude"
					:longitude="longitude"
					:address-title="addressData.addressTitle || 'Property Location'"
					map-height="350px"
					:zoom-level="16"
				/>
				<div v-if="latitude && longitude" class="coordinates-info">
					<small>
						<strong>Coordinates:</strong>
						{{ parseFloat(latitude).toFixed(6) }}, {{ parseFloat(longitude).toFixed(6) }}
					</small>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import Badge from "primevue/badge";
import Checkbox from "primevue/checkbox";
import LeafletMap from "../common/LeafletMap.vue";
import DataUtils from "../../utils";

const props = defineProps({
	addressData: {
		type: Object,
		required: true,
	},
	allContacts: {
		type: Array,
		default: () => [],
	},
	editMode: {
		type: Boolean,
		default: false,
	},
});

const emit = defineEmits(["update:addressContacts", "update:primaryContact"]);

// Local state for editing
const selectedContactNames = ref([]);
const selectedPrimaryContactName = ref(null);

// Initialize from props when edit mode is enabled
watch(() => props.editMode, (isEditMode) => {
	if (isEditMode) {
		// Initialize selected contacts from address
		selectedContactNames.value = (props.addressData.contacts || [])
			.map(c => c.contact)
			.filter(Boolean);
		selectedPrimaryContactName.value = props.addressData.primaryContact || null;
	}
});

// Full address
const fullAddress = computed(() => {
	return DataUtils.calculateFullAddress(props.addressData);
});

// Get contacts associated with this address
const addressContacts = computed(() => {
	if (!props.addressData.contacts || !props.allContacts) return [];
	
	const addressContactNames = props.addressData.contacts.map(c => c.contact);
	return props.allContacts.filter(c => addressContactNames.includes(c.name));
});

// Primary contact
const primaryContact = computed(() => {
	if (!props.addressData.primaryContact || !props.allContacts) return null;
	return props.allContacts.find(c => c.name === props.addressData.primaryContact);
});

const primaryContactName = computed(() => {
	if (!primaryContact.value) return "N/A";
	return primaryContact.value.fullName || primaryContact.value.name || "N/A";
});

const primaryContactEmail = computed(() => {
	if (!primaryContact.value) return "N/A";
	return primaryContact.value.emailId || primaryContact.value.customEmail || "N/A";
});

const primaryContactPhone = computed(() => {
	if (!primaryContact.value) return "N/A";
	return primaryContact.value.phone || primaryContact.value.mobileNo || "N/A";
});

// Other contacts (non-primary)
const otherContacts = computed(() => {
	return addressContacts.value.filter(c => c.name !== props.addressData.primaryContact);
});

// Map coordinates
const latitude = computed(() => {
	return props.addressData.customLatitude || props.addressData.latitude || null;
});

const longitude = computed(() => {
	return props.addressData.customLongitude || props.addressData.longitude || null;
});

// Associated companies
const associatedCompanies = computed(() => {
	if (!props.addressData.companies) return [];
	return props.addressData.companies.map(company => company.company).filter(Boolean);
});

// Helper functions for contact display
const getContactName = (contact) => {
	return contact.fullName || contact.name || "N/A";
};

const getContactEmail = (contact) => {
	return contact.emailId || contact.customEmail || "N/A";
};

const getContactPhone = (contact) => {
	return contact.phone || contact.mobileNo || "N/A";
};

// Edit mode functions
const isContactSelected = (contact) => {
	return selectedContactNames.value.includes(contact.name);
};

const isPrimaryContact = (contact) => {
	return selectedPrimaryContactName.value === contact.name;
};

const toggleContact = (contact) => {
	const index = selectedContactNames.value.indexOf(contact.name);
	if (index > -1) {
		// Removing contact
		selectedContactNames.value.splice(index, 1);
		// If this was the primary contact, clear it
		if (selectedPrimaryContactName.value === contact.name) {
			selectedPrimaryContactName.value = null;
		}
	} else {
		// Adding contact
		selectedContactNames.value.push(contact.name);
	}
	emitChanges();
};

const setPrimaryContact = (contact) => {
	if (isContactSelected(contact)) {
		selectedPrimaryContactName.value = contact.name;
		emitChanges();
	}
};

const emitChanges = () => {
	emit("update:addressContacts", selectedContactNames.value);
	emit("update:primaryContact", selectedPrimaryContactName.value);
};
</script>

<style scoped>
.property-details {
	background: var(--surface-card);
	border-radius: 12px;
	padding: 0.75rem;
	border: 1px solid var(--surface-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin-bottom: 1rem;
}

.property-details > h3 {
	margin: 0 0 0.75rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-color);
}

.details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: start;
}

.detail-section {
	background: var(--surface-ground);
	border-radius: 8px;
	padding: 0.75rem;
}

.detail-section.full-width {
	grid-column: span 2;
}

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

.section-header i {
	font-size: 1rem;
	color: var(--primary-color);
}

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

.address-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.full-address {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-color);
	margin: 0;
}

.address-badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Contacts Display Mode */
.contacts-display {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.contact-card {
	background: var(--surface-card);
	border-radius: 6px;
	padding: 0.75rem;
	border: 1px solid var(--surface-border);
}

.contact-card.primary {
	border: 2px solid var(--green-500);
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

.contact-badge {
	margin-bottom: 0.5rem;
}

.contact-info h5 {
	margin: 0 0 0.5rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-color);
}

.contact-details {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.contact-detail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.contact-detail i {
	font-size: 0.9rem;
	color: var(--primary-color);
	min-width: 18px;
}

.contact-detail span {
	font-size: 0.9rem;
	color: var(--text-color);
}

/* Other Contacts */
.other-contacts h6 {
	margin: 0 0 0.75rem 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-color-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.contacts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
}

.contact-card.small {
	padding: 0.75rem;
}

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

.contact-info-compact .contact-name {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--text-color);
}

.contact-info-compact .contact-email,
.contact-info-compact .contact-phone,
.contact-info-compact .contact-role {
	font-size: 0.85rem;
	color: var(--text-color-secondary);
}

/* Contacts Edit Mode */
.contacts-edit {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.edit-instructions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--blue-50);
	border-radius: 6px;
	border: 1px solid var(--blue-200);
}

.edit-instructions i {
	font-size: 1.25rem;
	color: var(--blue-500);
}

.edit-instructions span {
	font-size: 0.9rem;
	color: var(--blue-700);
}

.contacts-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.contact-checkbox-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: var(--surface-card);
	border-radius: 6px;
	border: 2px solid var(--surface-border);
	transition: all 0.2s ease;
}

.contact-checkbox-item.is-selected {
	border-color: var(--primary-color);
	background: var(--primary-50);
}

.contact-label {
	flex: 1;
	cursor: pointer;
}

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

.contact-info-inline .contact-name {
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-color);
}

.contact-info-inline .contact-email,
.contact-info-inline .contact-phone {
	font-size: 0.875rem;
	color: var(--text-color-secondary);
}

.primary-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--green-50);
	border-radius: 4px;
	border: 1px solid var(--green-200);
}

.primary-checkbox label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--green-700);
	cursor: pointer;
}

/* Companies */
.companies-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.company-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	background: var(--surface-card);
	border-radius: 4px;
	border: 1px solid var(--surface-border);
}

.company-item i {
	font-size: 0.9rem;
	color: var(--primary-color);
	min-width: 18px;
}

.company-item span {
	font-size: 0.9rem;
	color: var(--text-color);
	font-weight: 500;
}

/* Map */
.coordinates-info {
	margin-top: 0.75rem;
	text-align: center;
	color: var(--text-color-secondary);
	padding-top: 0.75rem;
	border-top: 1px solid var(--surface-border);
}
</style>
