<script lang="ts" setup>
import type { INodeUi } from '@/Interface';
import type { IExecutionResponse } from '@/features/execution/executions/executions.types';
import Draggable from '@/app/components/Draggable.vue';
import VirtualSchemaHeader from './VirtualSchemaHeader.vue';
import VirtualSchemaItem from './VirtualSchemaItem.vue';
import {
	useDataSchema,
	useFlattenSchema,
	type RenderCallout,
	type RenderHeader,
	type RenderNotice,
	type Renders,
	type SchemaNode,
} from '@/app/composables/useDataSchema';
import { useExternalHooks } from '@/app/composables/useExternalHooks';
import { useI18n } from '@n8n/i18n';
import { useNodeHelpers } from '@/app/composables/useNodeHelpers';
import { useTelemetry } from '@/app/composables/useTelemetry';
import { useCalloutHelpers } from '@/app/composables/useCalloutHelpers';
import { injectNDVStore } from '@/features/ndv/shared/ndv.store';
import { useNodeTypesStore } from '@/app/stores/nodeTypes.store';
import { injectWorkflowDocumentStore } from '@/app/stores/workflowDocument.store';
import { executionDataToJson } from '@/app/utils/nodeTypesUtils';
import {
	type IRunExecutionData,
	createResultError,
	type NodeConnectionType,
	NodeConnectionTypes,
	type IConnectedNode,
	type IDataObject,
} from 'n8n-workflow';
import { computed, ref, watch } from 'vue';
import {
	DynamicScroller,
	DynamicScrollerItem,
	type RecycleScrollerInstance,
} from 'vue-virtual-scroller';
import MappingPill from './MappingPill.vue';

import { EnterpriseEditionFeature, PLACEHOLDER_FILLED_AT_EXECUTION_TIME } from '@/app/constants';
import useEnvironmentsStore from '@/features/settings/environments.ee/environments.store';
import { useSchemaPreviewStore } from '@/features/ndv/runData/schemaPreview.store';
import { useSettingsStore } from '@/app/stores/settings.store';
import { isEmpty } from '@/app/utils/typesUtils';
import { asyncComputed } from '@vueuse/core';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { DateTime } from 'luxon';
import NodeExecuteButton from '@/app/components/NodeExecuteButton.vue';
import { I18nT } from 'vue-i18n';
import { useTelemetryContext } from '@/app/composables/useTelemetryContext';
import NDVEmptyState from '@/features/ndv/panel/components/NDVEmptyState.vue';

import { N8nCallout, N8nIcon, N8nText, N8nTooltip } from '@n8n/design-system';
type Props = {
	nodes?: IConnectedNode[];
	node?: INodeUi | null;
	data?: IDataObject[];
	mappingEnabled?: boolean;
	paneType: 'input' | 'output';
	connectionType?: NodeConnectionType;
	search?: string;
	compact?: boolean;
	outputIndex?: number;
	previewExecution?: IExecutionResponse | null;
	truncateLimit?: number;
};

const props = withDefaults(defineProps<Props>(), {
	nodes: () => [],
	distanceFromActive: 1,
	node: null,
	data: () => [],
	connectionType: NodeConnectionTypes.Main,
	search: '',
	mappingEnabled: false,
	compact: false,
	outputIndex: undefined,
	truncateLimit: 600,
	previewExecution: undefined,
});

const telemetry = useTelemetry();
const telemetryContext = useTelemetryContext();
const i18n = useI18n();
const ndvStore = injectNDVStore();
const nodeTypesStore = useNodeTypesStore();
const workflowDocumentStore = injectWorkflowDocumentStore();
const schemaPreviewStore = useSchemaPreviewStore();
const environmentsStore = useEnvironmentsStore();
const settingsStore = useSettingsStore();

const { getSchemaForExecutionData, getSchemaForJsonSchema, getSchema, filterSchema } =
	useDataSchema();
const { closedNodes, flattenSchema, flattenMultipleSchemas, toggleNode } = useFlattenSchema();
const { getNodeInputData, getLastRunIndexWithData, hasNodeExecuted } = useNodeHelpers();
const { dismissCallout, isCalloutDismissed } = useCalloutHelpers();

const emit = defineEmits<{
	'clear:search': [];
	execute: [nodeName: string];
}>();

const scroller = ref<RecycleScrollerInstance>();
const closedNodesBeforeSearch = ref(new Set<string>());

const canDraggableDrop = computed(() => ndvStore.value.canDraggableDrop);
const draggableStickyPosition = computed(() => ndvStore.value.draggableStickyPos);

const onCalloutDismiss = async (calloutId: string) => {
	await dismissCallout(calloutId);
};

const toggleNodeExclusiveAndScrollTop = (id: string) => {
	const isClosed = closedNodes.value.has(id);
	if (isClosed) {
		closedNodes.value = new Set(items.value.map((item) => item.id));
	}
	toggleNode(id);
	scroller.value?.scrollToItem(0);
};

const getNodeSchema = async (fullNode: INodeUi, connectedNode: IConnectedNode) => {
	const rawPinData = workflowDocumentStore?.value?.getNodePinData(connectedNode.name);
	const pinData = rawPinData ? executionDataToJson(rawPinData) : undefined;
	const hasPinnedData = pinData ? pinData.length > 0 : false;
	const isNodeExecuted = hasPinnedData || hasNodeExecuted(connectedNode.name);

	const previewExecutionData: IRunExecutionData | undefined =
		!isNodeExecuted && props.previewExecution ? props.previewExecution.data : undefined;

	const connectedOutputIndexes = connectedNode.indicies.length > 0 ? connectedNode.indicies : [0];
	const connectedOutputsWithData = connectedOutputIndexes
		.map((outputIndex) => ({
			outputIndex,
			runIndex: getLastRunIndexWithData(
				fullNode.name,
				outputIndex,
				props.connectionType,
				previewExecutionData,
			),
		}))
		.filter(({ runIndex }) => runIndex !== -1);

	// For connected nodes with multiple outputs that connect to the current node,
	// filter by outputIndex if it's specified and matches one of the connected outputs
	// This ensures we show the correct branch when viewing multi-output nodes like SplitInBatches
	let filteredOutputsWithData = connectedOutputsWithData;

	// Only apply outputIndex filtering if:
	// 1. outputIndex is specified
	// 2. The node has multiple connected outputs
	// 3. The specified outputIndex is one of the connected outputs
	if (
		props.outputIndex !== undefined &&
		connectedOutputIndexes.length > 1 &&
		connectedOutputIndexes.includes(props.outputIndex)
	) {
		filteredOutputsWithData = connectedOutputsWithData.filter(
			({ outputIndex }) => outputIndex === props.outputIndex,
		);
	}

	const nodeData = filteredOutputsWithData
		.map(({ outputIndex, runIndex }) => {
			return getNodeInputData(
				fullNode,
				runIndex,
				outputIndex,
				props.paneType,
				props.connectionType,
				previewExecutionData,
			);
		})
		.flat();
	const hasBinary = nodeData.some((data) => !isEmpty(data.binary));
	const data = pinData ?? executionDataToJson(nodeData);
	const isDataEmpty = data.length === 0 || (data.length === 1 && Object.keys(data[0]).length === 0);

	let schema = getSchemaForExecutionData(data);
	const lastSuccessfulPreview = !isDataEmpty && Boolean(previewExecutionData);
	let preview = lastSuccessfulPreview;

	if (isDataEmpty && !preview) {
		const previewSchema = await getSchemaPreview(fullNode);
		if (previewSchema.ok) {
			schema = getSchemaForJsonSchema(previewSchema.result);
			preview = true;
		}
	}

	return {
		schema,
		connectedOutputIndexes,
		itemsCount: !isDataEmpty ? data.length : 0,
		runIndex: connectedOutputsWithData[0]?.runIndex ?? 0,
		preview,
		lastSuccessfulPreview,
		hasBinary,
		isNodeExecuted,
		isDataEmpty,
	};
};

const isVariablesEnabled = computed(
	() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Variables],
);

const contextSchema = computed(() => {
	const $vars = environmentsStore.variablesAsObject;

	const schemaSource: Record<string, unknown> = {
		$now: DateTime.now().toISO(),
		$today: DateTime.now().set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).toISO(),
		$vars,
		$execution: {
			id: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
			mode: 'test',
			resumeUrl: i18n.baseText('dataMapping.schemaView.execution.resumeUrl'),
		},
		$workflow: {
			id: workflowDocumentStore?.value?.workflowId ?? '',
			name: workflowDocumentStore?.value?.name ?? '',
			active: workflowDocumentStore?.value?.active ?? false,
		},
	};

	return filterSchema(getSchema(schemaSource), props.search);
});

const contextItems = computed(() => {
	const header: RenderHeader = {
		id: 'variables',
		type: 'header',
		title: i18n.baseText('dataMapping.schemaView.variablesContextTitle'),
		collapsable: true,
		itemCount: null,
	};

	if (closedNodes.value.has(header.id)) return [header];

	const schema = contextSchema.value;

	if (!schema) {
		return [];
	}

	const flatSchema = flattenSchema({
		schema,
		depth: 1,
		isDataEmpty: false,
		truncateLimit: props.truncateLimit,
	});
	const fields: Renders[] = flatSchema.flatMap((renderItem) => {
		const isVars =
			renderItem.type === 'item' && renderItem.depth === 1 && renderItem.title === '$vars';

		if (isVars) {
			const isVarsOpen = !closedNodes.value.has(renderItem.id);

			if (!isVariablesEnabled.value) {
				renderItem.collapsable = false;
				renderItem.locked = true;
				renderItem.lockedTooltip = i18n.baseText('dataMapping.schemaView.variablesUpgrade');

				return renderItem;
			}

			if (isVarsOpen && environmentsStore.scopedVariables.length === 0) {
				const variablesEmptyNotice: RenderNotice = {
					type: 'notice',
					id: 'notice-variablesEmpty',
					level: renderItem.level ?? 0,
					message: i18n.baseText('dataMapping.schemaView.variablesEmpty'),
				};
				return [renderItem, variablesEmptyNotice];
			}
		}

		return renderItem;
	});

	return [header as Renders].concat(fields);
});

const nodeSchema = asyncComputed(async () => {
	const search = props.search;
	if (props.data.length === 0) {
		const previewSchema = await getSchemaPreview(props.node);
		if (previewSchema.ok) {
			return filterSchema(getSchemaForJsonSchema(previewSchema.result), search);
		}
	}

	return filterSchema(getSchemaForExecutionData(props.data), search);
}, null);

async function getSchemaPreview(node: INodeUi | null) {
	if (!node) return createResultError(new Error());

	const nodeType = nodeTypesStore.getNodeType(node.type, node.typeVersion);
	if (nodeType?.group.includes('trigger')) {
		return createResultError(new Error('Trigger nodes do not have schema previews'));
	}

	const {
		type,
		typeVersion,
		parameters: { resource, operation },
	} = node;

	return await schemaPreviewStore.getSchemaPreview({
		nodeType: type,
		version: typeVersion,
		resource: resource as string,
		operation: operation as string,
	});
}

const nodesSchemas = asyncComputed<SchemaNode[]>(async () => {
	const result: SchemaNode[] = [];
	const search = props.search;

	for (const node of props.nodes) {
		const fullNode = workflowDocumentStore?.value?.getNodeByName(node.name) ?? null;
		if (!fullNode) continue;

		const nodeType = nodeTypesStore.getNodeType(fullNode.type, fullNode.typeVersion);
		if (!nodeType) continue;

		const {
			schema,
			connectedOutputIndexes,
			itemsCount,
			preview,
			hasBinary,
			isNodeExecuted,
			isDataEmpty,
			runIndex,
			lastSuccessfulPreview,
		} = await getNodeSchema(fullNode, node);

		const filteredSchema = filterSchema(schema, search);

		if (!filteredSchema) continue;

		result.push({
			node: fullNode,
			connectedOutputIndexes,
			depth: node.depth,
			itemsCount,
			nodeType,
			schema: filteredSchema,
			preview,
			hasBinary,
			isNodeExecuted,
			isDataEmpty,
			runIndex,
			lastSuccessfulPreview,
		});
	}

	return result;
}, []);

const nodeAdditionalInfo = (node: INodeUi) => {
	const returnData: string[] = [];
	if (node.disabled) {
		returnData.push(i18n.baseText('node.disabled'));
	}

	const connections = ndvStore.value.ndvNodeInputNumber[node.name];
	if (connections) {
		if (connections.length === 1) {
			returnData.push(`Input ${connections}`);
		} else {
			returnData.push(`Inputs ${connections.join(', ')}`);
		}
	}

	return returnData.length ? `(${returnData.join(' | ')})` : '';
};

const flattenedNodes = computed(() =>
	flattenMultipleSchemas(nodesSchemas.value, nodeAdditionalInfo, props.truncateLimit),
);

const flattenNodeSchema = computed(() =>
	nodeSchema.value
		? flattenSchema({
				schema: nodeSchema.value,
				depth: 0,
				level: -1,
				isDataEmpty: props.data.length === 0,
				truncateLimit: props.truncateLimit,
			})
		: [],
);

/**
 * In debug mode nodes are empty
 */
const isDebugging = computed(() => !props.nodes.length);

const items = computed(() => {
	let allItems: Renders[];

	if (isDebugging.value || props.paneType === 'output') {
		allItems = flattenNodeSchema.value;

		if (
			props.node?.type === 'n8n-nodes-base.merge' &&
			props.paneType === 'output' &&
			props.data &&
			props.data.length > 1
		) {
			const mergeCallout: RenderCallout = {
				id: `${props.node.name}-mergeNotice`,
				type: 'callout',
				level: 0,
				message: i18n.baseText('dataMapping.schemaView.mergeNotice'),
				theme: 'info',
			};
			allItems = [mergeCallout, ...allItems];
		}
	} else {
		allItems = flattenedNodes.value.concat(contextItems.value);
	}

	// Filter out dismissed callouts
	return allItems.filter((item) => {
		if (item.type === 'callout') {
			return !isCalloutDismissed(item.id);
		}
		return true;
	});
});

const noSearchResults = computed(() => {
	return Boolean(props.search.trim()) && !items.value.length;
});

watch(
	() => Boolean(props.search),
	(hasSearch) => {
		if (hasSearch) {
			closedNodesBeforeSearch.value = new Set(closedNodes.value);
			closedNodes.value.clear();
		} else if (closedNodes.value.size === 0) {
			closedNodes.value = closedNodesBeforeSearch.value;
		}
	},
);

// Collapse all nodes except the first, collapse all binary data items
const unwatchItems = watch(items, (newItems) => {
	const headers =
		newItems.length < 2
			? []
			: newItems
					.filter((item) => item.type === 'header')
					.slice(1)
					.map((item) => item.id);

	const binaries = newItems
		.filter((item) => item.type === 'item' && item.binaryData)
		.map((item) => item.id);

	closedNodes.value = new Set(headers.concat(binaries));
	unwatchItems();
});

const onDragStart = (el: HTMLElement, data?: string) => {
	ndvStore.value.draggableStartDragging({
		type: 'mapping',
		data: data ?? '',
		dimensions: el?.getBoundingClientRect() ?? null,
	});
	ndvStore.value.resetMappingTelemetry();
};

const onDragEnd = (el: HTMLElement) => {
	ndvStore.value.draggableStopDragging();
	setTimeout(() => {
		const mappingTelemetry = ndvStore.value.mappingTelemetry;
		const parentNode = nodesSchemas.value.find(({ node }) => node.name === el.dataset.nodeName);

		const isPreview = parentNode?.preview ?? false;
		const hasCredential = !isEmpty(parentNode?.node.credentials);
		const runIndex = Number(el.dataset.runIndex);

		const telemetryPayload = {
			src_node_type: el.dataset.nodeType,
			src_field_name: el.dataset.name ?? '',
			src_nodes_back: el.dataset.depth,
			src_run_index: runIndex,
			src_runs_total: runIndex,
			src_field_nest_level: el.dataset.level ?? 0,
			src_view: isPreview ? 'schema_preview' : 'schema',
			src_has_credential: hasCredential,
			src_element: el,
			success: false,
			view_shown: telemetryContext.view_shown,
			...mappingTelemetry,
		};

		void useExternalHooks().run('runDataJson.onDragEnd', telemetryPayload);

		telemetry.track('User dragged data for mapping', telemetryPayload);
	}, 250); // ensure dest data gets set if drop
};
</script>

<template>
	<div
		:class="[
			'run-data-schema',
			'full-height',
			{ compact: props.compact, 'no-search-results': noSearchResults },
		]"
	>
		<NDVEmptyState v-if="noSearchResults" :title="i18n.baseText('ndv.search.noNodeMatch.title')">
			<I18nT keypath="ndv.search.noMatchSchema.description" tag="span" scope="global">
				<template #link>
					<a href="#" @click.prevent="emit('clear:search')">
						{{ i18n.baseText('ndv.search.noMatchSchema.description.link') }}
					</a>
				</template>
			</I18nT>
		</NDVEmptyState>

		<Draggable
			v-if="items.length"
			class="full-height"
			type="mapping"
			target-data-key="mappable"
			:disabled="!mappingEnabled"
			:can-drop="canDraggableDrop"
			:sticky-position="draggableStickyPosition"
			@dragstart="onDragStart"
			@dragend="onDragEnd"
		>
			<template #preview="{ canDrop, el }">
				<MappingPill v-if="el" :html="el.outerHTML" :can-drop="canDrop" />
			</template>
			<DynamicScroller
				ref="scroller"
				:items="items"
				:min-item-size="38"
				class="full-height scroller"
			>
				<template #default="{ item, index, active }">
					<DynamicScrollerItem
						:item="item"
						:active="active"
						:size-dependencies="[item]"
						:data-index="index"
					>
						<VirtualSchemaHeader
							v-if="item.type === 'header'"
							v-bind="item"
							:collapsed="closedNodes.has(item.id)"
							@click:toggle="toggleNode(item.id)"
							@click="toggleNodeExclusiveAndScrollTop(item.id)"
							@execute="(nodeName: string) => emit('execute', nodeName)"
						/>
						<VirtualSchemaItem
							v-else-if="item.type === 'item'"
							v-bind="item"
							:search="search"
							:draggable="mappingEnabled"
							:collapsed="closedNodes.has(item.id)"
							:highlight="ndvStore.highlightDraggables"
							@click="toggleNode(item.id)"
						>
						</VirtualSchemaItem>

						<N8nTooltip v-else-if="item.type === 'icon'" :content="item.tooltip" placement="top">
							<N8nIcon size="small" :icon="item.icon" class="icon" />
						</N8nTooltip>

						<div
							v-else-if="item.type === 'notice'"
							v-n8n-html="item.message"
							class="notice"
							:style="{ '--schema-level': item.level }"
						/>

						<div
							v-else-if="item.type === 'callout'"
							class="callout-wrapper"
							:style="{ '--schema-level': item.level }"
							@click.stop
						>
							<N8nCallout
								:theme="item.theme || 'info'"
								:slim="true"
								:round-corners="true"
								:iconless="false"
							>
								{{ item.message }}
								<template #trailingContent>
									<N8nIcon
										icon="x"
										:title="i18n.baseText('generic.dismiss')"
										size="medium"
										type="secondary"
										class="callout-dismiss"
										data-test-id="callout-dismiss-icon"
										@click="onCalloutDismiss(item.id)"
									/>
								</template>
							</N8nCallout>
						</div>

						<div
							v-else-if="item.type === 'empty'"
							class="empty-schema"
							:style="{ '--schema-level': item.level }"
						>
							<N8nText tag="div" size="small">
								<I18nT
									v-if="item.key === 'executeSchema'"
									tag="span"
									keypath="dataMapping.schemaView.executeSchema"
									scope="global"
								>
									<template #link>
										<NodeExecuteButton
											v-if="ndvStore.activeNodeName"
											:node-name="ndvStore.activeNodeName"
											:label="i18n.baseText('ndv.input.noOutputData.executePrevious')"
											telemetry-source="inputs"
											size="small"
											type="secondary"
											hide-icon
											execution-mode="exclusive"
										/>
									</template>
								</I18nT>
								<I18nT
									v-else
									tag="span"
									:keypath="`dataMapping.schemaView.${item.key}`"
									scope="global"
								/>
							</N8nText>
						</div>
					</DynamicScrollerItem>
				</template>
			</DynamicScroller>
		</Draggable>
	</div>
</template>

<style lang="css" scoped>
.full-height {
	height: 100%;
}

.run-data-schema {
	padding: 0;

	&.no-search-results {
		display: flex;
		justify-content: center;
		padding: var(--spacing--lg) 0;
	}
}

.scroller {
	padding: 0 var(--ndv--spacing);
	padding-bottom: var(--spacing--2xl);

	.compact & {
		padding: 0 var(--spacing--2xs);
	}
}

.icon {
	display: inline-flex;
	margin-left: var(--spacing--xl);
	color: var(--color--text--tint-1);
	margin-bottom: var(--ndv--spacing);
}

.notice {
	padding-bottom: var(--spacing--xs);
	color: var(--color--text);
	font-size: var(--font-size--2xs);
	line-height: var(--line-height--lg);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	margin-left: calc(var(--spacing--lg) * var(--schema-level));
}

.empty-schema {
	padding-bottom: var(--spacing--xs);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	margin-left: calc((var(--spacing--xl) * var(--schema-level)));
}

.callout-wrapper {
	padding-bottom: var(--spacing--xs);
	/* stylelint-disable-next-line @n8n/css-var-naming */
	margin-left: calc(var(--spacing--lg) * var(--schema-level));
}

.callout-dismiss {
	margin-left: var(--spacing--xs);
	line-height: 1;
	cursor: pointer;
}
.callout-dismiss:hover {
	color: var(--icon--color--hover);
}
</style>
