<template>
	<div>
		<Modal :visible="showModal" @update:visible="showModal = $event" :options="modalOptions" @confirm="handleClose">
			<template #title>
				<div class="modal-header">
					<i class="pi pi-calendar" style="color: var(--primary-color); font-size: 1.2rem; margin-right: 0.5rem;"></i>
					Meeting Details
				</div>
			</template>
		<div v-if="meeting" class="meeting-details">
			<!-- Status Badge -->
			<div class="status-section">
				<div class="status-badge" :class="`status-${meeting.status?.toLowerCase()}`">
					<i class="pi pi-circle-fill"></i>
					{{ meeting.status }}
				</div>
			</div>

			<!-- Key Information Grid -->
			<div class="info-grid">
				<!-- Customer Name -->
				<div class="info-card" v-if="customerName">
					<div class="info-label">
						<i class="pi pi-user"></i>
						Customer
					</div>
					<div class="info-value">{{ customerName }}</div>
					<div class="info-meta" v-if="meeting.partyType">{{ meeting.partyType }}</div>
				</div>

				<!-- Project Template -->
				<div class="info-card" v-if="meeting.projectTemplate">
					<div class="info-label">
						<i class="pi pi-folder"></i>
						Project Type
					</div>
					<div class="info-value">{{ meeting.projectTemplate }}</div>
				</div>

				<!-- Scheduled Time -->
				<div class="info-card" v-if="meeting.startTime">
					<div class="info-label">
						<i class="pi pi-clock"></i>
						Scheduled
					</div>
					<div class="info-value">{{ formatDateTime(meeting.startTime) }}</div>
					<div class="info-meta" v-if="meeting.endTime">Duration: {{ calculateDuration(meeting.startTime, meeting.endTime) }} min</div>
				</div>

				<!-- Assigned Employee -->
				<div class="info-card" v-if="meeting.assignedEmployee">
					<div class="info-label">
						<i class="pi pi-user-edit"></i>
						Assigned To
					</div>
					<div class="info-value">{{ meeting.assignedEmployee }}</div>
				</div>
			</div>

			<!-- Address Section -->
			<div class="section-divider">
				<i class="pi pi-map-marker"></i>
				<span>Location</span>
			</div>
			<div class="address-section">
				<div class="address-text">
					<strong>{{ addressText }}</strong>
					<div class="meeting-id">ID: {{ meeting.name }}</div>
				</div>
				<div v-if="hasCoordinates" class="map-container">
					<iframe
						:src="mapUrl"
						width="100%"
						height="200"
						frameborder="0"
						style="border: 1px solid var(--surface-border); border-radius: 6px;"
					></iframe>
				</div>
			</div>

			<!-- Contact Information -->
			<div class="section-divider" v-if="contactInfo">
				<i class="pi pi-phone"></i>
				<span>Contact Information</span>
			</div>
			<div class="contact-section" v-if="contactInfo">
				<div class="contact-item">
					<i class="pi pi-user"></i>
					<span class="contact-label">Name:</span>
					<span class="contact-value">{{ contactInfo.fullName }}</span>
				</div>
				<div class="contact-item" v-if="contactInfo.role">
					<i class="pi pi-briefcase"></i>
					<span class="contact-label">Role:</span>
					<span class="contact-value">{{ contactInfo.role }}</span>
				</div>
				<div class="contact-item" v-if="contactInfo.phone">
					<i class="pi pi-phone"></i>
					<span class="contact-label">Phone:</span>
					<a :href="`tel:${contactInfo.phone}`" class="contact-value contact-link">{{ contactInfo.phone }}</a>
				</div>
				<div class="contact-item" v-if="contactInfo.email">
					<i class="pi pi-envelope"></i>
					<span class="contact-label">Email:</span>
					<a :href="`mailto:${contactInfo.email}`" class="contact-value contact-link">{{ contactInfo.email }}</a>
				</div>
			</div>

			<!-- Notes -->
			<div v-if="meeting.notes" class="notes-section">
				<div class="section-divider">
					<i class="pi pi-file-edit"></i>
					<span>Notes</span>
				</div>
				<div class="notes-content">{{ meeting.notes }}</div>
			</div>

			<!-- Additional Info -->
			<div class="additional-info" v-if="meeting.company || meeting.completedBy">
				<div class="info-item" v-if="meeting.company">
					<i class="pi pi-building"></i>
					<span>{{ meeting.company }}</span>
				</div>
				<div class="info-item" v-if="meeting.completedBy">
					<i class="pi pi-check-circle"></i>
					<span>Completed by: {{ meeting.completedBy }}</span>
				</div>
			</div>

			<!-- Action Buttons -->
			<div class="action-buttons">
				<v-btn
					v-if="meeting.status === 'Scheduled'"
					@click="handleMarkComplete"
					color="success"
					variant="elevated"
					:loading="isUpdating"
				>
					<v-icon left>mdi-file-edit</v-icon>
					Create Notes and Complete
				</v-btn>

				<v-btn
					v-if="meeting.status === 'Completed' && meeting.bidNotes"
					@click="handleViewBidNotes"
					color="info"
					variant="elevated"
					:loading="loadingBidNotes"
				>
					<v-icon left>mdi-note-text</v-icon>
					View Bid Notes
				</v-btn>

				<v-btn
					v-if="meeting.status === 'Completed'"
					@click="handleCreateEstimate"
					color="primary"
					variant="elevated"
				>
					<v-icon left>mdi-file-document-outline</v-icon>
					Create Estimate
				</v-btn>

				<v-btn
					v-if="meeting.status !== 'Completed'"
					@click="showCancelWarning = true"
					color="error"
					variant="outlined"
				>
					<v-icon left>mdi-cancel</v-icon>
					Cancel Meeting
				</v-btn>
			</div>
		</div>
	</Modal>

	<!-- Bid Notes Modal -->
	<Modal
		:visible="showBidNotesModal"
		@update:visible="showBidNotesModal = $event"
		:options="bidNotesModalOptions"
		@confirm="handleCloseBidNotes"
	>
		<template #title>
			<div class="modal-header">
				<i class="pi pi-file-edit" style="color: var(--primary-color); font-size: 1.2rem; margin-right: 0.5rem;"></i>
				Bid Meeting Notes
			</div>
		</template>
		<BidMeetingNotes v-if="bidNoteData" :bid-note="bidNoteData" />
		<div v-else-if="bidNotesError" class="error-message">
			<i class="pi pi-exclamation-circle"></i>
			<span>{{ bidNotesError }}</span>
		</div>
		<div v-else class="loading-message">
			<v-progress-circular indeterminate color="primary"></v-progress-circular>
			<span>Loading bid notes...</span>
		</div>
	</Modal>

	<!-- Cancel Meeting Warning Dialog -->
	<v-dialog v-model="showCancelWarning" max-width="500px">
		<v-card>
			<v-card-title class="text-h5 text-error">
				<v-icon color="error" class="mr-2">mdi-alert</v-icon>
				Cancel Bid Meeting?
			</v-card-title>
			<v-card-text class="pt-4">
				<p class="text-body-1 mb-3">
					<strong>Warning:</strong> This will permanently cancel this bid meeting.
				</p>
				<template v-if="meeting?.status === 'Scheduled'">
					<p class="text-body-2 mb-3">
						If you want to:
					</p>
					<ul class="text-body-2 mb-3">
						<li><strong>Reschedule:</strong> Drag and drop the meeting to a different time slot</li>
						<li><strong>Unschedule:</strong> Drag the meeting back to the unscheduled section</li>
					</ul>
					<p class="text-body-2 mb-2">
						<strong>Note:</strong> Cancelling permanently marks the meeting as cancelled, which is different from rescheduling or unscheduling it.
					</p>
				</template>
				<p class="text-body-1 font-weight-bold">
					Are you sure you want to proceed with canceling this meeting?
				</p>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn
					variant="text"
					@click="showCancelWarning = false"
				>
					No, Keep Meeting
				</v-btn>
				<v-btn
					color="error"
					variant="elevated"
					@click="handleCancelMeeting"
					:loading="isCanceling"
				>
					Yes, Cancel Meeting
				</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import Modal from "../common/Modal.vue";
import BidMeetingNotes from "./BidMeetingNotes.vue";
import Api from "../../api";
import { useNotificationStore } from "../../stores/notifications-primevue";

const router = useRouter();
const notificationStore = useNotificationStore();

// Props
const props = defineProps({
	visible: {
		type: Boolean,
		default: false,
	},
	meeting: {
		type: Object,
		default: null,
	},
});

// Emits
const emit = defineEmits(["update:visible", "close", "meetingUpdated", "completeMeeting"]);

// Local state
const isUpdating = ref(false);
const showBidNotesModal = ref(false);
const bidNoteData = ref(null);
const loadingBidNotes = ref(false);
const bidNotesError = ref(null);
const showCancelWarning = ref(false);
const isCanceling = ref(false);

const showModal = computed({
	get() {
		return props.visible;
	},
	set(value) {
		emit("update:visible", value);
	},
});

// Modal options
const modalOptions = computed(() => ({
	maxWidth: "800px",
	showCancelButton: false,
	confirmButtonText: "Close",
	confirmButtonColor: "primary",
}));

const bidNotesModalOptions = computed(() => ({
	maxWidth: "1000px",
	showCancelButton: false,
	confirmButtonText: "Close",
	confirmButtonColor: "primary",
}));

// Computed properties for data extraction
const customerName = computed(() => {
	if (props.meeting?.address?.customerName) {
		return props.meeting.address.customerName;
	}
	if (props.meeting?.partyName) {
		return props.meeting.partyName;
	}
	return null;
});

const addressText = computed(() => {
	return props.meeting?.address?.fullAddress || props.meeting?.address || "";
});

const hasCoordinates = computed(() => {
	const lat = props.meeting?.address?.customLatitude || props.meeting?.address?.latitude;
	const lon = props.meeting?.address?.customLongitude || props.meeting?.address?.longitude;
	return lat && lon && parseFloat(lat) !== 0 && parseFloat(lon) !== 0;
});

const mapUrl = computed(() => {
	if (!hasCoordinates.value) return "";
	const lat = parseFloat(props.meeting?.address?.customLatitude || props.meeting?.address?.latitude);
	const lon = parseFloat(props.meeting?.address?.customLongitude || props.meeting?.address?.longitude);
	const zoom = 15;
	// Using OpenStreetMap embed with marker
	return `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.01},${lat - 0.01},${lon + 0.01},${lat + 0.01}&layer=mapnik&marker=${lat},${lon}`;
});

const contactInfo = computed(() => {
	console.log('=== CONTACT DEBUG ===');
	console.log('Full meeting object:', props.meeting);
	console.log('Meeting contact value:', props.meeting?.contact);
	console.log('Contact type:', typeof props.meeting?.contact);
	
	const contact = props.meeting?.contact;
	if (!contact) {
		console.log('No contact found - returning null');
		return null;
	}
	
	// Handle both string and object contact
	if (typeof contact === 'string') {
		console.log('Contact is a string:', contact);
		return { fullName: contact };
	}
	
	// Log the contact object to see what properties are available
	console.log('Contact object keys:', Object.keys(contact));
	console.log('Contact object:', contact);
	
	const contactData = {
		fullName: contact.name || contact.fullName || contact.contactName || `${contact.firstName || ''} ${contact.lastName || ''}`.trim() || '',
		phone: contact.phone || contact.mobileNo || contact.mobile || contact.phoneNos?.[0]?.phone || '',
		email: contact.emailId || contact.email || contact.emailAddress || contact.emailIds?.[0]?.emailId || '',
		role: contact.role || contact.designation || '',
	};
	
	console.log('Extracted contact data:', contactData);
	return contactData;
});

// Methods
const handleClose = () => {
	emit("close");
};

const handleMarkComplete = async () => {
	if (!props.meeting?.name) return;

	// Check if meeting has a project template
	if (!props.meeting.projectTemplate) {
		notificationStore.addNotification({
			type: "warning",
			title: "Missing Project Template",
			message: "This meeting requires a project template to create notes.",
			duration: 5000,
		});
		return;
	}

	// Open the note form modal
	emit("completeMeeting", props.meeting);
	handleClose();
};

const handleCreateEstimate = () => {
	if (!props.meeting) return;

	const addressText = props.meeting.address?.fullAddress || props.meeting.address || "";
	const template = props.meeting.projectTemplate || "";
	const fromMeeting = props.meeting.name || "";
	const contactName = props.meeting.contact?.name || "";

	router.push({
		path: "/estimate",
		query: {
			new: "true",
			address: addressText,
			"from-meeting": fromMeeting,
			"project-template": template,
			contact: contactName,
		},
	});
};

const calculateDuration = (startTime, endTime) => {
	if (!startTime || !endTime) return 0;
	const start = new Date(startTime);
	const end = new Date(endTime);
	const diffMs = end - start;
	return Math.round(diffMs / (1000 * 60)); // Convert to minutes
};

const formatDateTime = (dateString) => {
	if (!dateString) return "";
	return new Date(dateString).toLocaleString("en-US", {
		weekday: "long",
		year: "numeric",
		month: "long",
		day: "numeric",
	});
};

const handleViewBidNotes = async () => {
	if (!props.meeting?.bidNotes) return;
	
	try {
		loadingBidNotes.value = true;
		bidNotesError.value = null;
		bidNoteData.value = null;
		
		// Fetch the bid meeting note
		const noteData = await Api.getBidMeetingNote(props.meeting.bidNotes);
		
		if (!noteData) {
			throw new Error("Failed to load bid notes");
		}
		
		bidNoteData.value = noteData;
		showBidNotesModal.value = true;
	} catch (error) {
		console.error("Error loading bid notes:", error);
		bidNotesError.value = error.message || "Failed to load bid notes";
		notificationStore.addNotification({
			type: "error",
			title: "Error",
			message: "Failed to load bid notes. Please try again.",
			duration: 5000,
		});
	} finally {
		loadingBidNotes.value = false;
	}
};

const handleCloseBidNotes = () => {
	showBidNotesModal.value = false;
	bidNoteData.value = null;
	bidNotesError.value = null;
};

const handleCancelMeeting = async () => {
	if (!props.meeting?.name) return;
	
	try {
		isCanceling.value = true;
		
		// Update the meeting status to Cancelled
		await Api.updateBidMeeting(props.meeting.name, {
			status: "Cancelled",
		});
		
		showCancelWarning.value = false;
		
		notificationStore.addNotification({
			type: "success",
			title: "Meeting Cancelled",
			message: "The bid meeting has been cancelled successfully.",
			duration: 5000,
		});
		
		// Emit meeting updated event to refresh the calendar
		emit("meetingUpdated");
		
		// Close the modal
		handleClose();
	} catch (error) {
		console.error("Error canceling meeting:", error);
		notificationStore.addNotification({
			type: "error",
			title: "Error",
			message: "Failed to cancel meeting. Please try again.",
			duration: 5000,
		});
	} finally {
		isCanceling.value = false;
	}
};
</script>

<style scoped>
.meeting-details {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

.detail-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-of-type {
	border-bottom: none;
}

.detail-row strong {
	min-width: 120px;
	color: #666;
	font-size: 0.9em;
}

.detail-value {
	flex: 1;
	color: #333;
	word-break: break-word;
}

.action-buttons {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 2px solid #e0e0e0;
	justify-content: center;
	flex-wrap: wrap;
}

.error-message,
.loading-message {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 40px;
	color: #666;
}

.error-message {
	color: #f44336;
}

.error-message i {
	font-size: 1.5rem;
}
</style>
