<template>
	<XMarkModal
		ref="modalRef"
		:title="title"
		:description="description"
		:size="size"
		dark
		@open="emit('open')"
		@close="handleClose"
	>
		<!-- Trigger Slot -->
		<slot>
			<!-- Thumbnail Trigger -->
			<button
				v-if="thumbnail"
				class="relative group rounded-xl overflow-hidden cursor-pointer"
			>
				<img
					:src="thumbnail"
					:alt="title || 'Video thumbnail'"
					class="w-full aspect-video object-cover transition-transform group-hover:scale-105"
				/>
				<div
					class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/50 transition-colors"
				>
					<div
						class="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-lg"
					>
						<UIcon name="i-lucide-play" class="w-8 h-8 text-neutral-900 ml-1" />
					</div>
				</div>
			</button>

			<!-- Button Trigger -->
			<UButton
				v-else
				:label="buttonProps.label"
				:color="buttonProps.color"
				:variant="buttonProps.variant"
				:size="buttonProps.size"
				:leading-icon="buttonProps.icon"
			/>
		</slot>

		<!-- Video Content -->
		<template #content>
			<div
				class="aspect-video bg-black overflow-hidden"
				:class="title || description ? 'rounded-t-lg' : 'rounded-lg'"
			>
				<!-- YouTube Embed -->
				<iframe
					v-if="modalRef?.isOpen && embedType === 'youtube'"
					:src="embedUrl"
					class="w-full h-full"
					frameborder="0"
					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
					allowfullscreen
				/>

				<!-- Vimeo Embed -->
				<iframe
					v-else-if="modalRef?.isOpen && embedType === 'vimeo'"
					:src="embedUrl"
					class="w-full h-full"
					frameborder="0"
					allow="autoplay; fullscreen; picture-in-picture"
					allowfullscreen
				/>

				<!-- Direct Video -->
				<video
					v-else-if="modalRef?.isOpen"
					ref="videoRef"
					:src="src"
					:poster="poster"
					class="w-full h-full object-contain"
					controls
					:autoplay="autoplay"
				>
					<track
						v-if="captions"
						kind="captions"
						:src="captions"
						:srclang="captionsLang"
						:label="captionsLabel"
					/>
				</video>
			</div>
		</template>
	</XMarkModal>
</template>

<script setup>
const props = defineProps({
	/** Video source (direct URL, YouTube, or Vimeo) */
	src: {
		type: String,
		default: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
	},
	/** Thumbnail image URL (shows image with play button) */
	thumbnail: {
		type: String,
		default: "",
	},
	/** Poster image for direct videos */
	poster: {
		type: String,
		default: "",
	},
	/** Video title (shown in modal footer) */
	title: {
		type: String,
		default: "",
	},
	/** Video description (shown in modal footer) */
	description: {
		type: String,
		default: "",
	},
	/** Modal size */
	size: {
		type: String,
		default: "4xl",
		validator: (v) =>
			["lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "full"].includes(
				v
			),
	},
	/** Autoplay video when modal opens */
	autoplay: {
		type: Boolean,
		default: true,
	},
	/** Button configuration object */
	button: {
		type: Object,
		default: () => ({}),
	},
	/** Captions/subtitles file URL */
	captions: {
		type: String,
		default: "",
	},
	/** Captions language code */
	captionsLang: {
		type: String,
		default: "en",
	},
	/** Captions label */
	captionsLabel: {
		type: String,
		default: "English",
	},
});

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

const modalRef = ref(null);
const videoRef = ref(null);

// Button props with defaults
const buttonProps = computed(() => ({
	label: props.button.label || "Watch Video",
	color: props.button.color || "primary",
	variant: props.button.variant || "solid",
	size: props.button.size || "md",
	icon: props.button.icon || "i-lucide-play",
}));

// Detect embed type from URL
const embedType = computed(() => {
	if (props.src.includes("youtube.com") || props.src.includes("youtu.be")) {
		return "youtube";
	}
	if (props.src.includes("vimeo.com")) {
		return "vimeo";
	}
	return "direct";
});

// Generate embed URL
const embedUrl = computed(() => {
	const autoplayParam = props.autoplay ? "1" : "0";

	if (embedType.value === "youtube") {
		let videoId = "";
		if (props.src.includes("youtu.be/")) {
			videoId = props.src.split("youtu.be/")[1]?.split("?")[0];
		} else if (props.src.includes("v=")) {
			videoId = props.src.split("v=")[1]?.split("&")[0];
		} else if (props.src.includes("embed/")) {
			videoId = props.src.split("embed/")[1]?.split("?")[0];
		}
		return `https://www.youtube.com/embed/${videoId}?autoplay=${autoplayParam}&rel=0`;
	}

	if (embedType.value === "vimeo") {
		const videoId = props.src.split("vimeo.com/")[1]?.split("?")[0];
		return `https://player.vimeo.com/video/${videoId}?autoplay=${autoplayParam}`;
	}

	return props.src;
});

// Handle close - pause video
const handleClose = () => {
	if (videoRef.value) {
		videoRef.value.pause();
	}
	emit("close");
};
</script>
