<script lang="ts">
	import { toast } from 'svelte-sonner';
	import * as Dialog from '$lib/components/ui/dialog';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Checkbox } from '$lib/components/ui/checkbox';
	import type { Booking, BookingService, BookingDiscount } from '$lib/types/booking';
	import { authStore } from '$lib/stores/auth.svelte';

	interface Props {
		booking: Booking;
		onClose: () => void;
		onComplete: (payment: PaymentResult) => void;
	}

	let { booking, onClose, onComplete }: Props = $props();

	type PaymentStatus =
		| 'idle'
		| 'selecting'
		| 'card-processing'
		| 'card-polling'
		| 'cash-entering'
		| 'cash-confirming'
		| 'gift-entering'
		| 'gift-confirming'
		| 'saved-card-selecting'
		| 'saved-card-processing'
		| 'success'
		| 'error';

	type PaymentResult = {
		checkout_id: string;
		status: string;
		card_brand?: string;
		last4?: string;
		amount: number;
	};

	type PaymentMethod = 'card' | 'cash' | 'giftcard' | 'savedcard' | null;

	let status = $state<PaymentStatus>('idle');
	let selectedMethod = $state<PaymentMethod>(null);
	let checkoutId = $state<string | null>(null);
	let paymentResult = $state<PaymentResult | null>(null);
	let error = $state<string | null>(null);

	let customerBalance = $state(0);
	let loadingCustomerBalance = $state(false);
	let giftCardPaymentAmount = $state('');
	let savedCardList = $state<Array<{ id: string; card_brand: string; card_last4: string; card_expiry: string; cardholder_name?: string }>>([]);
	let loadingSavedCardList = $state(false);

	async function fetchCustomerGiftCardBalance() {
		if (!booking.user_id) return;
		loadingCustomerBalance = true;
		try {
			const res = await fetch(`/api/admin/users/${booking.user_id}/giftcard-balance`, {
				headers: { Authorization: `Bearer ${authStore.currentToken}` }
			});
			if (res.ok) {
				const data = await res.json();
				customerBalance = data.balance;
				giftCardPaymentAmount = Math.min(data.balance, totalDue).toFixed(2);
				if (data.balance > 0) {
					useAccountBalance = true;
				}
			}
		} catch {
			// ignore
		} finally {
			loadingCustomerBalance = false;
		}
	}

	async function fetchSavedCardList() {
		if (!booking.user_id) return;
		loadingSavedCardList = true;
		try {
			const res = await fetch(`/api/admin/users/${booking.user_id}/payment-methods`, {
				headers: { Authorization: `Bearer ${authStore.currentToken}` }
			});
			if (res.ok) {
				savedCardList = await res.json();
			}
		} catch {
			// ignore
		} finally {
			loadingSavedCardList = false;
		}
	}

	type ServiceOverride = {
		price: string;
		originalPrice: number;
	};

	let serviceOverrides = $state<Record<string, ServiceOverride>>({});

	$effect(() => {
		fetchCustomerGiftCardBalance();
		fetchSavedCardList();
		const services = booking.services ?? [];
		const overrides: Record<string, ServiceOverride> = {};
		for (const s of services) {
			const price = s.override_price ?? s.price ?? 0;
			overrides[s.service_id] = {
				price: price.toFixed(2),
				originalPrice: s.price ?? 0
			};
		}
		serviceOverrides = overrides;
	});

	function handlePriceInput(serviceId: string, value: string) {
		const cleaned = value.replace(/[^0-9.]/g, '');
		const firstDot = cleaned.indexOf('.');
		let sanitized: string;
		if (firstDot !== -1) {
			const integerPart = cleaned.substring(0, firstDot);
			const decimalPart = cleaned.substring(firstDot + 1).replace(/\./g, '');
			sanitized = integerPart + '.' + decimalPart;
		} else {
			sanitized = cleaned;
		}
		if (/^\d+(\.\d{0,2})?$/.test(sanitized) || sanitized === '') {
			serviceOverrides = {
				...serviceOverrides,
				[serviceId]: {
					...serviceOverrides[serviceId],
					price: sanitized
				}
			};
		}
	}

	let tipEnabled = $state(false);
	let selectedTipPercent = $state<number | null>(null);
	let customTipAmount = $state<string>('');

	let pollingInterval: ReturnType<typeof setInterval> | null = null;

	function selectTipPercent(percent: number) {
		selectedTipPercent = percent;
		customTipAmount = '';
		tipEnabled = true;
	}

	function handleCustomTipInput(e: Event) {
		const input = e.target as HTMLInputElement;
		const cleaned = input.value.replace(/[^0-9.]/g, '');
		const firstDot = cleaned.indexOf('.');
		let sanitized: string;
		if (firstDot !== -1) {
			const integerPart = cleaned.substring(0, firstDot);
			const decimalPart = cleaned.substring(firstDot + 1).replace(/\./g, '');
			sanitized = integerPart + '.' + decimalPart;
		} else {
			sanitized = cleaned;
		}
		if (/^\d+(\.\d{0,2})?$/.test(sanitized) || sanitized === '') {
			customTipAmount = sanitized;
		}
		selectedTipPercent = null;
		tipEnabled = customTipAmount !== '' && parseFloat(customTipAmount) > 0;
	}

	function getServicePrice(service: BookingService): number {
		const override = serviceOverrides[service.service_id];
		if (override && override.price !== '') {
			const parsed = parseFloat(override.price);
			if (!isNaN(parsed) && parsed > 0) return parsed;
		}
		return service.override_price ?? service.price ?? 0;
	}

	let subtotal = $derived((booking.services ?? []).reduce((sum, s) => sum + getServicePrice(s), 0));
	let discountSum = $derived((booking.discounts ?? []).reduce((sum, d) => sum + d.discount_amount, 0));
	let netTotal = $derived(Math.max(0, subtotal - discountSum));

	let tipPercentages = $derived.by(() => {
		if (netTotal <= 0) return [];
		return [
			{ pct: 10, amount: Math.round(netTotal * 0.1 * 100) / 100 },
			{ pct: 15, amount: Math.round(netTotal * 0.15 * 100) / 100 },
			{ pct: 20, amount: Math.round(netTotal * 0.2 * 100) / 100 }
		];
	});

	let tipMultiplier = $derived(
		selectedTipPercent !== null
			? 1 + selectedTipPercent / 100
			: customTipAmount && parseFloat(customTipAmount) > 0
				? 1 + parseFloat(customTipAmount) / netTotal
				: 1
	);

	let totalWithTip = $derived(tipEnabled ? netTotal * tipMultiplier : netTotal);
	let tipDisplay = $derived(
		selectedTipPercent !== null
			? `${selectedTipPercent}%`
			: customTipAmount && parseFloat(customTipAmount) > 0
				? `£${parseFloat(customTipAmount).toFixed(2)}`
				: ''
	);

	let totalDue = $derived(tipEnabled ? totalWithTip : netTotal);

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

	async function handleCardPayment() {
		const finalAmount = totalDue;

		if (isNaN(finalAmount) || finalAmount <= 0) {
			toast.error('Please enter a valid amount');
			return;
		}

		status = 'card-processing';
		error = null;

		try {
			const response = await fetch(`/api/admin/bookings/${booking.id}/payment`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					Authorization: `Bearer ${authStore.currentToken}`
				},
				body: JSON.stringify({
					amount: Math.round(finalAmount * 100),
					payment_type: 'full',
					tip_enabled: tipEnabled
				})
			});

			if (!response.ok) {
				const errData = await response.text();
				throw new Error(errData || 'Failed to initiate payment');
			}

			const data = await response.json();
			checkoutId = data.checkout_id;
			status = 'card-polling';
			startPolling();
		} catch (err) {
			status = 'error';
			error = err instanceof Error ? err.message : 'Failed to initiate payment';
			toast.error(error ?? 'Unknown error');
		}
	}

	function startPolling() {
		if (!checkoutId) return;

		pollingInterval = setInterval(async () => {
			try {
				const response = await fetch(
					`/api/admin/payments/${checkoutId}/status?booking_id=${booking.id}`,
					{
						method: 'GET',
						headers: {
							'Content-Type': 'application/json',
							Authorization: `Bearer ${authStore.currentToken}`
						}
					}
				);

				if (!response.ok) {
					throw new Error('Failed to check payment status');
				}

				const data = await response.json();

				if (data.status === 'COMPLETED') {
					stopPolling();
					status = 'success';
					paymentResult = {
						checkout_id: checkoutId!,
						status: data.status,
						card_brand: data.card_brand,
						last4: data.last4,
						amount: data.amount
					};
					toast.success('Payment successful');
					onComplete(paymentResult);
				} else if (data.status === 'FAILED') {
					stopPolling();
					status = 'error';
					error = data.error_message || 'Payment failed';
					toast.error(error as string);
				}
			} catch (err) {
				stopPolling();
				status = 'error';
				error = 'Failed to check payment status';
				toast.error(error);
			}
		}, 2000);
	}

	function stopPolling() {
		if (pollingInterval) {
			clearInterval(pollingInterval);
			pollingInterval = null;
		}
	}

	function handleClose() {
		stopPolling();
		onClose();
	}

	function resetToSelect() {
		stopPolling();
		status = 'idle';
		selectedMethod = null;
		checkoutId = null;
		error = null;
	}

	$effect(() => {
		return () => {
			stopPolling();
		};
	});

	let cashAmount = $state<string>('');
	let cashAmountNum = $derived(cashAmount === '' ? 0 : parseFloat(cashAmount));
	let changeDue = $derived(cashAmountNum > totalDue ? cashAmountNum - totalDue : 0);
	let extraAsTip = $state(false);

	function handleCashInput(e: Event) {
		const input = e.target as HTMLInputElement;
		const cleaned = input.value.replace(/[^0-9.]/g, '');
		const firstDot = cleaned.indexOf('.');
		let sanitized: string;
		if (firstDot !== -1) {
			const integerPart = cleaned.substring(0, firstDot);
			const decimalPart = cleaned.substring(firstDot + 1).replace(/\./g, '');
			sanitized = integerPart + '.' + decimalPart;
		} else {
			sanitized = cleaned;
		}
		if (/^\d+(\.\d{0,2})?$/.test(sanitized) || sanitized === '') {
			cashAmount = sanitized;
		}
	}

	async function handleCashPayment() {
		if (cashAmountNum < totalDue) {
			toast.error('Cash amount must cover the total');
			return;
		}

		const tipAmount = extraAsTip ? cashAmountNum - totalDue : 0;

		status = 'cash-confirming';
		error = null;

		try {
			const body: Record<string, unknown> = {
				amount: Math.round(totalDue * 100),
				payment_type: 'full',
				payment_method: 'cash'
			};
			if (tipAmount > 0) {
				body.tip_enabled = true;
				body.tip_amount = Math.round(tipAmount * 100);
			}

			const response = await fetch(`/api/admin/bookings/${booking.id}/payment`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					Authorization: `Bearer ${authStore.currentToken}`
				},
				body: JSON.stringify(body)
			});

			if (!response.ok) {
				const errData = await response.text();
				throw new Error(errData || 'Failed to process payment');
			}

			const data = await response.json();
			status = 'success';
			paymentResult = {
				checkout_id: data.checkout_id || data.id || '',
				status: 'COMPLETED',
				amount: data.amount
			};
			toast.success('Cash payment recorded');
			onComplete(paymentResult);
		} catch (err) {
			status = 'error';
			error = err instanceof Error ? err.message : 'Failed to process payment';
			toast.error(error ?? 'Unknown error');
		}
	}

	let giftCardId = $state('');
	let useAccountBalance = $state(false);

	function formatAndPreserveCursor(
		input: HTMLInputElement,
		formatter: (val: string) => string,
		charRegex: RegExp = /\d/
	): string {
		const rawValue = input.value;
		const oldSelectionStart = input.selectionStart || 0;

		let charsBeforeCursor = 0;
		for (let i = 0; i < oldSelectionStart; i++) {
			if (charRegex.test(rawValue[i])) {
				charsBeforeCursor++;
			}
		}

		const formatted = formatter(rawValue);
		input.value = formatted;

		let newSelectionStart = 0;
		let charsFound = 0;
		for (let i = 0; i < formatted.length; i++) {
			if (charsFound === charsBeforeCursor) {
				break;
			}
			if (charRegex.test(formatted[i])) {
				charsFound++;
			}
			newSelectionStart++;
		}

		requestAnimationFrame(() => {
			input.setSelectionRange(newSelectionStart, newSelectionStart);
		});

		return formatted;
	}

	function formatGiftCardId(value: string): string {
		let raw = value.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
		if (raw.length > 12) raw = raw.slice(0, 12);
		let formatted = '';
		if (raw.length > 0) formatted += raw.slice(0, 4);
		if (raw.length > 4) formatted += '-' + raw.slice(4, 8);
		if (raw.length > 8) formatted += '-' + raw.slice(8, 12);
		return formatted.toUpperCase();
	}

	function handleGiftCardInput(e: Event) {
		const input = e.target as HTMLInputElement;
		const formatted = formatAndPreserveCursor(input, formatGiftCardId, /[a-zA-Z0-9]/);
		giftCardId = formatted;
	}

	let giftCardValid = $derived(
		useAccountBalance || giftCardId.replace(/-/g, '').length === 12
	);

	async function handleGiftCardPayment() {
		if (!giftCardValid) {
			toast.error('Please enter a valid 12-character gift card code');
			return;
		}

		let payAmountCents = Math.round(totalDue * 100);
		if (useAccountBalance) {
			const parsedAmt = parseFloat(giftCardPaymentAmount);
			if (isNaN(parsedAmt) || parsedAmt <= 0) {
				toast.error('Please enter a valid payment amount');
				return;
			}
			if (parsedAmt > customerBalance) {
				toast.error('Payment amount exceeds available balance');
				return;
			}
			payAmountCents = Math.round(parsedAmt * 100);
		}

		status = 'gift-confirming';
		error = null;

		try {
			const body: any = {
				amount: payAmountCents,
				payment_type: 'full',
				payment_method: 'giftcard'
			};
			if (!useAccountBalance) {
				body.gift_card_id = giftCardId.replace(/-/g, '');
			}

			const response = await fetch(`/api/admin/bookings/${booking.id}/payment`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					Authorization: `Bearer ${authStore.currentToken}`
				},
				body: JSON.stringify(body)
			});

			if (!response.ok) {
				const errData = await response.text();
				throw new Error(errData || 'Failed to process gift card');
			}

			const data = await response.json();
			status = 'success';
			paymentResult = {
				checkout_id: data.checkout_id || data.id || '',
				status: 'COMPLETED',
				amount: data.amount
			};
			toast.success('Gift card payment recorded');
			onComplete(paymentResult);
		} catch (err) {
			status = 'error';
			error = err instanceof Error ? err.message : 'Failed to process gift card';
			toast.error(error ?? 'Unknown error');
		}
	}

	// Saved cards
	let savedCards = $state<Array<{ id: string; card_brand: string; card_last4: string; card_expiry: string; cardholder_name?: string }>>([]);
	let loadingSavedCards = $state(false);
	let selectedSavedCardId = $state<string | null>(null);

	async function fetchSavedCards() {
		if (!booking.user_id) return;
		loadingSavedCards = true;
		savedCards = [];
		selectedSavedCardId = null;
		try {
			const res = await fetch(`/api/admin/users/${booking.user_id}/payment-methods`, {
				headers: { Authorization: `Bearer ${authStore.currentToken}` }
			});
			if (res.ok) {
				savedCards = await res.json();
			}
		} catch {
			toast.error('Failed to load saved cards');
		} finally {
			loadingSavedCards = false;
		}
	}

	async function handleSavedCardPayment() {
		if (!selectedSavedCardId) {
			toast.error('Please select a saved card');
			return;
		}

		status = 'saved-card-processing';
		error = null;

		try {
			const response = await fetch(`/api/admin/bookings/${booking.id}/payment`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					Authorization: `Bearer ${authStore.currentToken}`
				},
				body: JSON.stringify({
					amount: Math.round(totalDue * 100),
					payment_type: 'full',
					payment_method: 'saved_card',
					saved_card_id: selectedSavedCardId
				})
			});

			if (!response.ok) {
				const errData = await response.text();
				throw new Error(errData || 'Failed to process saved card payment');
			}

			const data = await response.json();
			status = 'success';
			paymentResult = {
				checkout_id: data.checkout_id || data.id || '',
				status: 'COMPLETED',
				card_brand: data.card_brand,
				last4: data.card_last4,
				amount: data.amount
			};
			toast.success('Saved card payment successful');
			onComplete(paymentResult);
		} catch (err) {
			status = 'error';
			error = err instanceof Error ? err.message : 'Failed to process saved card payment';
			toast.error(error ?? 'Unknown error');
		}
	}

	$effect(() => {
		if (selectedMethod === 'cash') {
			cashAmount = totalDue.toFixed(2);
			extraAsTip = false;
		}
		if (selectedMethod === 'giftcard') {
			giftCardId = '';
		}
		if (selectedMethod === 'savedcard') {
			fetchSavedCards();
		}
	});
</script>

<Dialog.Root
	open={true}
	onOpenChange={(open) => !open && handleClose()}
>
	<Dialog.Content class="max-h-[90vh] max-w-lg overflow-y-auto">
		<Dialog.Header>
			<Dialog.Title class="text-xl font-semibold">Take Payment</Dialog.Title>
		</Dialog.Header>

		{#if status === 'idle'}
			<div class="space-y-4">
				<div class="rounded-md border border-gray-200 bg-gray-50 p-4">
					<div class="mb-3 text-sm font-semibold text-gray-700">Services</div>
					<div
						class="grid grid-cols-1 {(booking.services?.length ?? 0) > 1
							? 'sm:grid-cols-2'
							: ''} gap-3"
					>
						{#each booking.services ?? [] as service, i (service.service_id ?? `svc-${i}`)}
							<div class="rounded-lg border bg-white p-3">
								<div class="mb-2 text-sm font-medium">
									{service.service_name || 'Unknown Service'}
								</div>
								<div class="flex items-center gap-2">
									<span class="text-xs text-gray-500">£</span>
									<input
										type="text"
										inputmode="decimal"
									tabindex={-1}
										class="flex h-8 w-24 rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
										value={serviceOverrides[service.service_id]?.price ??
											service.price?.toFixed(2) ??
											'0.00'}
										oninput={(e) => handlePriceInput(service.service_id, e.currentTarget.value)}
									/>
									{#if serviceOverrides[service.service_id] && Math.abs(parseFloat(serviceOverrides[service.service_id].price) - serviceOverrides[service.service_id].originalPrice) > 0.01}
										<span class="text-xs text-amber-600">
											(was £{serviceOverrides[service.service_id].originalPrice.toFixed(2)})
										</span>
									{/if}
								</div>
							</div>
						{/each}
					</div>
				</div>

				{#if booking.discounts && booking.discounts.length > 0}
					<div class="rounded-md border border-fuchsia-100 bg-fuchsia-50/40 p-4">
						<div class="mb-3 flex items-center justify-between">
							<div class="text-sm font-semibold text-fuchsia-800 flex items-center gap-1.5">
								<svg class="h-4 w-4 text-fuchsia-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
									<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
									<line x1="7" y1="7" x2="7.01" y2="7"></line>
								</svg>
								Applied Discounts
							</div>
							<span class="rounded-full bg-fuchsia-100 px-2 py-0.5 text-xs font-semibold text-fuchsia-700">
								{((discountSum / subtotal) * 100).toFixed(0)}% Off Total
							</span>
						</div>
						<div class="space-y-2 text-sm">
							{#each booking.discounts as d}
								<div class="flex items-center justify-between text-gray-600">
									<div class="flex items-center gap-1.5">
										<span class="h-1.5 w-1.5 rounded-full bg-fuchsia-500"></span>
										<span>
											{#if d.discount_source === 'loyalty'}
												Loyalty Stamp Card (10% Off)
											{:else if d.campaign_name}
												{d.campaign_name}
											{:else}
												Promo Campaign ({d.discount_percent}% Off)
											{/if}
										</span>
									</div>
									<span class="font-medium text-fuchsia-600">-{formatCurrency(d.discount_amount)}</span>
								</div>
							{/each}
						</div>
					</div>
				{/if}

				<div class="flex justify-between items-center rounded-md border border-gray-200 bg-white p-4">
					<span class="text-base font-semibold text-gray-700">Total</span>
					<div class="flex items-baseline gap-2.5">
						{#if discountSum > 0.01}
							<span class="text-sm font-medium text-gray-400 line-through">{formatCurrency(subtotal)}</span>
						{/if}
						<span class="text-xl font-bold text-gray-900">{formatCurrency(totalDue)}</span>
					</div>
				</div>

				{#if tipEnabled}
					<div class="flex justify-between rounded-md border border-green-200 bg-green-50 p-3">
						<span class="text-sm font-medium text-green-800">
							Total with Tip ({tipDisplay})
						</span>
						<span class="text-lg font-bold text-green-800">
							{formatCurrency(totalWithTip)}
						</span>
					</div>
				{/if}

				<div class="grid grid-cols-2 gap-3 {savedCardList.length > 0 ? 'sm:grid-cols-4' : 'sm:grid-cols-3'}">
					<button
						type="button"
						class="rounded-lg border py-6 text-center text-sm font-semibold transition-colors {selectedMethod ===
						'card'
							? 'border-input bg-fuchsia-100 text-foreground'
							: 'border-input hover:bg-fuchsia-50'}"
						onclick={() => {
							selectedMethod = 'card';
							status = 'selecting';
						}}
					>
						<svg
							class="mx-auto mb-2 h-8 w-8"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
						>
							<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
							<line x1="1" y1="10" x2="23" y2="10" />
						</svg>
						Card
					</button>
					<button
						type="button"
						class="rounded-lg border py-6 text-center text-sm font-semibold transition-colors {selectedMethod ===
						'cash'
							? 'border-input bg-fuchsia-100 text-foreground'
							: 'border-input hover:bg-fuchsia-50'}"
						onclick={() => {
							selectedMethod = 'cash';
							status = 'cash-entering';
						}}
					>
						<svg
							class="mx-auto mb-2 h-8 w-8"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
						>
							<line x1="12" y1="1" x2="12" y2="23" />
							<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
						</svg>
						Cash
					</button>
					{#if savedCardList.length > 0}
						<button
							type="button"
							class="hidden rounded-lg border py-6 text-center text-sm font-semibold transition-colors sm:block {selectedMethod ===
							'savedcard'
								? 'border-input bg-fuchsia-100 text-foreground'
								: 'border-input hover:bg-fuchsia-50'}"
							onclick={() => {
								selectedMethod = 'savedcard';
								status = 'saved-card-selecting';
							}}
						>
							<svg
								class="mx-auto mb-2 h-8 w-8"
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
							>
								<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
								<path d="M6 10h12" />
								<path d="M6 14h6" />
							</svg>
							Saved Card
						</button>
					{/if}
					<button
						type="button"
						class="hidden rounded-lg border py-6 text-center text-sm font-semibold transition-colors sm:block {selectedMethod ===
						'giftcard'
							? 'border-input bg-fuchsia-100 text-foreground'
							: 'border-input hover:bg-fuchsia-50'}"
						onclick={() => {
							selectedMethod = 'giftcard';
							status = 'gift-entering';
						}}
					>
						<svg
							class="mx-auto mb-2 h-8 w-8"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
						>
							<polyline points="20 12 20 22 4 22 4 12" />
							<rect x="2" y="7" width="20" height="5" />
							<line x1="12" y1="22" x2="12" y2="7" />
							<path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
							<path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
						</svg>
						Gift Card
					</button>
				</div>

				<div class="sm:hidden flex flex-wrap gap-3">
					{#if savedCardList.length > 0}
						<button
							type="button"
							class="text-sm text-gray-600 underline hover:text-gray-900"
							onclick={() => {
								selectedMethod = 'savedcard';
								status = 'saved-card-selecting';
							}}
						>
							Pay with Saved Card
						</button>
					{/if}
					<button
						type="button"
						class="text-sm text-gray-600 underline hover:text-gray-900"
						onclick={() => {
							selectedMethod = 'giftcard';
							status = 'gift-entering';
						}}
					>
						Pay with Gift Card
					</button>
				</div>

				<div class="flex gap-3">
					<Button variant="ghost" onclick={handleClose} class="flex-1">Cancel</Button>
				</div>
			</div>
		{:else if status === 'selecting'}
			<div class="space-y-4">
				<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
					<span class="text-base font-semibold text-gray-700">Total</span>
					<span class="text-xl font-bold text-gray-900">{formatCurrency(totalDue)}</span>
				</div>

				<div class="space-y-3">
					<span class="text-sm font-medium text-gray-700">Add a Tip</span>
					<div class="grid grid-cols-3 gap-2">
						{#each tipPercentages as tip (tip.pct)}
							<button
								type="button"
								class="rounded-lg border py-3 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50 {selectedTipPercent ===
								tip.pct
									? 'border-input bg-fuchsia-100 text-foreground'
									: 'border-input'}"
								onclick={() => selectTipPercent(tip.pct)}
							>
								<div>{tip.pct}%</div>
								<div class="text-xs font-normal text-gray-500">£{tip.amount.toFixed(2)}</div>
							</button>
						{/each}
					</div>
					<div class="relative">
						<span class="absolute top-1/2 left-3 -translate-y-1/2 text-gray-500">£</span>
						<Input
							type="text"
							inputmode="decimal"
						tabindex={-1}
							placeholder="Custom tip amount"
							value={customTipAmount}
							oninput={handleCustomTipInput}
							class="pl-7"
						/>
					</div>
				</div>

				{#if tipEnabled}
					<div class="flex justify-between rounded-md border border-green-200 bg-green-50 p-3">
						<span class="text-sm font-medium text-green-800">
							Total with Tip ({tipDisplay})
						</span>
						<span class="text-lg font-bold text-green-800">
							{formatCurrency(totalWithTip)}
						</span>
					</div>
				{/if}

				<div class="flex gap-3">
					<Button variant="ghost" onclick={resetToSelect} class="flex-1">Back</Button>
					<Button onclick={handleCardPayment} class="flex-1 bg-green-600 hover:bg-green-700">
						Charge Card
					</Button>
				</div>
			</div>
		{:else if status === 'card-processing' || status === 'card-polling'}
			<div class="flex flex-col items-center justify-center py-8">
				<div
					class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"
				></div>
				<p class="text-lg font-medium text-gray-700">Waiting for customer to tap card...</p>
				<p class="mt-2 text-sm text-gray-500">This may take a few moments</p>
			</div>
		{:else if status === 'cash-entering'}
			<div class="space-y-4">
				<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
					<span class="text-base font-semibold text-gray-700">Total Due</span>
					<span class="text-xl font-bold text-gray-900">{formatCurrency(totalDue)}</span>
				</div>

				<div>
					<label for="cash-amount" class="text-sm font-medium text-gray-700"> Cash Received </label>
					<div class="relative mt-1">
						<span class="absolute top-1/2 left-3 -translate-y-1/2 text-gray-500">£</span>
						<Input
							id="cash-amount"
							type="text"
							inputmode="decimal"
						tabindex={-1}
							value={cashAmount}
							oninput={handleCashInput}
							class="pl-7 text-lg font-semibold"
						/>
					</div>
				</div>

				{#if cashAmountNum >= totalDue}
					<div class="rounded-md border border-green-200 bg-green-50 p-4">
						<div class="flex justify-between">
							<span class="text-sm font-medium text-green-800">Change Due</span>
							<span class="text-lg font-bold text-green-800">{formatCurrency(changeDue)}</span>
						</div>
						{#if changeDue > 0}
							<div class="mt-2 flex items-center gap-2">
								<Checkbox id="keep-change" bind:checked={extraAsTip} />
								<label for="keep-change" class="text-sm text-green-700">
									Keep {formatCurrency(changeDue)} as tip
								</label>
							</div>
						{/if}
					</div>
				{/if}

				<div class="flex gap-3">
					<Button variant="ghost" onclick={resetToSelect} class="flex-1">Back</Button>
					<Button
						onclick={handleCashPayment}
						class="flex-1 bg-green-600 hover:bg-green-700"
						disabled={cashAmountNum < totalDue}
					>
						Confirm Cash
					</Button>
				</div>
			</div>
		{:else if status === 'cash-confirming'}
			<div class="flex flex-col items-center justify-center py-8">
				<div
					class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"
				></div>
				<p class="text-lg font-medium text-gray-700">Processing cash payment...</p>
			</div>
		{:else if status === 'gift-entering'}
			<div class="space-y-4">
				<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
					<span class="text-base font-semibold text-gray-700">Total Due</span>
					<span class="text-xl font-bold text-gray-900">{formatCurrency(totalDue)}</span>
				</div>

				{#if booking.user_id && customerBalance > 0}
					<div class="space-y-2">
						<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider block">Source</span>
						<div class="grid grid-cols-2 gap-2">
							<button
								type="button"
								class="rounded-lg border py-2 text-center text-xs font-medium transition-colors {useAccountBalance
									? 'border-fuchsia-600 bg-fuchsia-50 text-fuchsia-900 font-semibold'
									: 'border-gray-200 hover:bg-gray-50'}"
								onclick={() => useAccountBalance = true}
							>
								Account Balance ({formatCurrency(customerBalance)})
							</button>
							<button
								type="button"
								class="rounded-lg border py-2 text-center text-xs font-medium transition-colors {!useAccountBalance
									? 'border-fuchsia-600 bg-fuchsia-50 text-fuchsia-900 font-semibold'
									: 'border-gray-200 hover:bg-gray-50'}"
								onclick={() => useAccountBalance = false}
							>
								Physical Gift Card Code
							</button>
						</div>
					</div>
				{/if}

				{#if useAccountBalance}
					<div>
						<label for="giftcard-amount" class="text-sm font-medium text-gray-700">Amount to pay with Balance (£)</label>
						<Input
							id="giftcard-amount"
							type="text"
							inputmode="decimal"
							value={giftCardPaymentAmount}
							oninput={(e) => giftCardPaymentAmount = (e.target as HTMLInputElement).value}
							class="mt-1 font-mono text-lg"
						/>
						<p class="mt-1 text-xs text-gray-500">
							Available balance: {formatCurrency(customerBalance)}. Maximum of total due or balance can be used.
						</p>
					</div>
				{:else}
					<div>
						<label for="gift-card-id" class="text-sm font-medium text-gray-700"> Gift Card Code </label>
						<Input
							id="gift-card-id"
							type="text"
							inputmode="text"
							tabindex={-1}
							value={giftCardId}
							oninput={handleGiftCardInput}
							placeholder="XXXX-XXXX-XXXX"
							maxlength={14}
							class="mt-1 font-mono text-lg tracking-widest"
						/>
						<p class="mt-1 text-xs text-gray-500">Enter the 12-character code printed on the gift card</p>
					</div>
				{/if}

				<div class="flex gap-3">
					<Button variant="ghost" onclick={resetToSelect} class="flex-1">Back</Button>
					<Button
						onclick={handleGiftCardPayment}
						class="flex-1 bg-green-600 hover:bg-green-700 text-white"
						disabled={!giftCardValid}
					>
						Apply Gift Card
					</Button>
				</div>
			</div>
		{:else if status === 'gift-confirming'}
			<div class="flex flex-col items-center justify-center py-8">
				<div
					class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"
				></div>
				<p class="text-lg font-medium text-gray-700">Processing gift card...</p>
			</div>
		{:else if status === 'saved-card-selecting'}
			<div class="space-y-4">
				<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
					<span class="text-base font-semibold text-gray-700">Total Due</span>
					<span class="text-xl font-bold text-gray-900">{formatCurrency(totalDue)}</span>
				</div>

				{#if loadingSavedCards}
					<div class="flex justify-center py-8">
						<div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-fuchsia-600"></div>
					</div>
				{:else if savedCards.length === 0}
					<div class="rounded-md border border-gray-200 bg-gray-50 p-6 text-center">
						<p class="text-sm text-gray-600">No saved cards found for this customer.</p>
						<p class="mt-1 text-xs text-gray-500">Add a card via Square Dashboard or use another payment method.</p>
					</div>
				{:else}
					<div class="space-y-2">
						<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider block">Select a Saved Card</span>
						{#each savedCards as card (card.id)}
							<button
								type="button"
								class="w-full rounded-lg border p-3 text-left transition-colors {selectedSavedCardId === card.id
									? 'border-fuchsia-600 bg-fuchsia-50'
									: 'border-gray-200 hover:bg-gray-50'}"
								onclick={() => selectedSavedCardId = card.id}
							>
								<div class="flex items-center justify-between">
									<div class="flex items-center gap-2">
										<svg class="h-5 w-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
											<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
											<line x1="1" y1="10" x2="23" y2="10" />
										</svg>
										<span class="font-medium text-gray-900">{card.card_brand} ••••{card.card_last4}</span>
									</div>
									<span class="text-xs text-gray-500">{card.card_expiry}</span>
								</div>
								{#if card.cardholder_name}
									<div class="mt-1 text-xs text-gray-500">{card.cardholder_name}</div>
								{/if}
							</button>
						{/each}
					</div>

					<div class="rounded-md border border-amber-200 bg-amber-50 p-3 flex items-start gap-2">
						<svg class="mt-0.5 h-4 w-4 shrink-0 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
							<circle cx="12" cy="12" r="10" />
							<line x1="12" y1="8" x2="12" y2="12" />
							<line x1="12" y1="16" x2="12.01" y2="16" />
						</svg>
						<p class="text-xs text-amber-800">This card may require bank app confirmation to complete. Ensure the customer has their phone ready.</p>
					</div>
				{/if}

				<div class="flex gap-3">
					<Button variant="ghost" onclick={resetToSelect} class="flex-1">Back</Button>
					<Button
						onclick={handleSavedCardPayment}
						class="flex-1 bg-green-600 hover:bg-green-700 text-white"
						disabled={!selectedSavedCardId}
					>
						Charge Saved Card
					</Button>
				</div>
			</div>
		{:else if status === 'saved-card-processing'}
			<div class="flex flex-col items-center justify-center py-8">
				<div
					class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"
				></div>
				<p class="text-lg font-medium text-gray-700">Processing saved card payment...</p>
			</div>
		{:else if status === 'error' && error}
			<div class="space-y-4">
				<div class="rounded-md border border-red-200 bg-red-50 p-3">
					<p class="text-sm text-red-800">{error}</p>
				</div>
				<div class="flex gap-3">
					<Button variant="ghost" onclick={handleClose} class="flex-1">Close</Button>
					<Button onclick={resetToSelect} class="flex-1">Try Again</Button>
				</div>
			</div>
		{:else if status === 'success' && paymentResult}
			<div class="space-y-4">
				<div class="flex flex-col items-center justify-center py-4">
					<div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="h-8 w-8 text-green-600"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fill-rule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clip-rule="evenodd"
							/>
						</svg>
					</div>
					<h3 class="text-xl font-semibold text-gray-900">Payment Successful</h3>
				</div>

				<div class="rounded-md border border-gray-200 bg-gray-50 p-4">
					<div class="space-y-3">
						<div class="flex justify-between">
							<span class="text-sm text-gray-600">Amount</span>
							<span class="font-semibold text-gray-900">
								{formatCurrency(paymentResult.amount)}
							</span>
						</div>
						{#if paymentResult.card_brand}
							<div class="flex justify-between">
								<span class="text-sm text-gray-600">Card</span>
								<span class="font-medium text-gray-900">
									{paymentResult.card_brand} ****{paymentResult.last4}
								</span>
							</div>
						{/if}
						<div class="flex justify-between">
							<span class="text-sm text-gray-600">Status</span>
							<span class="font-medium text-green-600">Completed</span>
						</div>
					</div>
				</div>

				<Button onclick={handleClose} class="w-full">Done</Button>
			</div>
		{/if}
	</Dialog.Content>
</Dialog.Root>
