<script lang="ts">
	import type { Node } from '$lib/realtime';
	import TraitPanel from './TraitPanel.svelte';

	interface Props {
		collection?: Node;
		config: Record<string, unknown>;
	}

	let { collection, config }: Props = $props();

	const format = $derived((config.format as string) ?? 'rss');
	const maxItems = $derived((config.max_items as number) ?? 50);

	/** Build the feed URL from publishing slug if available */
	const feedUrl = $derived.by(() => {
		if (!collection) return '';
		try {
			const meta = JSON.parse(collection.metadata ?? '{}');
			const slug = meta.traits?.publishing?.slug;
			if (slug) return `/pub/${slug}/feed.xml`;
		} catch { /* ignore */ }
		return `/api/rss/${collection.id}`;
	});
</script>

<TraitPanel name="rss" label="RSS-feed" icon="📡">
	{#snippet children()}
		<div class="space-y-2 text-sm">
			<div class="flex items-center gap-2">
				<span class="text-xs text-gray-500">Format:</span>
				<span class="rounded bg-orange-50 px-2 py-0.5 text-xs font-medium text-orange-700">{format.toUpperCase()}</span>
			</div>
			<div>
				<span class="text-xs text-gray-500">Maks elementer:</span>
				<span class="ml-1 text-gray-900">{maxItems}</span>
			</div>
			<div class="mt-2">
				<a
					href={feedUrl}
					target="_blank"
					rel="noopener"
					class="inline-flex items-center gap-1.5 rounded bg-orange-100 px-3 py-1.5 text-xs font-medium text-orange-800 hover:bg-orange-200"
				>
					Feed-URL &rarr;
				</a>
			</div>
		</div>
	{/snippet}
</TraitPanel>
