<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import { bucketByDay, type DayBucket } from '$lib/shared/utils/date-buckets';
import type { components } from '$lib/generated/api';
import ChronikRow from './ChronikRow.svelte';

type ActivityFeedItemDTO = components['schemas']['ActivityFeedItemDTO'];

interface Props {
	items: ActivityFeedItemDTO[];
	locale?: string;
}

const { items, locale }: Props = $props();

const BUCKET_ORDER: DayBucket[] = ['today', 'yesterday', 'thisWeek', 'older'];

function bucketLabel(bucket: DayBucket): string {
	switch (bucket) {
		case 'today':
			return m.chronik_day_today();
		case 'yesterday':
			return m.chronik_day_yesterday();
		case 'thisWeek':
			return m.chronik_day_this_week();
		case 'older':
			return m.chronik_day_older();
	}
}

const grouped: Record<DayBucket, ActivityFeedItemDTO[]> = $derived.by(() => {
	const result: Record<DayBucket, ActivityFeedItemDTO[]> = {
		today: [],
		yesterday: [],
		thisWeek: [],
		older: []
	};
	for (const it of items) {
		const b = bucketByDay(new Date(it.happenedAt), new Date(), locale);
		result[b].push(it);
	}
	return result;
});
</script>

<div class="mt-6 flex flex-col">
	{#each BUCKET_ORDER as bucket (bucket)}
		{#if grouped[bucket].length > 0}
			<section
				data-testid="chronik-bucket-{bucket}"
				class="mb-4 overflow-hidden border border-line bg-surface shadow-sm"
			>
				<div class="border-b border-line bg-muted px-5 py-2">
					<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
						{bucketLabel(bucket)}
					</span>
				</div>
				<ul role="list" class="divide-y divide-line">
					{#each grouped[bucket] as it (it.kind + it.happenedAt + it.documentId)}
						<li>
							<ChronikRow item={it} />
						</li>
					{/each}
				</ul>
			</section>
		{/if}
	{/each}
</div>
