<script lang="ts">
	import { onMount, onDestroy } from 'svelte'
	import { fly } from 'svelte/transition'

	// Convert CSS transition durations to milliseconds for Svelte transitions
	const TRANSITION_NORMAL_MS = 200 // $transition-normal: 0.2s

	interface Props {
		x: number
		y: number
		url: string
		onConvertToLink: () => void
		onCopyLink: () => void
		onRefresh: () => void
		onOpenLink: () => void
		onRemove: () => void
		onDismiss: () => void
	}

	let {
		x,
		y,
		url,
		onConvertToLink,
		onCopyLink,
		onRefresh,
		onOpenLink,
		onRemove,
		onDismiss
	}: Props = $props()

	let dropdown: HTMLDivElement

	function handleClickOutside(event: MouseEvent) {
		if (dropdown && !dropdown.contains(event.target as Node)) {
			onDismiss()
		}
	}

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape') {
			onDismiss()
		}
	}

	onMount(() => {
		document.addEventListener('click', handleClickOutside)
		document.addEventListener('keydown', handleKeydown)
		dropdown?.focus()
	})

	onDestroy(() => {
		document.removeEventListener('click', handleClickOutside)
		document.removeEventListener('keydown', handleKeydown)
	})
</script>

<div
	bind:this={dropdown}
	class="embed-context-menu"
	style="left: {x}px; top: {y}px;"
	transition:fly={{ y: -10, duration: TRANSITION_NORMAL_MS }}
	tabindex="-1"
>
	<div class="menu-url">{url}</div>
	<div class="menu-divider"></div>

	<button class="menu-item" onclick={onOpenLink}> Open link </button>

	<button class="menu-item" onclick={onCopyLink}> Copy link </button>

	<button class="menu-item" onclick={onRefresh}> Refresh preview </button>

	<button class="menu-item" onclick={onConvertToLink}> Convert to link </button>

	<div class="menu-divider"></div>

	<button class="menu-item danger" onclick={onRemove}> Remove card </button>
</div>

<style lang="scss">
	.embed-context-menu {
		position: fixed;
		z-index: 1050;
		background: white;
		border: 1px solid $gray-85;
		border-radius: $unit;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		padding: 4px;
		outline: none;
		min-width: 200px;
		max-width: 300px;
	}

	.menu-url {
		padding: $unit $unit-2x;
		font-size: 0.75rem;
		color: $gray-40;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.menu-divider {
		height: 1px;
		background-color: $gray-90;
		margin: 4px 0;
	}

	.menu-item {
		display: block;
		width: 100%;
		padding: $unit $unit-2x;
		background: transparent;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 0.875rem;
		color: $gray-20;
		text-align: left;
		transition: background-color 0.2s;

		&:hover {
			background-color: $gray-95;
		}

		&:focus {
			outline: 2px solid $red-60;
			outline-offset: -2px;
		}

		&.danger {
			color: $red-60;
		}
	}
</style>
