<script lang="ts">
import DropZone from './DropZone.svelte';
import DashboardResumeStrip from '$lib/shared/dashboard/DashboardResumeStrip.svelte';
import MissionControlStrip from '$lib/document/MissionControlStrip.svelte';
import DashboardFamilyPulse from '$lib/shared/dashboard/DashboardFamilyPulse.svelte';
import DashboardActivityFeed from '$lib/activity/DashboardActivityFeed.svelte';
import EnrichmentBlock from '$lib/document/EnrichmentBlock.svelte';
import ReaderHeaderBar from '$lib/shared/dashboard/ReaderHeaderBar.svelte';
import ReaderPersonChips from '$lib/shared/dashboard/ReaderPersonChips.svelte';
import ReaderDraftsModule from '$lib/shared/dashboard/ReaderDraftsModule.svelte';
import ReaderRecentDocs from '$lib/shared/dashboard/ReaderRecentDocs.svelte';
import ReaderRecentStories from '$lib/shared/dashboard/ReaderRecentStories.svelte';
import ThemenWidget from '$lib/shared/dashboard/ThemenWidget.svelte';
import { m } from '$lib/paraglide/messages.js';

let { data } = $props();

let bannerCount = $state(0);

const greetingText = $derived.by(() => {
	const name = data?.user?.firstName ?? '';
	const h = new Date().getHours();
	if (h < 12) return m.greeting_morning({ name });
	if (h < 18) return m.greeting_day({ name });
	return m.greeting_evening({ name });
});
</script>

<svelte:head>
	<title>{m.page_title_home()}</title>
</svelte:head>

<main class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
	{#if data.isReader}
		<div class="flex flex-col gap-5">
			<ReaderHeaderBar
				name={data.user?.firstName ?? ''}
				documents={data.readerStats?.totalDocuments ?? null}
				persons={data.readerStats?.totalPersons ?? null}
				stories={data.readerStats?.totalStories ?? null}
			/>

			{#if data.canBlogWrite}
				<ReaderDraftsModule drafts={data.drafts ?? []} />
			{/if}

			<ReaderPersonChips persons={data.topPersons ?? []} />

			<ThemenWidget tags={data.tagTree ?? []} />

			<div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
				<ReaderRecentDocs documents={data.recentDocs ?? []} />
				<ReaderRecentStories stories={data.recentStories ?? []} />
			</div>
		</div>
	{:else}
		{#if data?.user}
			<div class="mb-6">
				<h1 class="font-serif text-[2rem] text-ink">{greetingText}</h1>
			</div>
		{/if}
		<div class="flex flex-col gap-5">
			<DashboardResumeStrip resumeDoc={data.resumeDoc ?? null} />

			<ThemenWidget tags={data.tagTree ?? []} />

			<div class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_320px] lg:items-start">
				<div class="flex flex-col gap-5">
					<EnrichmentBlock
						topDocs={data.incompleteDocs ?? []}
						totalCount={data.incompleteTotal ?? 0}
						bannerCount={bannerCount}
						onBannerClose={() => (bannerCount = 0)}
					/>

					<section aria-label={m.dashboard_mission_caption()}>
						<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
							{m.dashboard_mission_caption()}
						</h2>
						<MissionControlStrip
							segmentationDocs={data.segmentationDocs ?? []}
							transcriptionDocs={data.transcriptionDocs ?? []}
							readyDocs={data.readyDocs ?? []}
							weeklyStats={data.weeklyStats ?? null}
						/>
					</section>
				</div>

				<div class="flex flex-col gap-5 lg:sticky lg:top-[80px]">
					<DashboardFamilyPulse pulse={data.pulse ?? null} />
					<DashboardActivityFeed feed={data.activityFeed ?? []} />
					{#if data.canWrite}
						<DropZone onUploadComplete={(count) => (bannerCount = count)} />
					{/if}
				</div>
			</div>
		</div>
	{/if}
</main>
