<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { chipLabel, otherName, inferredRelationshipLabel } from '$lib/person/relationshipLabels';
import { formatRelationshipDateRange } from '$lib/person/relationshipDates';
import type { components } from '$lib/generated/api';

type RelationshipDTO = components['schemas']['RelationshipDTO'];
type InferredRelationshipWithPersonDTO = components['schemas']['InferredRelationshipWithPersonDTO'];

interface Props {
	personId: string;
	relationships: RelationshipDTO[];
	inferredRelationships: InferredRelationshipWithPersonDTO[];
}

let { personId, relationships, inferredRelationships }: Props = $props();

const directOtherIds = $derived(new Set(relationships.map((rel) => otherId(rel))));
const topDerived = $derived(
	inferredRelationships.filter((d) => !directOtherIds.has(d.person.id)).slice(0, 5)
);

function otherId(rel: RelationshipDTO): string {
	return rel.personId === personId ? rel.relatedPersonId : rel.personId;
}
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.person_relationships_heading()}
	</h2>

	{#if relationships.length === 0 && topDerived.length === 0}
		<p class="font-serif text-sm text-ink-2 italic">{m.person_relationships_empty()}</p>
	{:else}
		{#if relationships.length > 0}
			<ul class="mb-4 space-y-2">
				{#each relationships as rel (rel.id)}
					{@const dateRange = formatRelationshipDateRange(
						rel.fromDate,
						rel.fromDatePrecision,
						rel.toDate,
						rel.toDatePrecision
					)}
					<li class="flex flex-col gap-0.5">
						<div class="flex items-center gap-2">
							<span
								class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
							>
								{chipLabel(rel, personId)}
							</span>
							<a
								href="/persons/{otherId(rel)}"
								class="min-w-0 flex-1 truncate font-serif text-sm text-ink hover:underline"
							>
								{otherName(rel, personId)}
							</a>
							{#if dateRange}
								<span
									class="shrink-0 font-sans text-xs text-ink-3"
									data-testid="relationship-date-range">{dateRange}</span
								>
							{/if}
						</div>
						{#if rel.notes}
							<p class="pl-1 font-serif text-xs text-ink-2 italic" data-testid="relationship-notes">
								{rel.notes}
							</p>
						{/if}
					</li>
				{/each}
			</ul>
		{/if}

		{#if topDerived.length > 0}
			<ul class="space-y-2">
				{#each topDerived as derived (derived.person.id)}
					<li class="flex items-center gap-2">
						<span
							class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
						>
							{inferredRelationshipLabel(derived.label)}
						</span>
						<a
							href="/persons/{derived.person.id}"
							class="min-w-0 flex-1 truncate font-serif text-sm text-ink-2 hover:underline"
						>
							{derived.person.displayName}
						</a>
					</li>
				{/each}
			</ul>
		{/if}
	{/if}
</div>
