<script lang="ts">
	import { enhance } from '$app/forms';

	interface RecipeRef {
		id?: string;
		name?: string;
	}

	interface Props {
		listId: string;
		itemId: string;
		name: string;
		quantity: number | null;
		unit: string | null;
		isChecked: boolean;
		sourceRecipes: RecipeRef[];
	}

	let { listId, itemId, name, quantity, unit, isChecked, sourceRecipes }: Props = $props();

	let recipeLabel = $derived(
		sourceRecipes.length > 0
			? sourceRecipes
					.map((r) => r.name)
					.filter(Boolean)
					.join(', ')
			: null
	);

	let quantityLabel = $derived(
		quantity ? `${quantity}${unit ? ` ${unit}` : ''}` : null
	);
</script>

<form method="POST" action="?/check" use:enhance={() => async ({ update }) => update({ reset: false })} class="group flex items-center gap-3 py-2">
	<input type="hidden" name="listId" value={listId} />
	<input type="hidden" name="itemId" value={itemId} />
	<input type="hidden" name="isChecked" value={!isChecked} />

	<button
		type="submit"
		role="checkbox"
		aria-checked={isChecked}
		aria-label="{isChecked ? 'Abhaken rückgängig' : 'Abhaken'}: {name}"
		class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--green)]
			{isChecked
			? 'border-[var(--green)] bg-[var(--green)] text-white'
			: 'border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--green-light)]'}"
	>
		{#if isChecked}
			<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2">
				<path d="M2 6l3 3 5-5" />
			</svg>
		{/if}
	</button>

	<div class="min-w-0 flex-1">
		<p
			class="font-[var(--font-sans)] text-[14px] {isChecked
				? 'text-[var(--color-text-muted)] line-through'
				: 'text-[var(--color-text)]'}"
		>
			{name}
		</p>
		{#if recipeLabel && !isChecked}
			<p class="truncate font-[var(--font-sans)] text-[11px] text-[var(--color-text-muted)]">
				Für: {recipeLabel}
			</p>
		{/if}
	</div>

	{#if quantityLabel}
		<span
			class="flex-shrink-0 font-[var(--font-sans)] text-[13px] {isChecked
				? 'text-[var(--color-text-muted)]'
				: 'text-[var(--color-text)]'}"
		>
			{quantityLabel}
		</span>
	{/if}
</form>
