<script lang="ts">
	import type { DashboardStats } from '$lib/types/dashboard';
	import { formatPersen, formatRupiah } from '$lib/utils/format';

	interface Props {
		stats: DashboardStats;
		compact?: boolean;
	}

	let { stats, compact = false }: Props = $props();

	const labaHari = $derived(stats.pendapatanHari - stats.pengeluaranHari);
	const labaBulan = $derived(stats.pendapatanBulan - stats.pengeluaranBulan);
	const marginHari = $derived(
		stats.pendapatanHari > 0 ? (labaHari / stats.pendapatanHari) * 100 : null
	);
</script>

<section class="overflow-hidden rounded-2xl bg-base-100 shadow-md ring-1 ring-base-300/40">
	<div class="border-b border-base-300/50 bg-base-200/40 px-4 py-3 lg:px-5">
		<div class="flex flex-wrap items-center justify-between gap-2">
			<div>
				<h2 class="text-sm font-bold text-base-content lg:text-base">Ringkasan Keuangan</h2>
				<p class="text-xs text-base-content/50">Pendapatan, pengeluaran, dan laba</p>
			</div>
			{#if !compact}
				<span class="badge badge-ghost badge-sm gap-1">
					{stats.jumlahTransaksiHari} transaksi hari ini
				</span>
			{/if}
		</div>
	</div>

	<div class="p-4 lg:p-5">
		<p class="mb-3 text-[11px] font-bold uppercase tracking-wider text-base-content/40">Hari ini</p>
		<div class="grid grid-cols-3 gap-2 lg:gap-4">
			<div class="surface-green rounded-xl p-3 lg:p-4">
				<p class="text-[10px] font-semibold uppercase tracking-wide text-white/75 lg:text-xs">Pendapatan</p>
				<p class="mt-1 text-sm font-extrabold leading-tight lg:text-xl">{formatRupiah(stats.pendapatanHari)}</p>
				{#if stats.perubahanHari !== 0}
					<p class="mt-1.5 text-[10px] text-white/70">
						{stats.perubahanHari >= 0 ? '↑' : '↓'} {formatPersen(stats.perubahanHari)} vs kemarin
					</p>
				{/if}
			</div>

			<div class="surface-red rounded-xl p-3 lg:p-4">
				<p class="text-[10px] font-semibold uppercase tracking-wide text-white/75 lg:text-xs">Pengeluaran</p>
				<p class="mt-1 text-sm font-extrabold leading-tight lg:text-xl">{formatRupiah(stats.pengeluaranHari)}</p>
				<p class="mt-1.5 text-[10px] text-white/70">Keluar hari ini</p>
			</div>

			<div
				class="rounded-xl p-3 text-white lg:p-4 {labaHari >= 0 ? 'bg-amber-500' : 'bg-orange-600'}"
			>
				<p class="text-[10px] font-semibold uppercase tracking-wide text-white/75 lg:text-xs">Laba</p>
				<p class="mt-1 text-sm font-extrabold leading-tight lg:text-xl">{formatRupiah(labaHari)}</p>
				<p class="mt-1.5 text-[10px] text-white/70">
					{marginHari !== null ? `${marginHari.toFixed(1)}% margin` : 'Belum ada pendapatan'}
				</p>
			</div>
		</div>
	</div>

	<div class="border-t border-base-300/50 bg-base-200/20 px-4 py-3 lg:px-5 lg:py-4">
		<p class="mb-2 text-[11px] font-bold uppercase tracking-wider text-base-content/40">Bulan ini</p>
		<div class="grid grid-cols-3 gap-2 text-center lg:gap-4 lg:text-left">
			<div>
				<p class="text-[10px] text-base-content/45 lg:text-xs">Pendapatan</p>
				<p class="mt-0.5 text-xs font-bold text-emerald-600 lg:text-sm">
					{formatRupiah(stats.pendapatanBulan)}
				</p>
			</div>
			<div>
				<p class="text-[10px] text-base-content/45 lg:text-xs">Pengeluaran</p>
				<p class="mt-0.5 text-xs font-bold text-rose-600 lg:text-sm">
					{formatRupiah(stats.pengeluaranBulan)}
				</p>
			</div>
			<div>
				<p class="text-[10px] text-base-content/45 lg:text-xs">Laba</p>
				<p
					class="mt-0.5 text-xs font-bold lg:text-sm {labaBulan >= 0
						? 'text-amber-600'
						: 'text-orange-600'}"
				>
					{formatRupiah(labaBulan)}
				</p>
			</div>
		</div>
	</div>
</section>
