<script lang="ts">
	import { page } from '$app/state';
	import AppShell from '$lib/components/layout/AppShell.svelte';
	import IconRing from '$lib/components/ui/IconRing.svelte';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import type { IconRingTone } from '$lib/components/ui/IconRing.svelte';
	import type { OutlineIconName } from '$lib/components/ui/OutlineIcon.svelte';
	import { formatRupiah } from '$lib/utils/format';
	import type { PageData } from './$types';

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

	const allMenuItems = [
		{
			title: 'Penjualan',
			desc: 'Catat dan kelola penjualan produk warung',
			icon: 'penjualan' as OutlineIconName,
			href: '/transaksi/penjualan',
			tone: 'emerald' as IconRingTone,
			stat: formatRupiah(data.ringkasan.penjualanHari),
			statLabel: 'Hari ini'
		},
		{
			title: 'Catatan Harian',
			desc: 'Biaya operasional & pendapatan lainnya',
			icon: 'catatan' as OutlineIconName,
			href: '/transaksi/catatan',
			tone: 'sky' as IconRingTone,
			stat: formatRupiah(data.ringkasan.pengeluaranHari),
			statLabel: 'Pengeluaran hari ini'
		},
		{
			title: 'Hutang & Piutang',
			desc: 'Pencatatan utang ke supplier & piutang pelanggan',
			icon: 'hutang' as OutlineIconName,
			href: '/transaksi/hutang-piutang',
			tone: 'amber' as IconRingTone,
			stat: `${data.hutangPiutangAktif} aktif`,
			statLabel: 'Belum lunas',
			hutangOnly: true
		}
	];

	const menuItems = $derived(
		allMenuItems.filter((item) => !item.hutangOnly || page.data.pakaiHutangPiutang)
	);
</script>

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

<AppShell memberName={data.member.nama} memberEmail={data.member.email}>
	<header
		class="relative overflow-hidden bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-700 px-5 pb-8 pr-20 pt-[max(1.25rem,env(safe-area-inset-top))] text-white lg:hidden"
	>
		<h1 class="text-xl font-bold">Transaksi</h1>
		<p class="text-sm text-white/70">Kelola semua pencatatan warung Anda</p>
		<div class="mt-4 grid grid-cols-2 gap-3">
			<div class="rounded-xl bg-white/15 p-3 backdrop-blur-sm">
				<p class="text-xs text-white/70">Penjualan Hari Ini</p>
				<p class="font-bold">{formatRupiah(data.ringkasan.penjualanHari)}</p>
			</div>
			<div class="rounded-xl bg-white/15 p-3 backdrop-blur-sm">
				<p class="text-xs text-white/70">Pengeluaran Hari Ini</p>
				<p class="font-bold">{formatRupiah(data.ringkasan.pengeluaranHari)}</p>
			</div>
		</div>
	</header>

	<header class="desktop-page-header">
		<div>
			<h1 class="text-2xl font-bold">Menu Transaksi</h1>
			<p class="text-sm text-base-content/50">Pilih jenis pencatatan yang ingin Anda kelola</p>
		</div>
		<div class="flex gap-3 text-sm">
			<div class="surface-green rounded-xl px-4 py-2">
				<p class="text-xs text-white/75">Penjualan Hari Ini</p>
				<p class="font-bold">{formatRupiah(data.ringkasan.penjualanHari)}</p>
			</div>
			<div class="surface-red rounded-xl px-4 py-2">
				<p class="text-xs text-white/75">Pengeluaran Hari Ini</p>
				<p class="font-bold">{formatRupiah(data.ringkasan.pengeluaranHari)}</p>
			</div>
		</div>
	</header>

	<main class="page-content">
		<div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
			{#each menuItems as item}
				<a
					href={item.href}
					class="group card bg-base-100 shadow-md transition-all active:scale-[0.98] hover:shadow-xl"
				>
					<div class="card-body flex-row items-center gap-4 p-5">
						<IconRing tone={item.tone} size="lg" class="transition-transform group-hover:scale-105">
							<OutlineIcon name={item.icon} size="lg" />
						</IconRing>
						<div class="min-w-0 flex-1">
							<h2 class="text-lg font-bold">{item.title}</h2>
							<p class="text-sm text-base-content/50">{item.desc}</p>
							<div class="mt-2 flex items-center gap-2">
								<span class="badge badge-sm border-0 bg-base-200 font-semibold">{item.stat}</span>
								<span class="text-xs text-base-content/40">{item.statLabel}</span>
							</div>
						</div>
						<span class="text-2xl text-base-content/20 transition-transform group-hover:translate-x-1 group-hover:text-emerald-500">
							→
						</span>
					</div>
				</a>
			{/each}
		</div>

		{#if data.ringkasan.pendapatanLainHari > 0}
			<div class="alert alert-info shadow-sm">
				<span>💡</span>
				<span>
					Pendapatan lain hari ini: <strong>{formatRupiah(data.ringkasan.pendapatanLainHari)}</strong>
				</span>
			</div>
		{/if}
	</main>
</AppShell>
