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

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

<svelte:head>
	<title>Back Office — {data.user.nama}</title>
</svelte:head>

<div class="page-content max-w-2xl">
	<a href="/backoffice/users" class="btn btn-ghost btn-sm mb-4">← Kembali</a>

	<h1 class="text-2xl font-bold">Kelola Pengguna</h1>
	<p class="text-sm text-base-content/50">{data.user.email}</p>

	{#if data.created}
		<div class="alert alert-success mt-4">
			<span>✅ Pengguna berhasil dibuat.</span>
		</div>
	{/if}
	{#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="card mt-6 bg-base-100 shadow-md">
		<div class="card-body gap-6">
			<form method="POST" action="?/update" use:enhance class="space-y-5">
				<div class="flex flex-col gap-2">
					<label for="nama" class="text-sm font-semibold">Nama lengkap</label>
					<input
						id="nama"
						type="text"
						name="nama"
						class="input input-bordered w-full"
						value={data.user.nama}
						required
						minlength="2"
					/>
				</div>

				<div class="flex flex-col gap-2">
					<label for="email" class="text-sm font-semibold">Email</label>
					<input
						id="email"
						type="email"
						name="email"
						class="input input-bordered w-full"
						value={data.user.email}
						required
					/>
				</div>

				<div class="flex flex-col gap-2">
					<label for="role" class="text-sm font-semibold">Role</label>
					<select
						id="role"
						name="role"
						class="select select-bordered w-full"
						disabled={data.user.id === data.currentUserId}
					>
						{#each data.roles as role}
							<option value={role} selected={data.user.role === role}>
								{data.roleLabels[role]}
							</option>
						{/each}
					</select>
					{#if data.user.id === data.currentUserId}
						<input type="hidden" name="role" value={data.user.role} />
						<p class="text-xs text-base-content/50">Role akun sendiri tidak bisa diubah.</p>
					{:else}
						<p class="text-xs text-base-content/50">{data.roleDescriptions[data.user.role]}</p>
					{/if}
				</div>

				<div class="flex flex-col gap-2">
					<span class="text-sm font-semibold">Status akun</span>
					<label class="flex items-center gap-3 rounded-xl border border-base-300 bg-base-200/40 px-4 py-3">
						<input
							type="checkbox"
							name="is_aktif"
							value="1"
							class="toggle toggle-primary"
							checked={data.user.is_aktif}
							disabled={data.user.id === data.currentUserId}
						/>
						<span class="text-sm">Akun aktif — bisa login ke back office</span>
					</label>
					{#if data.user.id === data.currentUserId}
						<input type="hidden" name="is_aktif" value="1" />
					{/if}
				</div>

				<div class="flex flex-col gap-2">
					<label for="password" class="text-sm font-semibold">Password baru</label>
					<input
						id="password"
						type="password"
						name="password"
						class="input input-bordered w-full"
						autocomplete="new-password"
						placeholder="Kosongkan jika tidak diubah"
					/>
					<p class="text-xs text-base-content/50">Isi hanya jika ingin reset password.</p>
				</div>

				<div class="flex gap-2 border-t border-base-300/60 pt-4">
					<button type="submit" class="btn btn-primary">Simpan Perubahan</button>
				</div>
			</form>

			{#if data.user.id !== data.currentUserId}
				<div class="divider my-0">Zona berbahaya</div>
				<form method="POST" action="?/delete" use:enhance>
					<button
						type="submit"
						class="btn btn-outline btn-error btn-sm"
						onclick={(e) =>
							confirmBeforeSubmit(e, {
								title: 'Hapus Pengguna',
								message: `Hapus pengguna ${data.user.nama}? Tindakan ini tidak bisa dibatalkan.`,
								confirmText: 'Hapus',
								tone: 'danger'
							})}
					>
						Hapus Pengguna
					</button>
				</form>
			{/if}
		</div>
	</div>
</div>
