<script lang="ts">
	import OnBehalfOfSelector, {
		type OnBehalfOfChoice,
		type OnBehalfOfDetails
	} from '$lib/components/OnBehalfOfSelector.svelte'
	import { useFolderDefaultPermissionedAs } from '$lib/components/useFolderDefaultPermissionedAs.svelte'
	import { userStore, workspaceStore } from '$lib/stores'
	import { getTriggerWorkspace } from '$lib/components/triggers/triggerWorkspace'
	import { AlertTriangle } from 'lucide-svelte'

	interface Props {
		/** Current permissioned_as value from the trigger (e.g., 'u/admin') */
		permissionedAs: string | undefined
		/** Callback when user changes the permissioned_as selection */
		onPermissionedAsChange: (permissionedAs: string | undefined, preserve: boolean) => void
		/**
		 * Item path (e.g. `f/prod/my_trigger`). When provided and the user is an
		 * admin/wm_deployers member, the component fetches the parent folder's
		 * `default_permissioned_as` rules and preselects the matching default.
		 */
		path?: string | undefined
	}

	let { permissionedAs, onPermissionedAsChange, path = undefined }: Props = $props()
	const triggerWs = getTriggerWorkspace()
	const wsId = $derived(triggerWs?.() ?? $workspaceStore)

	const canPreserve = $derived(
		$userStore?.is_admin || ($userStore?.groups ?? []).includes('wm_deployers')
	)

	const myPermissionedAs = $derived($userStore?.username ? `u/${$userStore.username}` : undefined)

	const folderDefault = useFolderDefaultPermissionedAs(
		() => path,
		() => wsId
	)

	let onBehalfOfChoice = $state<OnBehalfOfChoice>(undefined)
	let customPermissionedAs = $state<string | undefined>(undefined)
	let userHasSelected = $state(false)

	// Full reset when permissionedAs changes (e.g. switching between edit/create).
	$effect(() => {
		permissionedAs
		userHasSelected = false
		customPermissionedAs = undefined
		onBehalfOfChoice = undefined
	})

	// On creation with no folder default, default to "me". When the folder default
	// loads async, transition to undefined so OnBehalfOfSelector's auto-select applies
	// the folder default. Skip if the user has already made an explicit selection.
	$effect(() => {
		if (userHasSelected) return
		if (permissionedAs === undefined && !folderDefault.value) {
			onBehalfOfChoice = 'me'
		} else {
			onBehalfOfChoice = undefined
		}
	})

	const effectivePermissionedAs = $derived.by(() => {
		if (onBehalfOfChoice === 'target') return permissionedAs
		if (onBehalfOfChoice === 'custom' && customPermissionedAs) return customPermissionedAs
		return myPermissionedAs
	})

	const willChange = $derived(
		permissionedAs !== undefined &&
			effectivePermissionedAs !== undefined &&
			permissionedAs !== effectivePermissionedAs
	)

	const shouldRender = $derived(!!wsId && (permissionedAs !== undefined || canPreserve))

	// For non-admin users editing a trigger owned by someone else: signal that
	// permissioned_as will change to the current user (backend ignores preserve for non-admins).
	// Only fires when there's an actual change (DB value differs from current user).
	$effect(() => {
		if (!canPreserve && permissionedAs !== undefined && permissionedAs !== myPermissionedAs) {
			onPermissionedAsChange(undefined, false)
		}
	})

	function handleSelect(choice: OnBehalfOfChoice, details?: OnBehalfOfDetails) {
		userHasSelected = true
		onBehalfOfChoice = choice
		if (choice === 'target') {
			customPermissionedAs = undefined
			onPermissionedAsChange(permissionedAs, true)
		} else if (choice === 'custom' && details) {
			customPermissionedAs = details.permissionedAs
			onPermissionedAsChange(details.permissionedAs, true)
		} else {
			customPermissionedAs = undefined
			onPermissionedAsChange(undefined, false)
		}
	}
</script>

{#if shouldRender && wsId}
	<div class="flex items-center gap-1.5 text-2xs text-tertiary mb-4">
		<span>Permissioned as</span>
		{#if canPreserve}
			<OnBehalfOfSelector
				targetWorkspace={wsId}
				targetValue={permissionedAs}
				selected={onBehalfOfChoice}
				onSelect={handleSelect}
				kind="trigger"
				{canPreserve}
				customValue={customPermissionedAs}
				isDeployment={false}
				folderDefault={folderDefault.value}
			/>
			{#if willChange}
				<AlertTriangle class="w-3.5 h-3.5 text-yellow-500" />
				<span class="text-yellow-600 dark:text-yellow-400"
					>will change from <strong>{permissionedAs}</strong> on save</span
				>
			{/if}
		{:else if permissionedAs}
			<strong class="text-secondary">{permissionedAs}</strong>
			{#if willChange}
				<AlertTriangle class="w-3.5 h-3.5 text-yellow-500" />
				<span class="text-yellow-600 dark:text-yellow-400"
					>will change to <strong>{effectivePermissionedAs}</strong> on save</span
				>
			{/if}
		{/if}
	</div>
{/if}
