<script lang="ts">
	import { enhance } from '$app/forms';
	import { INTERVAL_LABEL } from '$lib/constants/privilege';
	import { formatRupiah } from '$lib/utils/format';
	import type { ActionData, PageData } from './$types';

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

<svelte:head>
	<title>Admin — Kelola Paket</title>
</svelte:head>

<div class="page-content">
	<h1 class="text-2xl font-bold">Kelola Paket Langganan</h1>
	<p class="text-sm text-base-content/50">Atur harga bulanan/tahunan dan privilege tiap paket</p>

	{#if form?.success}
		<div class="alert alert-success mt-4">
			<span>✅ {form.message}</span>
		</div>
	{/if}
	{#if form?.error}
		<div class="alert alert-error mt-4">
			<span>{form.error}</span>
		</div>
	{/if}

	<div class="mt-6 space-y-6">
		{#each data.paketList as paket}
			<div class="card bg-base-100 shadow-lg">
				<div class="card-body gap-6">
					<div class="flex flex-wrap items-start justify-between gap-4">
						<div>
							<div class="flex items-center gap-2">
								<h2 class="text-xl font-bold">{paket.nama}</h2>
								<span class="badge badge-outline uppercase">{paket.kode}</span>
								{#if !paket.is_aktif}
									<span class="badge badge-warning">Nonaktif</span>
								{/if}
							</div>
							<p class="mt-1 text-sm text-base-content/50">{paket.deskripsi}</p>
						</div>
					</div>

					<form method="POST" action="?/updateInfo" use:enhance class="grid gap-4 lg:grid-cols-2">
						<input type="hidden" name="id" value={paket.id} />
						<label class="form-control">
							<span class="label-text font-medium">Nama Paket</span>
							<input type="text" name="nama" class="input input-bordered" value={paket.nama} required />
						</label>
						<label class="form-control">
							<span class="label-text font-medium">Status</span>
							<label class="label cursor-pointer justify-start gap-3">
								<input type="checkbox" name="is_aktif" value="1" class="toggle toggle-primary" checked={paket.is_aktif} />
								<span class="label-text">Paket aktif & bisa dipilih member</span>
							</label>
						</label>
						<label class="form-control lg:col-span-2">
							<span class="label-text font-medium">Deskripsi</span>
							<textarea name="deskripsi" class="textarea textarea-bordered" rows="2">{paket.deskripsi}</textarea>
						</label>
						<div class="lg:col-span-2">
							<button type="submit" class="btn btn-primary btn-sm">Simpan Info</button>
						</div>
					</form>

					<div class="divider my-0">Harga</div>
					<div class="grid gap-4 sm:grid-cols-2">
						{#each paket.harga as h}
							<form method="POST" action="?/updateHarga" use:enhance class="rounded-xl border border-base-300 p-4">
								<input type="hidden" name="paket_id" value={paket.id} />
								<input type="hidden" name="interval" value={h.interval} />
								<p class="text-sm font-semibold">{INTERVAL_LABEL[h.interval]}</p>
								<p class="mb-3 text-xs text-base-content/50">Saat ini: {formatRupiah(h.harga)}</p>
								<div class="flex gap-2">
									<input
										type="number"
										name="harga"
										class="input input-bordered input-sm flex-1"
										value={h.harga}
										min="0"
										step="1000"
										required
									/>
									<button type="submit" class="btn btn-sm btn-outline">Simpan</button>
								</div>
							</form>
						{/each}
					</div>

					<div class="divider my-0">Privilege</div>
					<div class="grid gap-3 lg:grid-cols-2">
						{#each paket.privileges as priv}
							<form method="POST" action="?/updatePrivilege" use:enhance class="rounded-xl border border-base-300 p-4">
								<input type="hidden" name="paket_id" value={paket.id} />
								<input type="hidden" name="privilege_kode" value={priv.kode} />
								<input type="hidden" name="tipe" value={priv.tipe} />
								<p class="font-medium">{priv.nama}</p>
								<p class="mb-3 text-xs text-base-content/50">{priv.deskripsi}</p>
								{#if priv.tipe === 'boolean'}
									<label class="label cursor-pointer justify-start gap-3">
										<input
											type="checkbox"
											name="nilai"
											value="1"
											class="toggle toggle-success toggle-sm"
											checked={priv.nilai === 'true' || priv.nilai === '1'}
										/>
										<span class="label-text">Aktif</span>
									</label>
								{:else}
									<div class="flex gap-2">
										<input
											type="number"
											name="nilai_number"
											class="input input-bordered input-sm flex-1"
											value={priv.nilai}
											min="0"
										/>
										<button type="submit" class="btn btn-sm btn-outline">Simpan</button>
									</div>
									<p class="mt-1 text-xs text-base-content/40">0 = tak terbatas</p>
								{/if}
								{#if priv.tipe === 'boolean'}
									<button type="submit" class="btn btn-sm btn-outline mt-3">Simpan</button>
								{/if}
							</form>
						{/each}
					</div>
				</div>
			</div>
		{/each}
	</div>
</div>
