<script lang="ts">
import ConversationThumbnail from '$lib/document/ConversationThumbnail.svelte';
import TagChipList from '$lib/tag/TagChipList.svelte';
import { formatDate } from '$lib/shared/utils/date';
import * as m from '$lib/paraglide/messages.js';

type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
type Tag = { id: string; name: string };

type Doc = {
	id: string;
	title?: string;
	originalFilename: string;
	documentDate?: string;
	location?: string;
	summary?: string;
	contentType?: string;
	thumbnailKey?: string;
	thumbnailGeneratedAt?: string;
	thumbnailAspect?: 'PORTRAIT' | 'LANDSCAPE';
	pageCount?: number;
	sender?: Person | null;
	receivers?: Person[];
	tags?: Tag[];
};

let {
	doc,
	isOut,
	showOtherParty
}: {
	doc: Doc;
	isOut: boolean;
	showOtherParty: boolean;
} = $props();

const title = $derived(doc.title || doc.originalFilename);
const otherPartyName = $derived(
	showOtherParty
		? isOut
			? (doc.receivers?.[0]?.displayName ?? '')
			: (doc.sender?.displayName ?? '')
		: ''
);
const directionLabel = $derived(isOut ? m.row_direction_sent() : m.row_direction_received());
const ariaLabel = $derived(
	`${directionLabel}: ${title}${doc.documentDate ? `, ${formatDate(doc.documentDate)}` : ''}`
);
</script>

<a
	href={`/documents/${doc.id}`}
	aria-label={ariaLabel}
	class="group flex min-h-[120px] items-start gap-3 border-b border-l-[3px] border-line-2 px-[14px] py-[10px] transition-colors last:border-b-0 focus-within:bg-muted hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary"
	class:border-l-primary={isOut}
	class:border-l-accent={!isOut}
>
	<ConversationThumbnail doc={doc} />

	<div class="flex min-w-0 flex-1 flex-col gap-1.5">
		<div class="flex min-w-0 items-center gap-2">
			<img
				data-testid="thumb-row-direction-icon"
				src={isOut
					? '/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg'
					: '/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg'}
				alt=""
				aria-hidden="true"
				class="h-5 w-5 shrink-0 opacity-70"
				class:text-primary={isOut}
				class:text-accent={!isOut}
			/>
			<div class="min-w-0 flex-1 truncate text-lg font-bold text-ink">
				{title}
			</div>
		</div>

		{#if doc.summary}
			<div class="line-clamp-2 text-base text-ink-2 italic">
				&ldquo;{doc.summary}&rdquo;
			</div>
		{/if}

		<div class="flex flex-wrap items-center gap-x-[6px] gap-y-1 text-sm text-ink-3">
			<span>{doc.documentDate ? formatDate(doc.documentDate) : '—'}</span>
			{#if doc.location}
				<span class="text-line">·</span>
				<span>{doc.location}</span>
			{/if}
			{#if otherPartyName}
				<span class="text-line">·</span>
				<span>{otherPartyName}</span>
			{/if}
		</div>

		<TagChipList tags={doc.tags ?? []} />
	</div>
</a>
