<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 slug = $derived((config.slug as string) ?? '');
	const theme = $derived((config.theme as string) ?? 'default');
	const customDomain = $derived((config.custom_domain as string) ?? '');
	const indexMode = $derived((config.index_mode as string) ?? 'dynamic');
	const featuredMax = $derived((config.featured_max as number) ?? 4);
	const requireApproval = $derived((config.require_approval as boolean) ?? false);
</script>

<TraitPanel name="publishing" label="Publisering" icon="🌐">
	{#snippet children()}
		<dl class="space-y-2 text-sm">
			{#if slug}
				<div>
					<dt class="text-xs text-gray-500">Slug</dt>
					<dd class="font-mono text-gray-900">{slug}</dd>
				</div>
			{/if}
			<div>
				<dt class="text-xs text-gray-500">Tema</dt>
				<dd class="text-gray-900">{theme}</dd>
			</div>
			{#if customDomain}
				<div>
					<dt class="text-xs text-gray-500">Domene</dt>
					<dd class="font-mono text-gray-900">{customDomain}</dd>
				</div>
			{/if}
			<div>
				<dt class="text-xs text-gray-500">Forsidemodus</dt>
				<dd class="text-gray-900">{indexMode === 'static' ? 'Statisk' : 'Dynamisk'} &middot; {featuredMax} fremhevede</dd>
			</div>
		</dl>

		<div class="mt-4 flex flex-wrap gap-2">
			{#if requireApproval}
				<a
					href="/editorial/{collection?.id ?? ''}"
					class="inline-flex items-center gap-1 rounded-lg bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700"
				>
					Redaksjonell arbeidsflate
				</a>
			{/if}
			<a
				href="/collection/{collection?.id ?? ''}/forside"
				class="inline-flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-700"
			>
				Rediger forside
			</a>
			{#if slug}
				<a
					href="/api/pub/{slug}"
					target="_blank"
					rel="noopener"
					class="inline-flex items-center gap-1 rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200"
				>
					Se publisert
				</a>
			{/if}
		</div>
	{/snippet}
</TraitPanel>
