<template>
	<Modal v-model:visible="showModal" :options="modalOptions" @confirm="handleClose">
		<template #title>Meeting Details</template>
		<div v-if="meeting" class="meeting-details">
			<div class="detail-row">
				<v-icon class="mr-2">mdi-map-marker</v-icon>
				<strong>Addresss:</strong> {{ meeting.address.fullAddress }}
			</div>
			<div class="detail-row" v-if="meeting.client">
				<v-icon class="mr-2">mdi-account</v-icon>
				<strong>Client:</strong> {{ meeting.client }}
			</div>
			<div class="detail-row">
				<v-icon class="mr-2">mdi-calendar</v-icon>
				<strong>Date:</strong> {{ formatDate(meeting.date) }}
			</div>
			<div class="detail-row">
				<v-icon class="mr-2">mdi-clock</v-icon>
				<strong>Time:</strong> {{ formatTimeDisplay(meeting.scheduledTime) }}
			</div>
			<div class="detail-row" v-if="meeting.duration">
				<v-icon class="mr-2">mdi-timer</v-icon>
				<strong>Duration:</strong> {{ meeting.duration }} minutes
			</div>
			<div class="detail-row" v-if="meeting.notes">
				<v-icon class="mr-2">mdi-note-text</v-icon>
				<strong>Notes:</strong> {{ meeting.notes }}
			</div>
			<div class="detail-row" v-if="meeting.status">
				<v-icon class="mr-2">mdi-check-circle</v-icon>
				<strong>Status:</strong> {{ meeting.status }}
			</div>
		</div>
	</Modal>
</template>

<script setup>
import { computed } from "vue";
import Modal from "../common/Modal.vue";

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

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

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

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

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

const formatTimeDisplay = (time) => {
	if (!time) return "";
	const [hours, minutes] = time.split(":").map(Number);
	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
	const ampm = hours >= 12 ? "PM" : "AM";
	return `${displayHour}:${minutes.toString().padStart(2, "0")} ${ampm}`;
};

const formatDate = (dateStr) => {
	if (!dateStr) return "";
	const date = new Date(dateStr);
	return date.toLocaleDateString("en-US", {
		weekday: "long",
		year: "numeric",
		month: "long",
		day: "numeric",
	});
};
</script>

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

.detail-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
}

.detail-row strong {
	margin-right: 8px;
	color: #333;
}
</style>
