<script lang="ts">
	import { formatRupiah } from '$lib/utils/format';
	import type { PageData } from './$types';

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

	const { stats } = data;

	const kpiCards = [
		{
			label: 'Total Member',
			value: stats.totalMember,
			sub: `+${stats.memberBaruBulan} bulan ini`,
			icon: '👥',
			color: 'from-violet-500 to-purple-600'
		},
		{
			label: 'Warung Terdaftar',
			value: stats.totalWarung,
			sub: `${stats.warungPublik} publik`,
			icon: '🏪',
			color: 'from-emerald-500 to-teal-600'
		},
		{
			label: 'Langganan Berbayar',
			value: stats.langgananAktif,
			sub: 'Paket aktif (non-free)',
			icon: '💎',
			color: 'from-amber-500 to-orange-600'
		},
		{
			label: 'Estimasi MRR',
			value: formatRupiah(stats.estimasiMrr),
			sub: 'Pendapatan bulanan',
			icon: '💰',
			color: 'from-indigo-500 to-blue-600',
			isText: true
		},
		{
			label: 'Transaksi Platform',
			value: stats.transaksiBulanIni,
			sub: 'Bulan ini (semua member)',
			icon: '📝',
			color: 'from-rose-500 to-pink-600'
		}
	];
</script>

<svelte:head>
	<title>Dashboard — Back Office</title>
</svelte:head>

<div class="page-content">
	{#if data.forbidden}
		<div class="alert alert-warning mb-4">
			<span>Anda tidak memiliki akses ke halaman tersebut.</span>
		</div>
	{/if}

	<div class="flex flex-wrap items-end justify-between gap-4">
		<div>
			<h1 class="text-2xl font-bold text-slate-800">Dashboard Back Office</h1>
			<p class="text-sm text-slate-500">Ringkasan platform Catatan Warung</p>
		</div>
		<div class="flex gap-2">
			<a href="/backoffice/member" class="btn btn-sm border-0 bg-violet-600 text-white hover:bg-violet-700">
				👥 Kelola Member
			</a>
			<a href="/backoffice/paket" class="btn btn-outline btn-sm">💎 Paket</a>
		</div>
	</div>

	<div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
		{#each kpiCards as card}
			<div class="card border-0 bg-gradient-to-br {card.color} text-white shadow-sm">
				<div class="card-body p-5">
					<div class="flex items-start justify-between">
						<div
							class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/20 text-lg shadow-sm"
						>
							{card.icon}
						</div>
					</div>
					<p class="mt-3 text-xs font-medium text-white/75">{card.label}</p>
					<p class="text-2xl font-extrabold">
						{card.isText ? card.value : card.value}
					</p>
					<p class="text-xs text-white/70">{card.sub}</p>
				</div>
			</div>
		{/each}
	</div>

	<div class="mt-8 grid gap-6 lg:grid-cols-5">
		<div class="card border border-slate-200 bg-white shadow-sm lg:col-span-2">
			<div class="card-body">
				<h2 class="text-base font-bold text-slate-800">Distribusi Paket</h2>
				<p class="mb-4 text-xs text-slate-400">Member per paket langganan</p>
				<div class="space-y-4">
					{#each data.paketDistribusi as item}
						<div>
							<div class="mb-1 flex items-center justify-between text-sm">
								<span class="font-medium capitalize text-slate-700">{item.nama}</span>
								<span class="text-slate-400">{item.jumlah} ({item.persen}%)</span>
							</div>
							<progress
								class="progress progress-primary h-2 w-full"
								value={item.persen}
								max="100"
							></progress>
						</div>
					{:else}
						<p class="text-sm text-slate-400">Belum ada data member</p>
					{/each}
				</div>
			</div>
		</div>

		<div class="card border border-slate-200 bg-white shadow-sm lg:col-span-3">
			<div class="card-body">
				<div class="mb-4 flex items-center justify-between">
					<div>
						<h2 class="text-base font-bold text-slate-800">Member Terbaru</h2>
						<p class="text-xs text-slate-400">Daftar member warung terdaftar</p>
					</div>
					<a href="/backoffice/member" class="btn btn-ghost btn-sm text-violet-600">Lihat semua →</a>
				</div>
				<div class="overflow-x-auto">
					<table class="table table-sm">
						<thead>
							<tr class="text-slate-400">
								<th>Member</th>
								<th>Paket</th>
								<th>Status</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							{#each data.members as m}
								<tr class="hover:bg-slate-50">
									<td>
										<p class="font-medium text-slate-800">{m.nama}</p>
										<p class="text-xs text-slate-400">{m.email}</p>
									</td>
									<td>
										<span class="badge badge-outline badge-sm capitalize">{m.paket_nama ?? 'Free'}</span>
									</td>
									<td>
										{#if m.langganan_status === 'aktif' && m.paket_kode !== 'free'}
											<span class="badge badge-success badge-sm">Aktif</span>
										{:else}
											<span class="badge badge-ghost badge-sm">Free</span>
										{/if}
									</td>
									<td>
										<a href="/backoffice/member/{m.id}" class="btn btn-ghost btn-xs text-violet-600">Kelola</a>
									</td>
								</tr>
							{:else}
								<tr>
									<td colspan="4" class="text-center text-slate-400">Belum ada member</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="mt-6 grid gap-4 sm:grid-cols-3">
		<a
			href="/backoffice/member"
			class="card border border-slate-200 bg-white shadow-sm transition-all hover:border-violet-300 hover:shadow-md"
		>
			<div class="card-body flex-row items-center gap-4">
				<span class="text-3xl">👥</span>
				<div>
					<p class="font-bold text-slate-800">Kelola Member</p>
					<p class="text-xs text-slate-400">Assign paket & override privilege</p>
				</div>
			</div>
		</a>
		<a
			href="/backoffice/paket"
			class="card border border-slate-200 bg-white shadow-sm transition-all hover:border-violet-300 hover:shadow-md"
		>
			<div class="card-body flex-row items-center gap-4">
				<span class="text-3xl">💎</span>
				<div>
					<p class="font-bold text-slate-800">Kelola Paket</p>
					<p class="text-xs text-slate-400">Harga & privilege langganan</p>
				</div>
			</div>
		</a>
		<a
			href="/login"
			class="card border border-slate-200 bg-white shadow-sm transition-all hover:border-violet-300 hover:shadow-md"
		>
			<div class="card-body flex-row items-center gap-4">
				<span class="text-3xl">🏪</span>
				<div>
					<p class="font-bold text-slate-800">App Member</p>
					<p class="text-xs text-slate-400">Buka aplikasi warung</p>
				</div>
			</div>
		</a>
	</div>
</div>
