<script setup lang="ts">
import { computed, ref } from 'vue';

import Modal from '@/app/components/Modal.vue';
import { useStorage } from '@/app/composables/useStorage';
import { useNodeTypesStore } from '@/app/stores/nodeTypes.store';
import { useUIStore } from '@/app/stores/ui.store';
import { useWorkflowsStore } from '@/app/stores/workflows.store';
import { getActivatableTriggerNodes, getTriggerNodeServiceName } from '@/app/utils/nodeTypesUtils';
import { useExecutionsStore } from '@/features/execution/executions/executions.store';
import { useI18n } from '@n8n/i18n';
import { useRouter } from 'vue-router';
import {
	LOCAL_STORAGE_ACTIVATION_FLAG,
	VIEWS,
	WORKFLOW_ACTIVE_MODAL_KEY,
	WORKFLOW_SETTINGS_MODAL_KEY,
} from '../constants';

import { N8nButton, N8nCheckbox, N8nText } from '@n8n/design-system';

const checked = ref(false);

const executionsStore = useExecutionsStore();
const workflowsStore = useWorkflowsStore();
const nodeTypesStore = useNodeTypesStore();
const uiStore = useUIStore();
const router = useRouter();
const i18n = useI18n();

const modalTitle = computed(() => i18n.baseText('activationModal.workflowPublished'));

const triggerContent = computed(() => {
	const foundTriggers = getActivatableTriggerNodes(workflowsStore.workflowTriggerNodes);
	if (!foundTriggers.length) {
		return '';
	}

	if (foundTriggers.length > 1) {
		return i18n.baseText('activationModal.yourTriggersWillNowFire');
	}

	const trigger = foundTriggers[0];

	const triggerNodeType = nodeTypesStore.getNodeType(trigger.type, trigger.typeVersion);
	if (triggerNodeType) {
		if (triggerNodeType.activationMessage) {
			return triggerNodeType.activationMessage;
		}

		const serviceName = getTriggerNodeServiceName(triggerNodeType);
		if (trigger.webhookId) {
			return i18n.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
				interpolate: {
					serviceName,
				},
			});
		} else if (triggerNodeType.polling) {
			return i18n.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
				interpolate: {
					serviceName,
				},
			});
		}
	}
	return i18n.baseText('activationModal.yourTriggerWillNowFire');
});

const showExecutionsList = async () => {
	const activeExecution = executionsStore.activeExecution;
	const currentWorkflow = workflowsStore.workflowId;

	if (activeExecution) {
		router
			.push({
				name: VIEWS.EXECUTION_PREVIEW,
				params: { name: currentWorkflow, executionId: activeExecution.id },
			})
			.catch(() => {});
	} else {
		router.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } }).catch(() => {});
	}
	uiStore.closeModal(WORKFLOW_ACTIVE_MODAL_KEY);
};

const showSettings = async () => {
	uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
};

const handleCheckboxChange = (checkboxValue: string | number | boolean) => {
	const boolValue = typeof checkboxValue === 'boolean' ? checkboxValue : Boolean(checkboxValue);
	checked.value = boolValue;
	useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value = boolValue.toString();
};
</script>

<template>
	<Modal :name="WORKFLOW_ACTIVE_MODAL_KEY" :title="modalTitle" width="460px">
		<template #content>
			<div>
				<N8nText>{{ triggerContent }}</N8nText>
			</div>
			<div :class="$style.spaced">
				<N8nText>
					<N8nText :bold="true">
						{{ i18n.baseText('activationModal.theseExecutionsWillNotShowUp') }}
					</N8nText>
					{{ i18n.baseText('activationModal.butYouCanSeeThem') }}
					<a @click="showExecutionsList">
						{{ i18n.baseText('activationModal.executionList') }}
					</a>
					{{ i18n.baseText('activationModal.ifYouChooseTo') }}
					<a @click="showSettings">{{ i18n.baseText('activationModal.saveExecutions') }}</a>
				</N8nText>
			</div>
		</template>

		<template #footer="{ close }">
			<div :class="$style.footer">
				<N8nCheckbox :model-value="checked" @update:model-value="handleCheckboxChange">
					<template #label>{{ i18n.baseText('generic.dontShowAgain') }}</template>
				</N8nCheckbox>
				<N8nButton :label="i18n.baseText('activationModal.gotIt')" @click="close" />
			</div>
		</template>
	</Modal>
</template>

<style lang="scss" module>
.spaced {
	margin-top: var(--spacing--2xs);
}

.footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	> button {
		margin-left: auto;
	}
}
</style>
