<script lang="ts">
	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
	import { enhance } from '$app/forms';
	import { invalidateAll } from '$app/navigation';
	import { offCanvas } from '$lib/stores/offCanvas.svelte';
	import type { WaveCustomer } from './types';

	interface Props {
		customer?: WaveCustomer | null;
		onSuccess?: () => void;
	}

	let { customer = null, onSuccess }: Props = $props();

	let isSubmitting = $state(false);
	let error = $state('');

	// Basic info
	let name = $state(customer?.name ?? '');
	let firstName = $state(customer?.firstName ?? '');
	let lastName = $state(customer?.lastName ?? '');
	let email = $state(customer?.email ?? '');
	let phone = $state(customer?.phone ?? '');

	// Address
	let addressLine1 = $state(customer?.address?.addressLine1 ?? '');
	let addressLine2 = $state(customer?.address?.addressLine2 ?? '');
	let city = $state(customer?.address?.city ?? '');
	let provinceCode = $state(customer?.address?.province?.code ?? '');
	let countryCode = $state(customer?.address?.country?.code ?? 'US');
	let postalCode = $state(customer?.address?.postalCode ?? '');

	// Notes
	let internalNotes = $state(customer?.internalNotes ?? '');

	let isEditing = $derived(!!customer);
</script>

<form
	method="POST"
	action={isEditing ? '?/updateCustomer' : '?/createCustomer'}
	use:enhance={() => {
		isSubmitting = true;
		error = '';
		return async ({ result }) => {
			isSubmitting = false;
			if (result.type === 'failure') {
				const errorMsg = result.data?.error;
				error = typeof errorMsg === 'string' ? errorMsg : 'An error occurred';
			} else if (result.type === 'success') {
				await invalidateAll();
				offCanvas.closeRight();
				onSuccess?.();
			}
		};
	}}
	class="flex h-full flex-col"
>
	{#if isEditing}
		<input type="hidden" name="id" value={customer?.id} />
	{/if}

	<div class="flex-1 space-y-4 overflow-y-auto">
		{#if error}
			<div class="rounded-lg border border-danger bg-danger p-3 text-sm text-danger">
				{error}
			</div>
		{/if}

		<!-- Basic Info Section -->
		<div class="space-y-4">
			<h4 class="text-sm font-medium text-theme-muted">Basic Information</h4>

			<div>
				<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
					Business/Display Name <span class="text-error-500">*</span>
				</label>
				<input
					type="text"
					id="name"
					name="name"
					bind:value={name}
					required
					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
					placeholder="Customer or business name"
				/>
			</div>

			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
				<div>
					<label for="firstName" class="mb-1.5 block text-sm font-medium text-theme">
						First Name
					</label>
					<input
						type="text"
						id="firstName"
						name="firstName"
						bind:value={firstName}
						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
						placeholder="First name"
					/>
				</div>

				<div>
					<label for="lastName" class="mb-1.5 block text-sm font-medium text-theme">
						Last Name
					</label>
					<input
						type="text"
						id="lastName"
						name="lastName"
						bind:value={lastName}
						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
						placeholder="Last name"
					/>
				</div>
			</div>

			<div>
				<label for="email" class="mb-1.5 block text-sm font-medium text-theme">Email</label>
				<input
					type="email"
					id="email"
					name="email"
					bind:value={email}
					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
					placeholder="customer@example.com"
				/>
			</div>

			<div>
				<label for="phone" class="mb-1.5 block text-sm font-medium text-theme">Phone</label>
				<input
					type="tel"
					id="phone"
					name="phone"
					bind:value={phone}
					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
					placeholder="(555) 123-4567"
				/>
			</div>
		</div>

		<!-- Address Section -->
		<div class="space-y-4 border-t border-theme pt-4">
			<h4 class="text-sm font-medium text-theme-muted">Address</h4>

			<div>
				<label for="addressLine1" class="mb-1.5 block text-sm font-medium text-theme">
					Street Address
				</label>
				<input
					type="text"
					id="addressLine1"
					name="addressLine1"
					bind:value={addressLine1}
					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
					placeholder="123 Main St"
				/>
			</div>

			<div>
				<label for="addressLine2" class="mb-1.5 block text-sm font-medium text-theme">
					Apt, Suite, etc.
				</label>
				<input
					type="text"
					id="addressLine2"
					name="addressLine2"
					bind:value={addressLine2}
					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
					placeholder="Suite 100"
				/>
			</div>

			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
				<div>
					<label for="city" class="mb-1.5 block text-sm font-medium text-theme">City</label>
					<input
						type="text"
						id="city"
						name="city"
						bind:value={city}
						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
						placeholder="City"
					/>
				</div>

				<div>
					<label for="provinceCode" class="mb-1.5 block text-sm font-medium text-theme">
						State/Province
					</label>
					<input
						type="text"
						id="provinceCode"
						name="provinceCode"
						bind:value={provinceCode}
						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
						placeholder="CA"
					/>
				</div>
			</div>

			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
				<div>
					<label for="postalCode" class="mb-1.5 block text-sm font-medium text-theme">
						Postal Code
					</label>
					<input
						type="text"
						id="postalCode"
						name="postalCode"
						bind:value={postalCode}
						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
						placeholder="12345"
					/>
				</div>

				<div>
					<label for="countryCode" class="mb-1.5 block text-sm font-medium text-theme">
						Country
					</label>
					<select
						id="countryCode"
						name="countryCode"
						bind:value={countryCode}
						class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
					>
						<option value="US">United States</option>
						<option value="CA">Canada</option>
					</select>
				</div>
			</div>
		</div>

		<!-- Notes Section -->
		<div class="space-y-4 border-t border-theme pt-4">
			<h4 class="text-sm font-medium text-theme-muted">Internal Notes</h4>

			<div>
				<label for="internalNotes" class="mb-1.5 block text-sm font-medium text-theme">
					Notes
				</label>
				<textarea
					id="internalNotes"
					name="internalNotes"
					bind:value={internalNotes}
					rows="3"
					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
					placeholder="Private notes about this customer (not visible to customer)"
				></textarea>
			</div>
		</div>
	</div>

	<div class="mt-6 flex gap-3 border-t border-theme pt-4">
		<button
			type="button"
			onclick={() => offCanvas.closeRight()}
			disabled={isSubmitting}
			class="flex-1 rounded-lg border border-theme bg-theme px-4 py-2 text-sm font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
		>
			Cancel
		</button>
		<button
			type="submit"
			disabled={isSubmitting || !name}
			class="flex flex-1 items-center justify-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600 disabled:cursor-not-allowed disabled:opacity-50"
		>
			{#if isSubmitting}
				<IconSpinner class="h-4 w-4" />
				<span>{isEditing ? 'Saving...' : 'Creating...'}</span>
			{:else}
				{isEditing ? 'Save Changes' : 'Create Customer'}
			{/if}
		</button>
	</div>
</form>
