<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { plainExcerpt } from '$lib/shared/utils/extractText';
import { getInitials, personAvatarColor } from '$lib/person/personFormat';
import { formatAuthorName, formatPublishedAt } from './utils';
import type { components } from '$lib/generated/api';

type GeschichteRow = Pick<
	components['schemas']['GeschichteSummary'],
	'id' | 'title' | 'body' | 'type' | 'author' | 'publishedAt'
>;

let { geschichte }: { geschichte: GeschichteRow } = $props();

const isJourney = $derived(geschichte.type === 'JOURNEY');

const publishedAt = $derived(formatPublishedAt(geschichte.publishedAt, 'short'));

const authorName = $derived(formatAuthorName(geschichte.author));
</script>

<a
	href="/geschichten/{geschichte.id}"
	class="group flex min-h-[44px] transition-colors hover:bg-canvas/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
>
	<!-- Meta column (desktop) -->
	<div class="hidden w-28 shrink-0 flex-col items-start gap-1 border-r border-line-2 p-3 sm:flex">
		<span
			aria-hidden="true"
			class="flex h-7 w-7 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white"
			style="background-color: {personAvatarColor(authorName)}"
		>
			{getInitials(authorName)}
		</span>
		<span class="font-sans text-xs leading-tight font-semibold text-ink">{authorName}</span>
		{#if publishedAt}
			<span class="font-sans text-xs text-ink-3">{publishedAt}</span>
		{/if}
		{#if isJourney}
			<span
				data-testid="journey-badge"
				aria-label="Lesereise"
				style="font-size: 10px"
				class="inline-flex items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-[10px] font-bold tracking-wide text-journey uppercase"
			>
				{m.journey_badge_list()}
			</span>
		{/if}
	</div>

	<!-- Content column -->
	<div class="min-w-0 flex-1 p-3 sm:px-4">
		<!-- Compact meta line (mobile only) -->
		<div class="mb-1 flex items-center gap-1.5 sm:hidden">
			<span
				aria-hidden="true"
				class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full font-sans text-[7px] font-bold text-white"
				style="background-color: {personAvatarColor(authorName)}"
			>
				{getInitials(authorName)}
			</span>
			<span class="font-sans text-xs font-semibold text-ink">{authorName}</span>
			{#if publishedAt}
				<span class="ml-auto font-sans text-xs text-ink-3">{publishedAt}</span>
			{/if}
		</div>

		<div class="mb-1 flex items-center gap-1.5">
			<h2 class="font-serif text-[15px] leading-snug text-ink group-hover:underline">
				{geschichte.title}
			</h2>
			{#if isJourney}
				<span
					data-testid="journey-badge-mobile"
					aria-hidden="true"
					style="font-size: 10px"
					class="inline-flex shrink-0 items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-[10px] font-bold tracking-wide text-journey uppercase sm:hidden"
				>
					{m.journey_badge_list()}
				</span>
			{/if}
		</div>
		{#if geschichte.body}
			<!-- plaintext for JOURNEY, sanitised-HTML→text for STORY; never {@html} -->
			<p class="line-clamp-2 font-sans text-xs leading-relaxed text-ink-3">
				{plainExcerpt(geschichte.body, 150)}
			</p>
		{/if}
	</div>
</a>
