<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import BackButton from '$lib/shared/primitives/BackButton.svelte';
import { hasAnyDocuments } from '$lib/shared/utils/tagUtils';
import type { components } from '$lib/generated/api';

type TagTreeNodeDTO = components['schemas']['TagTreeNodeDTO'];

const MAX_VISIBLE_CHILDREN = 5;

let { data }: { data: { tree: TagTreeNodeDTO[] } } = $props();

const visibleTree = $derived.by(() => data.tree.filter(hasAnyDocuments));
</script>

<svelte:head>
	<title>{m.themen_widget_title()}</title>
</svelte:head>

<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
	<div class="mb-6 flex items-center gap-3">
		<BackButton />
		<h1 class="font-serif text-2xl font-semibold text-ink">{m.themen_widget_title()}</h1>
	</div>

	{#if visibleTree.length === 0}
		<p class="font-sans text-sm text-ink-3">{m.themen_leer()}</p>
	{:else}
		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
			{#each visibleTree as tag (tag.id)}
				{@const visibleChildren = (tag.children ?? []).filter(hasAnyDocuments)}
				{@const shownChildren = visibleChildren.slice(0, MAX_VISIBLE_CHILDREN)}
				{@const hiddenCount = visibleChildren.length - shownChildren.length}

				<div class="overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
					<div
						class="h-1.5 w-full flex-shrink-0"
						aria-hidden="true"
						style="background: var(--c-tag-{tag.color ?? 'slate'})"
					></div>

					<a
						href="/documents?tag={encodeURIComponent(tag.name)}"
						aria-label="{tag.name}{tag.subtreeDocumentCount > 0
							? ', ' + m.themen_dokumente({ count: tag.subtreeDocumentCount })
							: ''}"
						class="flex min-h-[56px] items-center justify-between px-4 pt-4 pb-3 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none focus-visible:ring-inset"
					>
						<span class="font-serif text-base font-semibold text-ink">{tag.name}</span>
						<span class="mr-1 ml-auto font-sans text-sm text-ink-3 tabular-nums">
							{#if tag.subtreeDocumentCount > 0}{tag.subtreeDocumentCount}{/if}
						</span>
						<span aria-hidden="true" class="h-3.5 w-3.5 flex-shrink-0 text-brand-mint">›</span>
					</a>

					{#if shownChildren.length > 0}
						<div class="mx-4 border-t border-line"></div>

						{#each shownChildren as child (child.id)}
							<a
								href="/documents?tag={encodeURIComponent(child.name)}"
								class="flex min-h-[44px] items-center justify-between px-4 py-2.5 hover:bg-canvas focus-visible:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none focus-visible:ring-inset"
							>
								<span class="font-sans text-sm text-ink">{child.name}</span>
								<span class="mr-1 ml-auto font-sans text-xs text-ink-3 tabular-nums">
									{#if child.subtreeDocumentCount > 0}{child.subtreeDocumentCount}{/if}
								</span>
								<span aria-hidden="true" class="h-3 w-3 flex-shrink-0 text-brand-mint">›</span>
							</a>
						{/each}

						{#if hiddenCount > 0}
							<a
								href="/documents?tag={encodeURIComponent(tag.name)}"
								class="block min-h-[44px] px-4 py-2.5 font-sans text-sm text-ink-3 hover:bg-canvas hover:text-ink focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none focus-visible:ring-inset"
							>
								{m.themen_weitere({ count: hiddenCount })} →
							</a>
						{/if}
					{/if}
				</div>
			{/each}
		</div>
	{/if}
</main>
