<script lang="ts">
	import { enhance } from '$app/forms';
	import { goto } from '$app/navigation';
	import AppShell from '$lib/components/layout/AppShell.svelte';
	import FlashToast from '$lib/components/ui/FlashToast.svelte';
	import IconRing from '$lib/components/ui/IconRing.svelte';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import type { FilterPeriode } from '$lib/types/transaksi';
	import { confirmBeforeSubmit } from '$lib/utils/confirm';
	import { formatRupiah, formatWaktu } from '$lib/utils/format';
	import type { PageData } from './$types';

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

	const filters: { value: FilterPeriode; label: string }[] = [
		{ value: 'hari', label: 'Hari Ini' },
		{ value: 'minggu', label: 'Minggu Ini' },
		{ value: 'semua', label: 'Semua' }
	];

	let deletingId = $state<number | null>(null);

	function setFilter(filter: FilterPeriode) {
		goto(`/transaksi/catatan?filter=${filter}`, { replaceState: true, keepFocus: true });
	}
</script>

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

<FlashToast message={data.success ? 'Catatan berhasil disimpan!' : undefined} />

<AppShell memberName={data.member.nama} memberEmail={data.member.email}>
	<header class="mobile-subpage-header bg-gradient-to-r from-blue-600 to-indigo-600">
		<div class="flex items-center gap-3">
			<a href="/transaksi" class="btn-icon-back lg:hidden" aria-label="Kembali">
				<OutlineIcon name="arrow-left" size="sm" />
			</a>
			<div class="flex-1">
				<h1 class="text-lg font-bold lg:text-2xl">Catatan Harian</h1>
				<p class="text-xs text-white/70 lg:text-sm">Biaya & pendapatan lainnya</p>
			</div>
			<a href="/transaksi/catatan/tambah" class="btn-outline-on-dark hidden gap-1.5 lg:inline-flex">
				<OutlineIcon name="plus" size="xs" />
				Tambah
			</a>
		</div>
		<a href="/transaksi/catatan/tambah" class="btn-outline-on-dark gap-1.5 lg:hidden">
			<OutlineIcon name="plus" size="xs" />
			Tambah Catatan
		</a>
	</header>

	<main class="page-content">
		<div class="grid grid-cols-3 gap-2 lg:gap-4">
			<div class="surface-green rounded-2xl p-3 text-center lg:p-4">
				<p class="text-[10px] text-white/75 lg:text-xs">Pemasukan</p>
				<p class="text-sm font-bold lg:text-lg">{formatRupiah(data.totalPendapatan)}</p>
			</div>
			<div class="surface-red rounded-2xl p-3 text-center lg:p-4">
				<p class="text-[10px] text-white/75 lg:text-xs">Pengeluaran</p>
				<p class="text-sm font-bold lg:text-lg">{formatRupiah(data.totalPengeluaran)}</p>
			</div>
			<div class="rounded-2xl bg-base-100 p-3 text-center shadow-sm lg:p-4">
				<p class="text-[10px] text-base-content/50 lg:text-xs">Saldo</p>
				<p class="text-sm font-bold lg:text-lg">{formatRupiah(data.saldo)}</p>
			</div>
		</div>

		<div class="flex gap-2 overflow-x-auto pb-1">
			{#each filters as f}
				<button
					type="button"
					class="btn btn-sm shrink-0 rounded-full {data.filter === f.value ? 'border-0 bg-blue-600 text-white' : 'btn-ghost bg-base-100'}"
					onclick={() => setFilter(f.value)}
				>{f.label}</button>
			{/each}
		</div>

		{#if data.catatan.length === 0}
			<div class="card bg-base-100 shadow-md">
				<div class="card-body items-center py-12 text-center">
					<OutlineIcon name="catatan" size="xl" class="text-base-content/30" />
					<p class="mt-3 font-bold">Belum ada catatan</p>
					<p class="text-sm text-base-content/50">Catat biaya atau pendapatan lainnya</p>
					<a href="/transaksi/catatan/tambah" class="btn mt-4 border-0 bg-blue-600 text-white">➕ Tambah Catatan</a>
				</div>
			</div>
		{:else}
			<div class="grid gap-3 lg:grid-cols-2">
				{#each data.catatan as item (item.id)}
					<div class="card bg-base-100 shadow-md">
						<div class="card-body flex-row items-center gap-3 p-4">
							<IconRing
								tone={item.jenis === 'pendapatan' ? 'emerald' : 'rose'}
								size="sm"
								shape="circle"
							>
								<OutlineIcon
									name={item.jenis === 'pendapatan' ? 'arrow-down' : 'arrow-up'}
									size="sm"
								/>
							</IconRing>
							<div class="min-w-0 flex-1">
								<p class="truncate font-semibold">{item.deskripsi}</p>
								<p class="text-xs text-base-content/50">{item.kategori} · {formatWaktu(item.created_at)}</p>
							</div>
							<div class="shrink-0 text-right">
								<p class="font-bold {item.jenis === 'pendapatan' ? 'text-emerald-600' : 'text-rose-600'}">
									{item.jenis === 'pendapatan' ? '+' : '-'}{formatRupiah(item.jumlah)}
								</p>
								<form method="POST" action="?/hapus" use:enhance={() => { deletingId = item.id; return async ({ update }) => { deletingId = null; await update(); }; }}>
									<input type="hidden" name="id" value={item.id} />
									<button
										type="submit"
										class="btn btn-ghost btn-xs text-rose-500"
										disabled={deletingId === item.id}
										onclick={(e) =>
											confirmBeforeSubmit(e, {
												title: 'Hapus Catatan',
												message: 'Catatan ini akan dihapus permanen. Lanjutkan?',
												confirmText: 'Hapus',
												tone: 'danger'
											})}
									>
										{deletingId === item.id ? '...' : 'Hapus'}
									</button>
								</form>
							</div>
						</div>
					</div>
				{/each}
			</div>
		{/if}
	</main>
</AppShell>
