<script lang="ts">
	/* eslint-disable @typescript-eslint/no-explicit-any */
	import PlusIcon from '@lucide/svelte/icons/plus';
	import { Field as FormField, Control, FieldErrors } from 'formsnap';
	import FormSelect from '$lib/components/form-select.svelte';
	import { industryOptions } from '$lib/constants/industries';
	import * as Field from '$lib/components/ui/field/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import { Input } from '$lib/components/ui/input/index.js';
	import * as Stepper from '$lib/components/ui/stepper/index.js';
	import { Textarea } from '$lib/components/ui/textarea/index.js';
	let {
		open = $bindable(false),
		createStep = $bindable(0),
		createForm,
		createData,
		enhanceCreate
	}: {
		open: boolean;
		createStep: number;
		createForm: any;
		createData: any;
		enhanceCreate: any;
	} = $props();
	const createSteps = [
		{ title: 'Client', description: 'Client details' },
		{ title: 'Address', description: 'Primary address' },
		{ title: 'Contact', description: 'Primary contact' }
	] as const;
</script>

<Dialog.Root bind:open>
	<Dialog.Trigger>
		{#snippet child({ props })}
			<Button {...props}><PlusIcon data-icon="inline-start" />Create client</Button>
		{/snippet}
	</Dialog.Trigger>
	<Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
		<Dialog.Header>
			<Dialog.Title>Create client</Dialog.Title>
			<Dialog.Description>Add a new client record.</Dialog.Description>
		</Dialog.Header>
		<form method="POST" action="?/create" class="grid gap-5" use:enhanceCreate>
			<Stepper.Root bind:value={createStep}>
				{#each createSteps as step, index (step.title)}
					<Stepper.Item step={index}>
						<div class="flex flex-col items-center gap-2 text-center">
							<Stepper.Indicator step={index} />
							<div class="grid gap-1">
								<Stepper.Title>{step.title}</Stepper.Title>
								<Stepper.Description>{step.description}</Stepper.Description>
							</div>
						</div>
						{#if index < createSteps.length - 1}
							<Stepper.Separator />
						{/if}
					</Stepper.Item>
				{/each}
			</Stepper.Root>

			<div class={['grid gap-2', createStep !== 0 && 'hidden']}>
				<FormField form={createForm} name="name">
					<Field.Field>
						<Control id="create-name">
							{#snippet children({ props })}
								<Field.Label>Name</Field.Label>
								<Input {...props} type="text" required bind:value={$createData.name} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="industry">
					<Field.Field>
						<Control id="create-industry">
							{#snippet children({ props })}
								<Field.Label>Industry</Field.Label>
								<FormSelect
									name="industry"
									bind:value={$createData.industry}
									options={industryOptions}
									triggerProps={props}
								/>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="website">
					<Field.Field>
						<Control id="create-website">
							{#snippet children({ props })}
								<Field.Label>Website</Field.Label>
								<Input
									{...props}
									type="url"
									placeholder="https://example.com"
									bind:value={$createData.website}
								/>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="notes">
					<Field.Field>
						<Control id="create-notes">
							{#snippet children({ props })}
								<Field.Label>Notes</Field.Label>
								<Textarea {...props} bind:value={$createData.notes} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
			</div>
			<div class={['grid gap-2', createStep !== 2 && 'hidden']}>
				<FormField form={createForm} name="primaryContactName">
					<Field.Field>
						<Control id="create-primary-contact-name">
							{#snippet children({ props })}
								<Field.Label>Name</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryContactName} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryContactRole">
					<Field.Field>
						<Control id="create-primary-contact-role">
							{#snippet children({ props })}
								<Field.Label>Role</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryContactRole} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryContactEmail">
					<Field.Field>
						<Control id="create-primary-contact-email">
							{#snippet children({ props })}
								<Field.Label>Email</Field.Label>
								<Input
									{...props}
									type="email"
									required
									bind:value={$createData.primaryContactEmail}
								/>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryContactPhone">
					<Field.Field>
						<Control id="create-primary-contact-phone">
							{#snippet children({ props })}
								<Field.Label>Phone</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryContactPhone} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
			</div>
			<div class={['grid gap-2', createStep !== 1 && 'hidden']}>
				<FormField form={createForm} name="primaryAddressLine1">
					<Field.Field>
						<Control id="create-primary-address-line-1">
							{#snippet children({ props })}
								<Field.Label>Address line 1</Field.Label>
								<Input
									{...props}
									type="text"
									required
									bind:value={$createData.primaryAddressLine1}
								/>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryAddressLine2">
					<Field.Field>
						<Control id="create-primary-address-line-2">
							{#snippet children({ props })}
								<Field.Label>Address line 2</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryAddressLine2} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryAddressLine3">
					<Field.Field>
						<Control id="create-primary-address-line-3">
							{#snippet children({ props })}
								<Field.Label>Address line 3</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryAddressLine3} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<div class="grid gap-2 sm:grid-cols-2">
					<FormField form={createForm} name="primaryAddressCity">
						<Field.Field>
							<Control id="create-primary-address-city">
								{#snippet children({ props })}
									<Field.Label>City</Field.Label>
									<Input
										{...props}
										type="text"
										required
										bind:value={$createData.primaryAddressCity}
									/>
								{/snippet}
							</Control>
							<Field.Error><FieldErrors /></Field.Error>
						</Field.Field>
					</FormField>
					<FormField form={createForm} name="primaryAddressRegion">
						<Field.Field>
							<Control id="create-primary-address-region">
								{#snippet children({ props })}
									<Field.Label>Region</Field.Label>
									<Input {...props} type="text" bind:value={$createData.primaryAddressRegion} />
								{/snippet}
							</Control>
							<Field.Error><FieldErrors /></Field.Error>
						</Field.Field>
					</FormField>
				</div>
				<div class="grid gap-2 sm:grid-cols-2">
					<FormField form={createForm} name="primaryAddressPostcode">
						<Field.Field>
							<Control id="create-primary-address-postcode">
								{#snippet children({ props })}
									<Field.Label>Postcode</Field.Label>
									<Input
										{...props}
										type="text"
										required
										bind:value={$createData.primaryAddressPostcode}
									/>
								{/snippet}
							</Control>
							<Field.Error><FieldErrors /></Field.Error>
						</Field.Field>
					</FormField>
					<FormField form={createForm} name="primaryAddressCountry">
						<Field.Field>
							<Control id="create-primary-address-country">
								{#snippet children({ props })}
									<Field.Label>Country</Field.Label>
									<Input {...props} type="text" bind:value={$createData.primaryAddressCountry} />
								{/snippet}
							</Control>
							<Field.Error><FieldErrors /></Field.Error>
						</Field.Field>
					</FormField>
				</div>
			</div>

			<Dialog.Footer>
				<Dialog.Close
					>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
						>{/snippet}</Dialog.Close
				>
				{#if createStep > 0}
					<Button type="button" variant="outline" onclick={() => (createStep -= 1)}>Back</Button>
				{/if}
				{#if createStep < createSteps.length - 1}
					<Button type="button" onclick={() => (createStep += 1)}>Next step</Button>
				{:else}
					<Button type="submit">Create client</Button>
				{/if}
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>
