<script lang="ts">
	import { Modal } from 'flowbite-svelte';

	interface CreateForm {
		schema_id: string;
		traits: {
			email: string;
			name: {
				first: string;
				last: string;
			};
			profile_type: string;
		};
	}

	interface Props {
		open: boolean;
		form: CreateForm;
		onClose: () => void;
		onCreate: () => Promise<void>;
		loading?: boolean;
		error?: string | null;
	}

	let { open, form, onClose, onCreate, loading = false, error = null }: Props = $props();
</script>

<Modal
	bind:open
	onclose={onClose}
	size="lg"
	autoclose={false}
	dismissable={false}
	outsideclose={false}
>
	{#snippet header()}
		<h3 class="text-lg leading-6 font-medium text-gray-900">Create New Identity</h3>
	{/snippet}

	<div class="w-full">
		{#if error}
			<div class="mb-4 rounded-lg bg-red-50 p-4">
				<p class="text-sm text-red-800">{error}</p>
			</div>
		{/if}

		<div class="space-y-4">
			<div>
				<label for="create-email" class="block text-sm font-medium text-gray-700">Email *</label>
				<input
					id="create-email"
					type="email"
					bind:value={form.traits.email}
					required
					class="mt-1 w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
				/>
			</div>

			<div class="grid grid-cols-2 gap-4">
				<div>
					<label for="create-first-name" class="block text-sm font-medium text-gray-700"
						>First Name</label
					>
					<input
						id="create-first-name"
						type="text"
						bind:value={form.traits.name.first}
						class="mt-1 w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
					/>
				</div>
				<div>
					<label for="create-last-name" class="block text-sm font-medium text-gray-700"
						>Last Name</label
					>
					<input
						id="create-last-name"
						type="text"
						bind:value={form.traits.name.last}
						class="mt-1 w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
					/>
				</div>
			</div>

			<div>
				<label for="create-profile-type" class="block text-sm font-medium text-gray-700"
					>Profile Type *</label
				>
				<select
					id="create-profile-type"
					bind:value={form.traits.profile_type}
					required
					class="mt-1 w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
				>
					<option value="team">Team</option>
					<option value="customer">Customer</option>
				</select>
			</div>
		</div>
	</div>

	{#snippet footer()}
		<button
			type="button"
			onclick={onCreate}
			disabled={loading || !form.traits.email}
			class="rounded-md bg-green-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50"
		>
			{loading ? 'Creating...' : 'Create Identity'}
		</button>
		<button
			type="button"
			onclick={onClose}
			class="rounded-md bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
		>
			Cancel
		</button>
	{/snippet}
</Modal>
