<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Separator } from '$lib/components/ui/separator';
	import { generateUUID } from '$lib/utils/uuid';

	type CartItem = {
		id: string;
		label: string;
		price: number;
		qty: number;
	};

	let cart = $state<CartItem[]>([]);
	let giftCardAmount = $state('25');
	let showGiftCardInput = $state(false);

	const subtotal = $derived(cart.reduce((sum, item) => sum + item.price * item.qty, 0));
	const itemCount = $derived(cart.reduce((sum, item) => sum + item.qty, 0));

	function formatCurrency(n: number): string {
		return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(n);
	}

	function addItem(label: string, price: number) {
		const existing = cart.find((i) => i.label === label);
		if (existing) {
			existing.qty++;
		} else {
			cart = [...cart, { id: generateUUID(), label, price, qty: 1 }];
		}
	}

	function addGiftCard() {
		const amt = parseFloat(giftCardAmount);
		if (isNaN(amt) || amt <= 0) return;
		addItem('Gift Card', amt);
		giftCardAmount = '25';
		showGiftCardInput = false;
	}

	function removeItem(id: string) {
		cart = cart.filter((i) => i.id !== id);
	}

	function updateQty(id: string, delta: number) {
		cart = cart
			.map((i) => {
				if (i.id !== id) return i;
				const next = i.qty + delta;
				return next <= 0 ? null : { ...i, qty: next };
			})
			.filter((i): i is CartItem => i !== null);
	}
</script>

<div class="rounded-xl border bg-card">
	<div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
		<h3 class="text-base font-semibold">Till Sales</h3>
	</div>

	<div class="grid grid-cols-2 gap-2 p-4 sm:grid-cols-3">
		<Button
			variant="outline"
			size="sm"
			class="justify-start gap-2"
			onclick={() => addItem('Cuticle Oil', 8)}
		>
			Cuticle Oil - &pound;8
		</Button>
		<Button
			variant="outline"
			size="sm"
			class="justify-start gap-2"
			onclick={() => addItem('Nail Files (Pack)', 5)}
		>
			Nail Files - &pound;5
		</Button>
		<Button
			variant="outline"
			size="sm"
			class="justify-start gap-2"
			onclick={() => addItem('Hand Cream', 6)}
		>
			Hand Cream - &pound;6
		</Button>
		<Button
			variant="outline"
			size="sm"
			class="justify-start gap-2"
			onclick={() => addItem('Base Coat', 7)}
		>
			Base Coat - &pound;7
		</Button>
		<Button
			variant="outline"
			size="sm"
			class="justify-start gap-2"
			onclick={() => addItem('Top Coat', 7)}
		>
			Top Coat - &pound;7
		</Button>
		<div class="relative">
			{#if showGiftCardInput}
				<div class="flex gap-1">
					<div class="relative flex-1">
						<span class="absolute top-1/2 left-2 -translate-y-1/2 text-xs text-gray-400"
							>&pound;</span
						>
						<Input
							type="text"
							inputmode="decimal"
							bind:value={giftCardAmount}
							class="h-9 pl-5 text-sm"
							onkeydown={(e) => {
								if (e.key === 'Enter') addGiftCard();
							}}
						/>
					</div>
					<Button size="sm" variant="outline" onclick={addGiftCard} class="h-9 px-2 text-xs"
						>Add</Button
					>
				</div>
			{:else}
				<Button
					variant="outline"
					size="sm"
					class="w-full justify-start gap-2"
					onclick={() => (showGiftCardInput = true)}
				>
					Gift Card
				</Button>
			{/if}
		</div>
	</div>

	<Separator />

	<div class="px-4 py-3">
		{#if cart.length === 0}
			<p class="py-6 text-center text-sm text-muted-foreground">
				Tap items above to add them to the sale.
			</p>
		{:else}
			<div class="max-h-48 space-y-1 overflow-y-auto">
				{#each cart as item (item.id)}
					<div class="flex items-center justify-between rounded-md border px-3 py-2 text-sm">
						<div class="min-w-0 flex-1">
							<span class="font-medium text-card-foreground">{item.label}</span>
							<span class="ml-2 text-xs text-muted-foreground"
								>{formatCurrency(item.price)} each</span
							>
						</div>
						<div class="flex shrink-0 items-center gap-2">
							<button
								type="button"
								class="flex h-6 w-6 items-center justify-center rounded border text-xs text-muted-foreground hover:bg-accent"
								onclick={() => updateQty(item.id, -1)}
							>
								&minus;
							</button>
							<span class="w-5 text-center text-sm font-semibold tabular-nums">{item.qty}</span>
							<button
								type="button"
								class="flex h-6 w-6 items-center justify-center rounded border text-xs text-muted-foreground hover:bg-accent"
								onclick={() => updateQty(item.id, 1)}
							>
								+
							</button>
							<span class="w-14 text-right text-sm font-semibold tabular-nums"
								>{formatCurrency(item.price * item.qty)}</span
							>
							<button
								type="button"
								aria-label="Remove item"
								class="ml-1 flex h-6 w-6 items-center justify-center rounded text-xs text-muted-foreground hover:bg-red-50 hover:text-red-600"
								onclick={() => removeItem(item.id)}
							>
								<svg
									class="h-3 w-3"
									viewBox="0 0 24 24"
									fill="none"
									stroke="currentColor"
									stroke-width="2"
								>
									<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
								</svg>
							</button>
						</div>
					</div>
				{/each}
			</div>

			<Separator class="my-3" />

			<div class="flex items-center justify-between">
				<span class="text-sm text-muted-foreground">
					{itemCount} item{itemCount !== 1 ? 's' : ''}
				</span>
				<span class="text-lg font-bold tabular-nums">{formatCurrency(subtotal)}</span>
			</div>

			<Button class="mt-3 w-full" disabled>
				Charge {formatCurrency(subtotal)}
			</Button>
			<p class="mt-1 text-xs text-muted-foreground">
				Payment flow and backend integration coming soon.
			</p>
		{/if}
	</div>
</div>
