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

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

	const defaultBerakhir = $derived(() => {
		const d = new Date();
		d.setFullYear(d.getFullYear() + 1);
		return d.toISOString().slice(0, 10);
	});
</script>

<svelte:head>
	<title>Admin — {data.member.nama}</title>
</svelte:head>

<div class="page-content">
	<a href="/backoffice/member" class="btn btn-ghost btn-sm mb-4">← Kembali</a>

	<div class="flex flex-wrap items-start justify-between gap-4">
		<div>
			<h1 class="text-2xl font-bold">{data.member.nama}</h1>
			<p class="text-sm text-base-content/50">{data.member.email}</p>
		</div>
		<div class="badge badge-lg badge-primary capitalize">{data.entitlements.paketNama}</div>
	</div>

	{#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}
	{#if !data.canWrite}
		<div class="alert alert-info mt-4">
			<span>Mode baca saja — role Viewer tidak dapat mengubah data member.</span>
		</div>
	{/if}

	<div class="mt-6 grid gap-6 lg:grid-cols-2">
		<div class="card bg-base-100 shadow">
			<div class="card-body">
				<h2 class="card-title text-base">Assign Paket Langganan</h2>
				{#if data.langganan}
					<div class="rounded-lg bg-base-200/60 p-3 text-sm">
						<p>
							Aktif: <strong class="capitalize">{data.langganan.paket_nama}</strong>
							({INTERVAL_LABEL[data.langganan.interval]})
						</p>
						{#if data.langganan.berakhir_at}
							<p class="text-base-content/50">
								Berakhir: {new Date(data.langganan.berakhir_at).toLocaleDateString('id-ID')}
							</p>
						{/if}
					</div>
				{/if}

				{#if data.canWrite}
				<form method="POST" action="?/assignPaket" use:enhance class="space-y-3">
					<label class="form-control">
						<span class="label-text">Paket</span>
						<select name="paket_id" class="select select-bordered" required>
							{#each data.paketList as p}
								<option value={p.id}>{p.nama}</option>
							{/each}
						</select>
					</label>
					<label class="form-control">
						<span class="label-text">Periode Bayar</span>
						<select name="interval" class="select select-bordered">
							<option value="bulanan">Bulanan</option>
							<option value="tahunan">Tahunan</option>
						</select>
					</label>
					<label class="form-control">
						<span class="label-text">Berakhir (opsional)</span>
						<input type="date" name="berakhir_at" class="input input-bordered" value={defaultBerakhir()} />
					</label>
					<label class="form-control">
						<span class="label-text">Keterangan</span>
						<input type="text" name="keterangan" class="input input-bordered" placeholder="Contoh: Pembayaran transfer" />
					</label>
					<button type="submit" class="btn btn-primary">Assign Paket</button>
				</form>
				{/if}
			</div>
		</div>

		<div class="card bg-base-100 shadow">
			<div class="card-body">
				<h2 class="card-title text-base">Privilege Efektif</h2>
				<p class="mb-3 text-xs text-base-content/50">Hak akses dari paket langganan + override</p>
				<div class="space-y-2">
					{#each data.privilegeSummary as def}
						<div class="flex items-center justify-between rounded-lg bg-base-200/50 px-3 py-2 text-sm">
							<span>{def.nama}</span>
							{#if def.tipe === 'boolean'}
								<span class="badge badge-sm {def.aktif ? 'badge-success' : 'badge-ghost'}">
									{def.aktif ? 'Ya' : 'Tidak'}
								</span>
							{:else}
								<span class="badge badge-sm badge-outline">{def.nilai}</span>
							{/if}
						</div>
					{/each}
				</div>
			</div>
		</div>
	</div>

	<div class="card mt-6 bg-base-100 shadow">
		<div class="card-body">
			<h2 class="card-title text-base">Override Privilege (Khusus Member Ini)</h2>
			<p class="text-sm text-base-content/50">
				Override menimpa privilege dari paket. Kosongkan untuk pakai default paket.
			</p>

			{#if data.canWrite}
			<form method="POST" action="?/updateOverrides" use:enhance class="mt-4 grid gap-4 lg:grid-cols-2">
				{#each data.privilegeDefs as def}
					{@const override = data.overrides.find((o) => o.kode === def.kode)}
					<div class="rounded-xl border border-base-300 p-4">
						<p class="font-medium">{def.nama}</p>
						{#if def.tipe === 'boolean'}
							<label class="label cursor-pointer justify-start gap-3 mt-2">
								<input
									type="checkbox"
									name="override_{def.kode}"
									value="1"
									class="toggle toggle-sm"
									checked={override?.nilai === 'true' || override?.nilai === '1'}
								/>
								<span class="label-text">Aktifkan override</span>
							</label>
						{:else}
							<input
								type="number"
								name="override_{def.kode}"
								class="input input-bordered input-sm mt-2 w-full"
								placeholder="Kosongkan = pakai paket"
								value={override?.nilai ?? ''}
								min="0"
							/>
						{/if}
						<input
							type="text"
							name="ket_{def.kode}"
							class="input input-bordered input-xs mt-2 w-full"
							placeholder="Keterangan override"
							value={override?.keterangan ?? ''}
						/>
					</div>
				{/each}
				<div class="lg:col-span-2">
					<button type="submit" class="btn btn-primary">Simpan Override</button>
				</div>
			</form>
			{/if}
		</div>
	</div>
</div>
