<template>
	<v-dialog
		v-model="localVisible"
		:persistent="options.persistent || false"
		:fullscreen="options.fullscreen || false"
		:max-width="options.maxWidth || '500px'"
		:width="options.width"
		:height="options.height"
		:attach="options.attach"
		:transition="options.transition || 'dialog-transition'"
		:scrollable="options.scrollable || false"
		:retain-focus="options.retainFocus !== false"
		:close-on-back="options.closeOnBack !== false"
		:close-on-content-click="options.closeOnContentClick || false"
		:overlay-color="options.overlayColor"
		:overlay-opacity="options.overlayOpacity"
		:z-index="options.zIndex"
		:class="options.dialogClass"
		@click:outside="handleOutsideClick"
		@keydown.esc="handleEscapeKey"
	>
		<v-card
			:class="[
				'modal-card',
				options.cardClass,
				{
					'elevation-0': options.flat,
					'rounded-0': options.noRadius,
				},
			]"
			:color="options.cardColor"
			:variant="options.cardVariant"
			:elevation="options.elevation"
		>
			<!-- Header Section -->
			<v-card-title
				v-if="options.showHeader !== false"
				:class="[
					'modal-header d-flex align-center justify-space-between',
					options.headerClass,
				]"
			>
				<div class="modal-title">
					<slot name="title">
						{{ options.title }}
					</slot>
				</div>

				<!-- Close button -->
				<v-btn
					v-if="options.showCloseButton !== false && !options.persistent"
					icon
					variant="text"
					size="small"
					:color="options.closeButtonColor || 'grey'"
					@click="closeModal"
					class="modal-close-btn"
				>
					<v-icon>{{ options.closeIcon || "mdi-close" }}</v-icon>
				</v-btn>
			</v-card-title>

			<v-divider v-if="options.showHeaderDivider && options.showHeader !== false" />

			<!-- Content Section -->
			<v-card-text
				:class="[
					'modal-content',
					options.contentClass,
					{
						'pa-0': options.noPadding,
						'overflow-y-auto': options.scrollable,
					},
				]"
				:style="contentStyle"
			>
				<slot>
					<!-- Default content if no slot provided -->
					<div v-if="options.message" v-html="options.message"></div>
				</slot>
			</v-card-text>

			<!-- Actions Section -->
			<v-card-actions
				v-if="options.showActions !== false || $slots.actions"
				:class="[
					'modal-actions',
					options.actionsClass,
					{
						'justify-end': options.actionsAlign === 'right',
						'justify-center': options.actionsAlign === 'center',
						'justify-start': options.actionsAlign === 'left',
						'justify-space-between': options.actionsAlign === 'space-between',
					},
				]"
			>
				<slot name="actions" :close="closeModal" :options="options">
					<!-- Default action buttons -->
					<v-btn
						v-if="options.showCancelButton !== false"
						:color="options.cancelButtonColor || 'grey'"
						:variant="options.cancelButtonVariant || 'text'"
						@click="handleCancel"
					>
						{{ options.cancelButtonText || "Cancel" }}
					</v-btn>

					<v-btn
						v-if="options.showConfirmButton !== false"
						:color="options.confirmButtonColor || 'primary'"
						:variant="options.confirmButtonVariant || 'elevated'"
						:loading="options.loading"
						@click="handleConfirm"
					>
						{{ options.confirmButtonText || "Confirm" }}
					</v-btn>
				</slot>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script setup>
import { computed, watch } from "vue";

// Props
const props = defineProps({
	// Modal visibility state
	visible: {
		type: Boolean,
		default: false,
	},

	// Options object for configuration
	options: {
		type: Object,
		default: () => ({}),
	},
});

// Emits
const emit = defineEmits([
	"update:visible",
	"close",
	"confirm",
	"cancel",
	"outside-click",
	"escape-key",
]);

// Local visibility state that syncs with parent
const localVisible = computed({
	get() {
		return props.visible;
	},
	set(value) {
		emit("update:visible", value);
	},
});

// Computed styles for content area
const contentStyle = computed(() => {
	const styles = {};

	if (props.options.contentHeight) {
		styles.height = props.options.contentHeight;
	}

	if (props.options.contentMaxHeight) {
		styles.maxHeight = props.options.contentMaxHeight;
	}

	if (props.options.contentMinHeight) {
		styles.minHeight = props.options.contentMinHeight;
	}

	return styles;
});

// Methods
const closeModal = () => {
	localVisible.value = false;
	emit("close");
};

const handleConfirm = () => {
	emit("confirm");

	// Auto-close unless specified not to
	if (props.options.autoCloseOnConfirm !== false) {
		closeModal();
	}
};

const handleCancel = () => {
	emit("cancel");

	// Auto-close unless specified not to
	if (props.options.autoCloseOnCancel !== false) {
		closeModal();
	}
};

const handleOutsideClick = () => {
	emit("outside-click");

	// Close on outside click unless persistent or disabled
	if (!props.options.persistent && props.options.closeOnOutsideClick !== false) {
		closeModal();
	}
};

const handleEscapeKey = () => {
	emit("escape-key");

	// Close on escape key unless persistent or disabled
	if (!props.options.persistent && props.options.closeOnEscape !== false) {
		closeModal();
	}
};

// Watch for external visibility changes
watch(
	() => props.visible,
	(newValue) => {
		if (newValue && props.options.onOpen) {
			props.options.onOpen();
		} else if (!newValue && props.options.onClose) {
			props.options.onClose();
		}
	},
);
</script>

<style scoped>
.modal-card {
	position: relative;
}

.modal-header {
	background-color: var(--v-theme-surface-variant);
	padding: 16px 24px;
}

.modal-title {
	font-size: 1.25rem;
	font-weight: 500;
	flex: 1;
}

.modal-close-btn {
	flex-shrink: 0;
}

.modal-content {
	position: relative;
}

.modal-actions {
	padding: 16px 24px;
	gap: 8px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.modal-header {
		padding: 12px 16px;
	}

	.modal-actions {
		padding: 12px 16px;
	}

	.modal-title {
		font-size: 1.1rem;
	}
}

/* Custom transitions */
.v-dialog--fullscreen .modal-card {
	height: 100vh;
	border-radius: 0;
}

/* Loading state */
.modal-card.loading {
	pointer-events: none;
}
</style>
