<script lang="ts">
	import { t } from 'svelte-i18n';

	let origin = $state('');
	let bookmarkletCode = $state('');
	let bookmarkletHref = $state('');

	$effect(() => {
		if (typeof window !== 'undefined') {
			origin = window.location.origin;
		}
	});

	$effect(() => {
		if (!origin) return;
		// The bookmarklet opens the quick-add page with URL and title pre-filled
		const code = `javascript:void(window.open('${origin}/apps/quick-add?url='+encodeURIComponent(location.href)+'&name='+encodeURIComponent(document.title),'_blank','width=600,height=500'))`;
		bookmarkletCode = code;
		bookmarkletHref = code;
	});
</script>

<div class="rounded-xl border border-border bg-card p-6 shadow-[var(--shadow-soft)]">
	<h2 class="mb-2 text-lg font-semibold text-card-foreground">
		{$t('settings.bookmarklet_title')}
	</h2>
	<p class="mb-4 text-sm text-muted-foreground">
		{$t('settings.bookmarklet_instructions')}
	</p>

	<div class="mb-4 flex items-center gap-3">
		<a
			href={bookmarkletHref}
			class="inline-flex items-center gap-2 rounded-lg border-2 border-dashed border-primary/50 bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition-colors hover:border-primary hover:bg-primary/20"
			onclick={(e) => { e.preventDefault(); }}
			draggable="true"
		>
			<svg
				class="h-4 w-4"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
			>
				<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
			</svg>
			{$t('settings.bookmarklet_drag')}
		</a>
		<span class="text-xs text-muted-foreground">
			{$t('settings.bookmarklet_drag_hint')}
		</span>
	</div>

	<details class="group">
		<summary class="cursor-pointer text-sm font-medium text-muted-foreground hover:text-foreground">
			{$t('settings.bookmarklet_show_code')}
		</summary>
		<pre class="mt-2 overflow-x-auto rounded-md border border-border bg-background p-3 text-xs text-foreground"><code>{bookmarkletCode}</code></pre>
	</details>
</div>
