<script lang="ts">
import { enhance } from '$app/forms';
import { beforeNavigate, goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
import AccountSection from './AccountSection.svelte';

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

let isDirty = $state(false);
let showUnsavedWarning = $state(false);
let discardTarget = $state<string | null>(null);

beforeNavigate(({ cancel, to }) => {
	if (isDirty) {
		cancel();
		showUnsavedWarning = true;
		discardTarget = to?.url.href ?? null;
	}
});
</script>

<div class="flex flex-1 flex-col overflow-hidden">
	<!-- Detail panel header -->
	<div class="flex items-center border-b border-line px-5 py-3">
		<h2 class="flex-1 font-sans text-sm font-bold text-ink">{m.admin_user_new_heading()}</h2>
	</div>

	<!-- Scrollable body -->
	<div class="flex-1 overflow-y-auto px-5 py-5">
		{#if showUnsavedWarning}
			<div
				class="mb-5 flex items-center justify-between rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300"
			>
				<span>{m.admin_unsaved_warning()}</span>
				<button
					type="button"
					onclick={() => {
						isDirty = false;
						showUnsavedWarning = false;
						if (discardTarget) goto(discardTarget);
					}}
					class="ml-4 shrink-0 font-sans text-xs font-bold tracking-widest text-amber-800 uppercase hover:text-amber-900 dark:text-amber-300"
				>
					{m.person_discard_changes()}
				</button>
			</div>
		{/if}
		{#if form?.error}
			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
				{form.error}
			</div>
		{/if}

		<form
			id="new-user-form"
			method="POST"
			use:enhance
			oninput={() => {
				isDirty = true;
				showUnsavedWarning = false;
			}}
			class="space-y-5"
		>
			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
				<AccountSection />
			</div>

			<!-- Profile -->
			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.profile_section_personal()}
				</h3>
				<UserProfileSection />
			</div>

			<!-- Groups -->
			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
					{m.admin_col_groups()}
				</h3>
				<UserGroupsSection groups={data.groups} />
			</div>
		</form>
	</div>

	<!-- Docked footer -->
	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
		<a
			href="/admin/users"
			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
		>
			{m.btn_cancel()}
		</a>
		<button
			type="submit"
			form="new-user-form"
			class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
		>
			{m.btn_create()}
		</button>
	</div>
</div>
