<template>
	<UModal
		v-model:open="isOpen"
		:fullscreen="fullscreen"
		:ui="modalUi"
	>
		<!-- Trigger Slot -->
		<slot />

		<!-- Modal Content -->
		<template #body>
			<div class="relative">
				<!-- Close Button -->
				<UButton
					icon="i-lucide-x"
					color="neutral"
					variant="ghost"
					:size="fullscreen ? 'lg' : 'md'"
					class="absolute z-10 rounded-full"
					:class="closeButtonClasses"
					aria-label="Close"
					@click="isOpen = false"
				/>

				<!-- Content -->
				<slot name="content" :close="close" />

				<!-- Footer (optional) -->
				<div v-if="$slots.footer || title || description" class="px-5 py-4 bg-neutral-900 rounded-b-lg">
					<slot name="footer">
						<h4 v-if="title" class="text-white font-medium">{{ title }}</h4>
						<p v-if="description" class="mt-1 text-sm text-neutral-400">{{ description }}</p>
					</slot>
				</div>
			</div>
		</template>
	</UModal>
</template>

<script setup>
const props = defineProps({
	/** Modal title (shown in footer) */
	title: {
		type: String,
		default: '',
	},
	/** Modal description (shown in footer) */
	description: {
		type: String,
		default: '',
	},
	/** Modal size */
	size: {
		type: String,
		default: '4xl',
		validator: (v) => ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full'].includes(v),
	},
	/** Fullscreen mode */
	fullscreen: {
		type: Boolean,
		default: false,
	},
	/** Dark mode for content (affects close button styling) */
	dark: {
		type: Boolean,
		default: true,
	},
	/** Padding for body */
	padding: {
		type: String,
		default: 'p-0',
	},
});

const emit = defineEmits(['open', 'close']);

const isOpen = ref(false);

// Close function for slot
const close = () => {
	isOpen.value = false;
};

// Size classes for content slot
const sizeClasses = computed(() => {
	const sizes = {
		sm: 'max-w-sm',
		md: 'max-w-md',
		lg: 'max-w-lg',
		xl: 'max-w-xl',
		'2xl': 'max-w-2xl',
		'3xl': 'max-w-3xl',
		'4xl': 'max-w-4xl',
		'5xl': 'max-w-5xl',
		'6xl': 'max-w-6xl',
		'7xl': 'max-w-7xl',
		full: 'max-w-[95vw]',
	};
	return sizes[props.size];
});

// Modal UI config
const modalUi = computed(() => ({
	header: 'hidden',
	body: `${props.padding} ${props.dark ? 'bg-black' : 'bg-white dark:bg-neutral-900'}`,
	footer: 'hidden',
	overlay: 'bg-black/80 backdrop-blur-sm',
	content: `ring-neutral-200/50 dark:ring-neutral-800 ${props.fullscreen ? '' : sizeClasses.value}`,
}));

// Close button classes based on mode and fullscreen
const closeButtonClasses = computed(() => {
	if (props.fullscreen) {
		return 'fixed top-4 right-4 !bg-white/10 backdrop-blur-sm hover:!bg-white/20 !text-white';
	}
	if (props.dark) {
		return 'top-3 right-3 !bg-black/50 hover:!bg-black/70 !text-white/80 hover:!text-white';
	}
	return 'top-3 right-3 !bg-neutral-100 hover:!bg-neutral-200 dark:!bg-neutral-800 dark:hover:!bg-neutral-700 !text-neutral-500 dark:!text-neutral-400';
});

// Emit events
watch(isOpen, (open) => {
	if (open) {
		emit('open');
	} else {
		emit('close');
	}
});

// Expose close method
defineExpose({ close, isOpen });
</script>
