<script lang="ts">
	import type { Identity } from '@ory/client';
	import { Modal } from 'flowbite-svelte';

	interface Props {
		identity: Identity | null;
		onClose: () => void;
		onSave: () => Promise<void>;
		loading?: boolean;
		error?: string | null;
	}

	let { identity, onClose, onSave, loading = false, error = null }: Props = $props();

	let open = $derived(!!identity);

	// Helper getters/setters for metadata_public fields
	let djangoProfileId = $derived.by(() => {
		if (!identity?.metadata_public) return '';
		return (identity.metadata_public as any)?.django_profile_id || '';
	});

	function updateMetadata(field: string, value: string) {
		if (!identity) return;
		if (!identity.metadata_public) {
			identity.metadata_public = {};
		}
		(identity.metadata_public as any)[field] = value || undefined;
	}

	function handleDjangoProfileIdInput(e: Event) {
		const target = e.target as HTMLInputElement;
		updateMetadata('django_profile_id', target.value);
	}
</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">Edit 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}

		{#if identity}
			<div class="space-y-4">
				<!-- Email -->
				<div>
					<label for="edit-email" class="block text-sm font-medium text-gray-700">Email</label>
					<input
						id="edit-email"
						type="email"
						bind:value={identity.traits.email}
						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>

				<!-- Name Fields -->
				<div class="grid grid-cols-2 gap-4">
					<div>
						<label for="edit-first-name" class="block text-sm font-medium text-gray-700"
							>First Name</label
						>
						<input
							id="edit-first-name"
							type="text"
							bind:value={identity.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="edit-last-name" class="block text-sm font-medium text-gray-700"
							>Last Name</label
						>
						<input
							id="edit-last-name"
							type="text"
							bind:value={identity.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>

				<!-- Phone -->
				<div>
					<label for="edit-phone" class="block text-sm font-medium text-gray-700"
						>Phone Number</label
					>
					<input
						id="edit-phone"
						type="tel"
						bind:value={identity.traits.phone}
						pattern="^[0-9\s\-+()]*$"
						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"
					/>
					<p class="mt-1 text-xs text-gray-500">Optional</p>
				</div>

				<!-- Profile Type -->
				<div>
					<label for="edit-profile-type" class="block text-sm font-medium text-gray-700"
						>Profile Type</label
					>
					<select
						id="edit-profile-type"
						bind:value={identity.traits.profile_type}
						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 Member</option>
						<option value="customer">Customer</option>
					</select>
					<p class="mt-1 text-xs text-gray-500">Determines account type and permissions</p>
				</div>

				<!-- State -->
				<div>
					<label for="edit-state" class="block text-sm font-medium text-gray-700">State</label>
					<select
						id="edit-state"
						bind:value={identity.state}
						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="active">Active</option>
						<option value="inactive">Inactive</option>
					</select>
				</div>

				<!-- Metadata Public Section -->
				<div class="border-t border-gray-200 pt-4">
					<h4 class="mb-3 text-sm font-semibold text-gray-900">System Metadata (Public)</h4>
					<p class="mb-3 text-xs text-gray-500">
						Read-only for users, editable by admin. Links to Django backend.
					</p>

					<div class="space-y-3">
						<div>
							<label for="edit-django-profile-id" class="block text-sm font-medium text-gray-700"
								>Django Profile ID</label
							>
							<input
								id="edit-django-profile-id"
								type="text"
								value={djangoProfileId}
								oninput={handleDjangoProfileIdInput}
								placeholder="UUID of linked Django profile"
								class="mt-1 w-full rounded-lg border border-gray-300 px-4 py-2 font-mono text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
							/>
						</div>
					</div>
				</div>
			</div>
		{/if}
	</div>

	{#snippet footer()}
		<button
			type="button"
			onclick={onSave}
			disabled={loading}
			class="rounded-md bg-blue-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:opacity-50"
		>
			{loading ? 'Saving...' : 'Save Changes'}
		</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>
