<script lang="ts">
	import type { KettenGliedOut } from '$lib/api';
	import { statusInfo, typLabel, formatDate } from '$lib/status';

	let { glieder, status }: { glieder: KettenGliedOut[]; status: string | null } = $props();
	const info = $derived(statusInfo(status));
</script>

<div class="relative">
	<!-- Timeline line -->
	<div class="absolute left-6 top-0 bottom-0 w-0.5 bg-gray-200"></div>

	<div class="space-y-6">
		{#each glieder as glied, i}
			{@const isFirst = i === 0}
			{@const isLast = i === glieder.length - 1}
			<div class="relative flex items-start group">
				<!-- Timeline dot -->
				<div class="flex-shrink-0 relative z-10">
					<div class="w-12 h-12 rounded-full flex items-center justify-center text-lg
						{isFirst ? 'bg-green-100 ring-2 ring-green-500' : isLast ? 'bg-blue-100 ring-2 ring-blue-500' : 'bg-white ring-2 ring-gray-300'}">
						{#if isFirst}
							{info.emoji}
						{:else if glied.rolle === 'stellungnahme'}
							📄
						{:else if glied.rolle === 'bericht'}
							📊
						{:else}
							📎
						{/if}
					</div>
				</div>

				<!-- Content card -->
				<a href="/vorlagen/{glied.vorlage.id}" class="ml-4 flex-1 bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow">
					<div class="flex items-center justify-between">
						<div class="flex items-center space-x-2">
							{#if glied.vorlage.aktenzeichen}
								<span class="font-mono text-sm font-medium text-gray-900">{glied.vorlage.aktenzeichen}</span>
							{/if}
							<span class="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-600">{typLabel(glied.vorlage.typ)}</span>
							{#if glied.rolle}
								<span class="text-xs text-gray-400">{glied.rolle}</span>
							{/if}
						</div>
						<span class="text-xs text-gray-500">{formatDate(glied.vorlage.datum_eingang)}</span>
					</div>
					{#if glied.vorlage.betreff}
						<p class="mt-1 text-sm text-gray-700 line-clamp-2">{glied.vorlage.betreff}</p>
					{/if}
				</a>
			</div>
		{/each}
	</div>
</div>
