<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import JourneyItemCard from './JourneyItemCard.svelte';
import JourneyInterlude from './JourneyInterlude.svelte';
import type { components } from '$lib/generated/api';

type GeschichteView = components['schemas']['GeschichteView'];
type JourneyItemView = components['schemas']['JourneyItemView'];

interface Props {
	geschichte: GeschichteView;
}

let { geschichte: g }: Props = $props();

// Render intro only when body is a non-empty, non-whitespace string.
const introText = $derived(g.body?.trim() ? g.body : null);

// Omit items that have neither a document nor a non-blank note (dangling deleted-document guard).
const validItems = $derived(
	g.items.filter(
		(item: JourneyItemView) =>
			item.document != null || (item.note != null && item.note.trim().length > 0)
	)
);
</script>

{#if introText}
	<!-- plaintext — do NOT use {@html} here -->
	<p
		class="mb-6 border-b border-dashed border-line-2 pb-4 font-serif text-lg leading-relaxed text-ink-2 italic"
	>
		{introText}
	</p>
{/if}

{#if validItems.length === 0}
	<p class="font-sans text-sm text-ink-3" data-testid="journey-empty-state">
		{m.journey_empty_state()}
	</p>
{:else}
	<ol class="flex list-none flex-col">
		{#each validItems as item (item.id)}
			<li>
				{#if item.document != null}
					<JourneyItemCard item={item} />
				{:else}
					<JourneyInterlude note={item.note!} />
				{/if}
			</li>
		{/each}
	</ol>
{/if}
