<script lang="ts">
	import ActivityLists from './activity-lists.svelte';
	import BillingTrend from './billing-trend.svelte';
	import MetricCards from './metric-cards.svelte';
	import RoomSummary from './room-summary.svelte';
	import { formatDate, formatMoney, formatValue } from '$lib/record-utils';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>Dashboard | Clearity</title>
</svelte:head>

<div class="flex flex-col gap-6">
	<div class="flex flex-col gap-1">
		<h1 class="text-2xl font-semibold tracking-tight">Dashboard</h1>
		<p class="text-sm text-muted-foreground">
			Operational overview for clients, contracts, bookings, rooms, and billing.
		</p>
	</div>

	<MetricCards metrics={data.metrics} monthLabel={data.meta.monthLabel} {formatMoney} />

	<div class="grid gap-4 xl:grid-cols-2">
		<BillingTrend
			records={data.billingTrend}
			description={data.meta.billingTrendDescription}
			{formatMoney}
		/>
		<RoomSummary metrics={data.metrics} summary={data.roomSummary} />
	</div>

	<ActivityLists
		upcomingBookings={data.upcomingBookings}
		contractsEndingSoon={data.contractsEndingSoon}
		recentInvoices={data.recentInvoices}
		{formatDate}
		{formatMoney}
		{formatValue}
	/>

	<p class="text-xs text-muted-foreground">{data.meta.overdueInvoiceBasis}</p>
</div>
