Customer

Name

{formatUserName( booking.user?.full_name || '—', booking.user?.previous_first_name, booking.user?.previous_last_name )}

{booking.user?.email || '—'}

Phone

{booking.user?.phone || '—'}

Time

{(() => { const date = parseWallClockDate(booking.start_time); return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }); })()}

Services ({services.length})

{#if services.length === 0}

No services added yet. Click "Add Service" to begin.

{:else}

{#each services as service, index (index)}

{service.service_name}

{formatDuration( service.override_duration_minutes ?? service.duration_minutes ?? 0 )} • £{(service.override_price ?? service.price ?? 0).toFixed(2)}

{#if service.override_price !== undefined || service.override_duration_minutes !== undefined}

Modified

{/if}

{/each}

Total: {formatDuration(totalDuration)} £{totalPrice.toFixed(2)}

{/if}

{#if booking?.payments && booking.payments.length > 0}

Payments ({booking.payments.length})

{#each booking.payments as payment, index (index)}

{payment.payment_type === 'deposit' ? 'Deposit' : payment.payment_type === 'full' ? 'Full Payment' : payment.payment_type} {#if payment.payment_method} via {payment.payment_method} {/if}

{payment.status} | £{(payment.amount / 100).toFixed(2)} {#if payment.invoice_number} | Inv: {payment.invoice_number} {/if} {#if payment.is_vat_applicable && payment.net_amount != null} | Net: £{payment.net_amount.toFixed(2)} | VAT ({payment.vat_rate || 0}%): £{payment.vat_amount?.toFixed(2)} {/if}

{parseWallClockDate(payment.created_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}

{#if payment.status === 'completed' && payment.payment_method !== 'discount' && payment.payment_method !== 'on_the_house'} {/if}

{/each}

{/if}

Notes

<CharCounter text={notes} />
					{#if notes.trim() !== (booking.notes || '')}
						<div class="mt-1 text-xs text-emerald-600">Notes will be saved</div>
					{/if}
				</div>
			</div>
		{/if}

<Modal.Footer class="flex items-center justify-end gap-2">
			<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
			<Button onclick={handleSave} disabled={saving || loading}>
				{saving ? 'Saving...' : 'Save Changes'}
			</Button>
		</Modal.Footer>
	</Modal.Content>
</Modal.Root>

<AlertDialog.Root bind:open={showRemoveConfirm}>
	<AlertDialog.Content>
		<AlertDialog.Header>
			<AlertDialog.Title>Remove Service?</AlertDialog.Title>
			<AlertDialog.Description>
				This will remove {serviceToRemoveName} from the booking.
			</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
			<AlertDialog.Action onclick={removeService} class="bg-red-600 hover:bg-red-700">
				Remove
			</AlertDialog.Action>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

<Modal.Root open={showOverrideModal} onOpenChange={(v) => (showOverrideModal = v)}>
	<Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto">
		<Modal.Header>
			<Modal.Title class="text-lg font-semibold">Edit Service</Modal.Title>
			<Modal.Description>
				{overrideServiceIndex >= 0 ? services[overrideServiceIndex]?.service_name : ''}
			</Modal.Description>
		</Modal.Header>

<div class="space-y-4 px-4 pb-4">
			<div class="grid gap-4 md:grid-cols-2">
				<div>
					<label for="override-price" class="mb-1 block text-xs text-gray-600">
						Price Override
					</label>
					<div class="relative">
						<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
							<span class="text-gray-500">£</span>
						</div>
						<Input
							id="override-price"
							type="text"
							inputmode="decimal"
							value={overridePrice}
							oninput={(e) => handlePriceInput(e.currentTarget.value)}
							onblur={() => {
								if (overridePrice) {
									if (!overridePrice.includes('.')) {
										const num = parseFloat(overridePrice);
										if (!isNaN(num)) {
											overridePrice = num.toFixed(2);
										}
									} else {
										const parts = overridePrice.split('.');
										if (parts[1].length === 0) {
											overridePrice = parts[0] + '.00';
										} else if (parts[1].length === 1) {
											overridePrice = parts[0] + '.' + parts[1] + '0';
										}
									}
								}
							}}
							class="no-spin w-full pl-7"
							placeholder={overrideOriginalPrice.toFixed(2)}
						/>
					</div>
					<div class="mt-1 flex items-center justify-between">
						<div class="text-xs text-gray-500">
							Original: £{overrideOriginalPrice.toFixed(2)}
						</div>
						{#if overridePrice !== '' && parseFloat(overridePrice) !== overrideOriginalPrice}
							<div class="text-xs font-medium text-emerald-600">Changed</div>
						{/if}
					</div>
				</div>

<div>
					<label for="override-duration" class="mb-1 block text-xs text-gray-600">
						Duration Override (min)
					</label>
					<div class="relative">
						<Input
							id="override-duration"
							type="number"
							min="1"
							step="1"
							value={overrideDuration}
							oninput={(e: Event) => handleDurationInput((e.target as HTMLInputElement).value)}
							class="no-spin w-full"
							placeholder={overrideOriginalDuration.toString()}
						/>
					</div>
					<div class="mt-1 flex items-center justify-between">
						<div class="text-xs text-gray-500">
							Original: {overrideOriginalDuration} min
						</div>
						{#if overrideDuration !== '' && parseInt(overrideDuration) !== overrideOriginalDuration}
							<div class="text-xs font-medium text-emerald-600">Changed</div>
						{/if}
					</div>
				</div>
			</div>
		</div>

<Modal.Footer class="flex items-center justify-end gap-2">
			<Button variant="outline" onclick={() => (showOverrideModal = false)}>Cancel</Button>
			<Button onclick={saveOverride}>Save</Button>
		</Modal.Footer>
	</Modal.Content>
</Modal.Root>

<Modal.Root open={showAddServiceModal} onOpenChange={(v) => (showAddServiceModal = v)}>
	<Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto">
		<Modal.Header>
			<Modal.Title class="text-lg font-semibold">Add Service</Modal.Title>
			<Modal.Description>Select a service to add to this booking.</Modal.Description>
		</Modal.Header>

<div class="space-y-4 px-4 pb-4">
			{#if maxAvailableDuration !== null}
				<div class="rounded-md border border-blue-200 bg-blue-50 p-3 text-sm">
					<div class="font-medium text-blue-800">Available time: {maxAvailableDuration} min</div>
					<div class="text-xs text-blue-600">
						Current total: {totalDuration} min
					</div>
				</div>
			{/if}

{#if loadingServices}
				<div class="text-center text-sm text-gray-500">Loading services...</div>
			{:else if filteredServices.length === 0}
				<div
					class="rounded-md border border-dashed border-gray-300 p-4 text-center text-sm text-gray-500"
				>
					{#if availableServices.length === 0}
						No services available.
					{:else}
						All services have been added or exceed available time.
					{/if}
				</div>
			{:else}
				<div class="space-y-2">
					{#each filteredServices as service (service.id)}
						<button
							type="button"
							class="w-full rounded-md border border-gray-300 bg-white p-3 text-left transition-colors hover:bg-gray-50"
							onclick={() => addService(service)}
						>
							<div class="font-medium">{service.name}</div>
							<div class="mt-1 text-sm text-gray-600">
								{service.duration_minutes} min • £{service.price.toFixed(2)}
							</div>
						</button>
					{/each}
				</div>
			{/if}
		</div>

<Modal.Footer class="flex items-center justify-end">
			<Button onclick={() => (showAddServiceModal = false)}>Close</Button>
		</Modal.Footer>
	</Modal.Content>
</Modal.Root>

<Modal.Root open={showRefundModal} onOpenChange={(v) => (showRefundModal = v)}>
	<Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto">
		<Modal.Header>
			<Modal.Title class="text-lg font-semibold">Process Refund</Modal.Title>
			<Modal.Description>Enter the refund amount and reason.</Modal.Description>
		</Modal.Header>

<div class="space-y-4 px-4 pb-4">
			<div>
				<label for="refund-amount" class="mb-1 block text-xs text-gray-600"> Refund Amount </label>
				<div class="relative">
					<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
						<span class="text-gray-500">£</span>
					</div>
					<Input
						id="refund-amount"
						type="text"
						inputmode="decimal"
						bind:value={refundAmount}
						class="no-spin w-full pl-7"
						placeholder="0.00"
					/>
				</div>
				{#if refundAlreadyRefundedPence > 0}
					<p class="mt-1 text-xs text-gray-500">
						Already refunded: £{(refundAlreadyRefundedPence / 100).toFixed(2)} — the amount above is the
						remaining balance.
					</p>
				{/if}
			</div>

<div>
				<label for="refund-reason" class="mb-1 block text-xs text-gray-600">
					Reason (required)
				</label>
				<Textarea
					id="refund-reason"
					bind:value={refundReason}
					placeholder="Enter reason for refund..."
					rows={3}
					class="w-full"
				/>
			</div>
		</div>

<Modal.Footer class="flex items-center justify-end gap-2">
			<Button variant="outline" onclick={() => (showRefundModal = false)}>Cancel</Button>
			<Button
				onclick={processRefund}
				disabled={refundLoading || !refundAmount || !refundReason.trim()}
			>
				{refundLoading ? 'Processing...' : 'Confirm Refund'}
			</Button>
		</Modal.Footer>
	</Modal.Content>
</Modal.Root>

:global(input[type='number']::-webkit-outer-spin-button),
	:global(input[type='number']::-webkit-inner-spin-button) {
		-webkit-appearance: none;
		margin: 0;
	}
</style>