<script lang="ts">
	import FinanceSummary from '$lib/components/dashboard/FinanceSummary.svelte';
	import QuickActions from '$lib/components/dashboard/QuickActions.svelte';
	import RecentTransactions from '$lib/components/dashboard/RecentTransactions.svelte';
	import TopCategories from '$lib/components/dashboard/TopCategories.svelte';
	import WeeklySalesChart from '$lib/components/dashboard/WeeklySalesChart.svelte';
	import AppShell from '$lib/components/layout/AppShell.svelte';
	import { formatTanggalLengkap } from '$lib/utils/format';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	const { member, dashboard } = data;
	const { stats, weeklySales, recentTransactions, topCategories } = dashboard;
	const tanggalHariIni = formatTanggalLengkap();
</script>

<svelte:head>
	<title>Dashboard — Catatan Warung</title>
</svelte:head>

<AppShell memberName={member.nama} memberEmail={member.email}>
	<!-- Mobile Header -->
	<header
		class="relative z-0 overflow-hidden bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-700 px-5 pb-6 pr-20 pt-[max(1.25rem,env(safe-area-inset-top))] text-white lg:hidden"
	>
		<div
			class="pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full bg-white/10 blur-2xl"
		></div>
		<div
			class="pointer-events-none absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-yellow-300/20 blur-xl"
		></div>

		<div class="relative z-10">
			<p class="text-sm text-white/70">{tanggalHariIni}</p>
			<h1 class="truncate text-xl font-bold">Halo, {member.nama.split(' ')[0]}! 👋</h1>
		</div>
	</header>

	<!-- Desktop Top Bar -->
	<header class="hidden items-center justify-between border-b border-base-300 bg-base-100 px-8 py-5 lg:flex">
		<div>
			<h1 class="text-2xl font-bold text-base-content">Dashboard</h1>
			<p class="text-sm text-base-content/50">
				Selamat datang kembali, <span class="font-medium text-base-content">{member.nama}</span>
				· {tanggalHariIni}
			</p>
		</div>
		<div class="badge badge-success badge-outline gap-2">
			<span class="h-2 w-2 rounded-full bg-success"></span>
			Warung Aktif
		</div>
	</header>

	<main class="page-content max-lg:pt-4">
		<div class="relative z-10 lg:mt-0">
			<FinanceSummary {stats} />
		</div>

		<section class="mt-6">
			<h2 class="mb-3 text-sm font-bold text-base-content/70 lg:text-base">Aksi Cepat</h2>
			<QuickActions />
		</section>

		<section class="mt-6 grid gap-5 lg:grid-cols-3 lg:gap-6">
			<div class="lg:col-span-2">
				<WeeklySalesChart data={weeklySales} />
			</div>
			<div>
				<TopCategories categories={topCategories} />
			</div>
		</section>

		<section class="mt-6">
			<RecentTransactions transactions={recentTransactions} />
		</section>
	</main>
</AppShell>
