<script lang="ts">
import * as m from '$lib/paraglide/messages.js';

interface Props {
	name: string;
	documents: number | null;
	persons: number | null;
	stories: number | null;
	hour?: number;
}

const { name, documents, persons, stories, hour }: Props = $props();

const timeLabel = $derived.by(() => {
	const h = hour ?? new Date().getHours();
	if (h < 12) return m.dashboard_greeting_time_morning();
	if (h < 18) return m.dashboard_greeting_time_afternoon();
	return m.dashboard_greeting_time_evening();
});
</script>

<header
	class="flex flex-col items-start gap-4 rounded-sm border border-line bg-surface px-4 py-3 sm:flex-row sm:items-center dark:border-white/8"
>
	<!-- Greeting -->
	<div class="min-w-0 flex-1">
		<span class="block text-[11px] font-bold tracking-[.8px] text-ink uppercase">
			{timeLabel}
		</span>
		<span class="block font-serif text-xl text-ink">
			{m.dashboard_welcome({ name })}
		</span>
	</div>

	<!-- Vertical divider — desktop only -->
	<div class="hidden w-px shrink-0 self-stretch bg-line sm:block" aria-hidden="true"></div>

	<!-- Stats -->
	<div
		class="flex w-full items-center border-t border-line-2 pt-1.5 sm:w-auto sm:border-t-0 sm:pt-0"
	>
		<a
			href="/documents"
			class="flex min-h-[44px] flex-col items-center justify-center border-r border-line-2 px-5 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
		>
			<span class="block text-2xl leading-none font-black text-ink">{documents ?? '—'}</span>
			<span
				class="mt-0.5 hidden text-[11px] font-bold tracking-[.8px] text-ink-3 uppercase sm:block"
				>{m.dashboard_reader_stats_documents()}</span
			>
			<span
				class="mt-0.5 block text-[11px] font-bold tracking-[.8px] text-ink-3 uppercase sm:hidden"
				>{m.dashboard_reader_stats_documents_short()}</span
			>
		</a>

		<a
			href="/persons"
			class="flex min-h-[44px] flex-col items-center justify-center border-r border-line-2 px-5 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
		>
			<span class="block text-2xl leading-none font-black text-ink">{persons ?? '—'}</span>
			<span
				class="mt-0.5 hidden text-[11px] font-bold tracking-[.8px] text-ink-3 uppercase sm:block"
				>{m.dashboard_reader_stats_persons()}</span
			>
			<span
				class="mt-0.5 block text-[11px] font-bold tracking-[.8px] text-ink-3 uppercase sm:hidden"
				>{m.dashboard_reader_stats_persons_short()}</span
			>
		</a>

		<a
			href="/geschichten"
			class="flex min-h-[44px] flex-col items-center justify-center px-5 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
		>
			<span class="block text-2xl leading-none font-black text-ink">{stories ?? '—'}</span>
			<span
				class="mt-0.5 hidden text-[11px] font-bold tracking-[.8px] text-ink-3 uppercase sm:block"
				>{m.dashboard_reader_stats_stories()}</span
			>
			<span
				class="mt-0.5 block text-[11px] font-bold tracking-[.8px] text-ink-3 uppercase sm:hidden"
				>{m.dashboard_reader_stats_stories_short()}</span
			>
		</a>
	</div>
</header>
