<script lang="ts">
import { enhance } from '$app/forms';
import { m } from '$lib/paraglide/messages.js';
import { getConfirmService } from '$lib/shared/services/confirm.svelte';

type FlatTag = {
	id: string;
	name: string;
	color?: string;
	parentId?: string;
	documentCount: number;
};

interface Props {
	tag: { id: string; documentCount: number; parentId?: string };
	allTags: FlatTag[];
}

let { tag, allTags }: Props = $props();

let deleteForm: HTMLFormElement;
const { confirm } = getConfirmService();

let selectedMode: 'single' | 'subtree' | null = $state(null);
const canDelete = $derived(selectedMode !== null);

async function handleDelete() {
	const ok = await confirm({ title: m.admin_tag_delete_confirm(), destructive: true });
	if (ok) deleteForm.requestSubmit();
}

// Count all descendants (recursive walk through allTags)
const descendantCount = $derived.by(() => {
	let count = 0;
	const queue = [tag.id];
	while (queue.length) {
		const cur = queue.shift()!;
		for (const t of allTags) {
			if (t.parentId === cur) {
				count++;
				queue.push(t.id);
			}
		}
	}
	return count;
});
</script>

<div class="rounded-sm border border-danger bg-danger/5 p-5">
	<h3 class="mb-3 text-xs font-bold tracking-widest text-danger uppercase">{m.btn_delete()}</h3>

	<!-- Impact summary -->
	<p class="mb-4 text-xs text-ink-2">
		{m.admin_tag_delete_impact({ docs: tag.documentCount, descendants: descendantCount })}
	</p>

	<!-- Radios -->
	<div class="mb-4 flex flex-col gap-3">
		<label class="flex cursor-pointer items-start gap-3">
			<input
				type="radio"
				name="deleteMode"
				value="single"
				bind:group={selectedMode}
				class="mt-0.5"
			/>
			<div>
				<span class="text-sm font-medium text-ink">{m.admin_tag_delete_only_this()}</span>
				<p class="text-xs text-ink-3">
					{#if tag.parentId}
						{m.admin_tag_delete_only_this_sub({ parent: tag.parentId })}
					{:else}
						{m.admin_tag_delete_only_this_sub_root()}
					{/if}
				</p>
			</div>
		</label>

		<label class="flex cursor-pointer items-start gap-3">
			<input
				type="radio"
				name="deleteMode"
				value="subtree"
				bind:group={selectedMode}
				class="mt-0.5"
			/>
			<div>
				<span class="text-sm font-medium text-ink">{m.admin_tag_delete_subtree()}</span>
				{#if descendantCount > 0}
					<p class="text-xs font-medium text-warning">
						{m.admin_tag_delete_subtree_warn({ count: descendantCount })}
					</p>
				{/if}
			</div>
		</label>
	</div>

	<!-- Confirm form -->
	<form bind:this={deleteForm} method="POST" action="?/delete" use:enhance>
		<input type="hidden" name="deleteMode" value={selectedMode ?? ''} />
		<button
			type="button"
			data-testid="delete-submit-btn"
			disabled={!canDelete}
			onclick={handleDelete}
			class="rounded-sm bg-danger px-4 py-2 font-sans text-xs font-bold tracking-widest text-danger-fg uppercase transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-40"
		>
			{selectedMode === 'subtree' ? m.admin_tag_delete_subtree_confirm_btn() : m.btn_delete()}
		</button>
	</form>
</div>
