<script lang="ts">
	import { onMount } from 'svelte';
	import { page } from '$app/stores';
	import { fetchKette, type KetteDetail } from '$lib/api';
	import { statusInfo, typLabel, formatDate } from '$lib/status';
	import StatusBadge from '$lib/components/StatusBadge.svelte';
	import Perlenschnur from '$lib/components/Perlenschnur.svelte';

	let kette: KetteDetail | null = $state(null);
	let error: string | null = $state(null);

	onMount(async () => {
		try {
			const id = parseInt($page.params.id);
			kette = await fetchKette(id);
		} catch (e) {
			error = e instanceof Error ? e.message : 'Fehler';
		}
	});
</script>

<svelte:head>
	<title>{kette?.ursprung?.aktenzeichen || 'Kette'} - Antragstracker Hagen</title>
</svelte:head>

{#if error}
	<div class="bg-red-50 text-red-700 p-4 rounded-lg">{error}</div>
{:else if !kette}
	<div class="flex justify-center py-20">
		<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
	</div>
{:else}
	<!-- Back link -->
	<a href="/ketten" class="text-sm text-gray-500 hover:text-gray-700 mb-4 inline-block">&larr; Zurück zur Liste</a>

	<!-- Header -->
	<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
		<div class="flex flex-wrap items-start justify-between gap-4">
			<div>
				<div class="flex items-center space-x-3 mb-2">
					{#if kette.ursprung?.aktenzeichen}
						<h1 class="text-2xl font-bold text-gray-900 font-mono">{kette.ursprung.aktenzeichen}</h1>
					{/if}
					<StatusBadge status={kette.status} />
					{#if kette.typ}
						<span class="text-sm px-2 py-0.5 rounded bg-gray-100 text-gray-600 capitalize">{typLabel(kette.typ)}</span>
					{/if}
				</div>
				{#if kette.thema}
					<p class="text-gray-700">{kette.thema}</p>
				{/if}
			</div>
			<div class="text-right text-sm text-gray-500 space-y-1">
				{#if kette.status_seit}
					<div>Status seit: <strong>{formatDate(kette.status_seit)}</strong></div>
				{/if}
				{#if kette.letzte_aktivitaet}
					<div>Letzte Aktivität: <strong>{formatDate(kette.letzte_aktivitaet)}</strong></div>
				{/if}
				{#if kette.vertagungen_count > 0}
					<div class="text-amber-600">Vertagungen: <strong>{kette.vertagungen_count}</strong></div>
				{/if}
			</div>
		</div>

		<!-- Antragsteller -->
		{#if kette.antragsteller.length > 0}
			<div class="mt-4 flex items-center space-x-2">
				<span class="text-sm text-gray-500">Antragsteller:</span>
				{#each kette.antragsteller as p}
					<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
						style="background-color: {p.farbe || '#e5e7eb'}20; color: {p.farbe || '#4b5563'}; border: 1px solid {p.farbe || '#d1d5db'}">
						{p.kuerzel}
					</span>
				{/each}
			</div>
		{/if}
	</div>

	<!-- Perlenschnur Timeline -->
	<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
		<h2 class="text-lg font-semibold text-gray-900 mb-6">Perlenschnur</h2>
		{#if kette.glieder.length > 0}
			<Perlenschnur glieder={kette.glieder} status={kette.status} />
		{:else}
			<p class="text-gray-500 text-sm">Keine Glieder in dieser Kette.</p>
		{/if}
	</div>

	<!-- External references from graph -->
	{#if kette.graph && kette.graph.nodes.filter(n => n.extern).length > 0}
		<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
			<h2 class="text-lg font-semibold text-gray-900 mb-4">Verknüpfte Vorlagen</h2>
			<div class="space-y-2">
				{#each kette.graph.nodes.filter(n => n.extern) as ext}
					<a href="/vorlagen/{ext.id}" class="flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:bg-gray-50 transition-colors">
						<div class="flex items-center space-x-3">
							{#if ext.aktenzeichen}
								<span class="font-mono text-sm font-medium text-green-700">{ext.aktenzeichen}</span>
							{/if}
							{#if ext.typ}
								<span class="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-600 capitalize">{ext.typ}</span>
							{/if}
							{#if ext.betreff}
								<span class="text-sm text-gray-600 truncate max-w-md">{ext.betreff}</span>
							{/if}
						</div>
						<span class="text-xs text-gray-500">{formatDate(ext.datum_eingang)}</span>
					</a>
				{/each}
			</div>
		</div>
	{/if}
{/if}
