<script lang="ts">
	import AppShell from '$lib/components/layout/AppShell.svelte';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import type { PageData } from './$types';

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

<svelte:head>
	<title>Detail Opname — Catatan Warung</title>
</svelte:head>

<AppShell memberName={data.member.nama} memberEmail={data.member.email}>
	<header class="flex items-center gap-3 bg-gradient-to-r from-violet-600 to-purple-600 px-4 py-4 pt-[max(1rem,env(safe-area-inset-top))] text-white lg:px-8">
		<a href="/stok/opname" class="btn-icon-back">
			<OutlineIcon name="arrow-left" size="sm" />
		</a>
		<div>
			<h1 class="text-lg font-bold">Detail Opname</h1>
			<p class="text-xs text-white/70">{data.opname.tanggal}</p>
		</div>
	</header>

	<main class="page-content-narrow">
		<div class="grid grid-cols-2 gap-3">
			<div class="surface-violet rounded-xl p-4">
				<p class="text-xs text-white/75">Barang Dicek</p>
				<p class="text-lg font-bold">{data.opname.jumlah_item}</p>
			</div>
			<div class="rounded-xl bg-amber-500 p-4 text-white">
				<p class="text-xs text-white/75">Ada Selisih</p>
				<p class="text-lg font-bold">{data.opname.jumlah_selisih}</p>
			</div>
		</div>

		{#if data.opname.keterangan}
			<p class="text-sm text-base-content/60">{data.opname.keterangan}</p>
		{/if}

		<div class="flex flex-col gap-2">
			{#each data.opname.items ?? [] as item (item.id)}
				<div class="card bg-base-100 shadow-sm">
					<div class="card-body flex-row items-center justify-between gap-3 p-4">
						<div>
							<p class="font-semibold">{item.barang_nama}</p>
							<p class="text-xs text-base-content/50">
								Sistem {item.stok_sistem} → Fisik {item.stok_fisik} {item.satuan}
							</p>
						</div>
						<span class="badge {item.selisih === 0 ? 'badge-ghost' : item.selisih > 0 ? 'badge-success' : 'badge-error'}">
							{item.selisih === 0 ? 'Sesuai' : item.selisih > 0 ? `+${item.selisih}` : item.selisih}
						</span>
					</div>
				</div>
			{/each}
		</div>
	</main>
</AppShell>
