import WorkflowDetails from '@/app/components/MainHeader/WorkflowDetails.vue';
import { createComponentRenderer } from '@/__tests__/render';
import { type MockedStore, mockedStore } from '@/__tests__/utils';
import { createTestWorkflow } from '@/__tests__/mocks';
import {
	EnterpriseEditionFeature,
	MODAL_CONFIRM,
	VIEWS,
	WORKFLOW_SHARE_MODAL_KEY,
} from '@/app/constants';
import { STORES } from '@n8n/stores';
import { setActivePinia } from 'pinia';
import { createTestingPinia } from '@pinia/testing';
import userEvent from '@testing-library/user-event';
import { useUIStore } from '@/app/stores/ui.store';
import { useRoute, useRouter } from 'vue-router';
import { useMessage } from '@/app/composables/useMessage';
import { useToast } from '@/app/composables/useToast';
import { useWorkflowsStore } from '@/app/stores/workflows.store';
import { useWorkflowsListStore } from '@/app/stores/workflowsList.store';
import { useProjectsStore } from '@/features/collaboration/projects/projects.store';
import { useCollaborationStore } from '@/features/collaboration/collaboration/collaboration.store';
import { useSourceControlStore } from '@/features/integrations/sourceControl.ee/sourceControl.store';
import type { SourceControlPreferences } from '@/features/integrations/sourceControl.ee/sourceControl.types';
import type { Project, ProjectSharingData } from '@/features/collaboration/projects/projects.types';
import { shallowRef, computed } from 'vue';
import { WorkflowDocumentStoreKey, WorkflowIdKey } from '@/app/constants/injectionKeys';
import {
	useWorkflowDocumentStore,
	createWorkflowDocumentId,
} from '@/app/stores/workflowDocument.store';

// No workflow route meta on purpose: the menu renders both on workflow-layout
// routes and in host-embedded editors without a workflow route (e.g. the AI
// artifact view), so nothing here may depend on route meta.
vi.mock('vue-router', async (importOriginal) => ({
	...(await importOriginal()),
	useRoute: vi.fn().mockReturnValue({
		params: { workflowId: 'test' },
		query: { parentFolderId: '1' },
		meta: {},
	}),
	useRouter: vi.fn().mockReturnValue({
		replace: vi.fn(),
		push: vi.fn().mockResolvedValue(undefined),
		currentRoute: {
			value: {
				params: {
					workflowId: 'test',
				},
				query: { parentFolderId: '1' },
			},
		},
	}),
}));

vi.mock('@/app/stores/pushConnection.store', () => ({
	usePushConnectionStore: vi.fn().mockReturnValue({
		isConnected: true,
	}),
}));

vi.mock('@/app/composables/useToast', () => {
	const showError = vi.fn();
	const showMessage = vi.fn();
	const showToast = vi.fn();
	return {
		useToast: () => ({
			showError,
			showMessage,
			showToast,
		}),
	};
});

vi.mock('@/app/composables/useMessage', () => {
	const confirm = vi.fn(async () => MODAL_CONFIRM);
	return {
		useMessage: () => ({
			confirm,
		}),
	};
});

const mockSaveCurrentWorkflow = vi.fn().mockResolvedValue(true);

vi.mock('@/app/composables/useWorkflowSaving', () => ({
	useWorkflowSaving: () => ({
		saveCurrentWorkflow: mockSaveCurrentWorkflow,
	}),
}));

const initialState = {
	[STORES.SETTINGS]: {
		settings: {
			enterprise: {
				[EnterpriseEditionFeature.Sharing]: true,
				projects: {
					team: {
						limit: -1,
					},
				},
			},
		},
		areTagsEnabled: true,
	},
	[STORES.TAGS]: {
		tagsById: {
			1: {
				id: '1',
				name: 'tag1',
			},
			2: {
				id: '2',
				name: 'tag2',
			},
		},
	},
};

const pinia = createTestingPinia({ initialState });
const workflowDocumentStoreRef = shallowRef<ReturnType<typeof useWorkflowDocumentStore> | null>(
	null,
);

const renderComponent = createComponentRenderer(WorkflowDetails, {
	pinia,
	global: {
		provide: {
			[WorkflowDocumentStoreKey as symbol]: workflowDocumentStoreRef,
			[WorkflowIdKey as unknown as string]: computed(() => '1'),
		},
		stubs: {
			RouterLink: true,
			FolderBreadcrumbs: {
				template: '<div><slot name="append" /></div>',
			},
		},
		directives: {
			loading: {
				mounted() {},
				updated() {},
				unmounted() {},
			},
		},
	},
});

let uiStore: ReturnType<typeof useUIStore>;
let workflowsStore: MockedStore<typeof useWorkflowsStore>;
let workflowsListStore: MockedStore<typeof useWorkflowsListStore>;
let projectsStore: MockedStore<typeof useProjectsStore>;
let collaborationStore: MockedStore<typeof useCollaborationStore>;
let sourceControlStore: MockedStore<typeof useSourceControlStore>;
let message: ReturnType<typeof useMessage>;
let toast: ReturnType<typeof useToast>;
let router: ReturnType<typeof useRouter>;

const workflow = createTestWorkflow({
	id: '1',
	name: 'Test Workflow',
	tags: ['1', '2'],
	active: false,
	isArchived: false,
	scopes: [],
	meta: {},
});

// Extract props with correct types for WorkflowDetails component
const defaultProps = {
	id: workflow.id,
	tags: ['1', '2'] as readonly string[],
	name: workflow.name,
	isArchived: workflow.isArchived,
	description: workflow.description,
};

describe('WorkflowDetails', () => {
	beforeEach(() => {
		const docPinia = createTestingPinia({ stubActions: false });
		setActivePinia(docPinia);
		const workflowDocumentStore = useWorkflowDocumentStore(createWorkflowDocumentId(workflow.id));
		workflowDocumentStore.setActiveState({ activeVersionId: null, activeVersion: null });
		workflowDocumentStore.setScopes(workflow.scopes ?? []);
		workflowDocumentStoreRef.value = workflowDocumentStore;
		setActivePinia(pinia);

		uiStore = useUIStore();
		workflowsStore = mockedStore(useWorkflowsStore);
		workflowsListStore = mockedStore(useWorkflowsListStore);
		projectsStore = mockedStore(useProjectsStore);
		collaborationStore = mockedStore(useCollaborationStore);
		sourceControlStore = mockedStore(useSourceControlStore);

		mockSaveCurrentWorkflow.mockClear();
		mockSaveCurrentWorkflow.mockResolvedValue(true);
		workflowsListStore.workflowsById = {
			'1': workflow,
			'123': workflow,
		};
		workflowsStore.isWorkflowSaved = { '1': true, '123': true };
		workflowsStore.setWorkflowId(workflow.id);
		workflowDocumentStoreRef.value?.setChecksum('test-checksum');
		projectsStore.currentProject = null;
		projectsStore.personalProject = { id: 'personal', name: 'Personal' } as Project;
		collaborationStore.shouldBeReadOnly = false;
		sourceControlStore.preferences = { branchReadOnly: false } as SourceControlPreferences;

		message = useMessage();
		toast = useToast();
		router = useRouter();
	});

	afterEach(() => {
		vi.clearAllMocks();
	});

	it('renders workflow name and tags', async () => {
		vi.mocked(useRoute).mockReturnValueOnce({
			query: { parentFolderId: '1' },
		} as unknown as ReturnType<typeof useRoute>);
		const { getByTestId, getByText } = renderComponent({
			props: {
				...defaultProps,
			},
		});

		const workflowNameInput = getByTestId('inline-edit-input');

		expect(workflowNameInput).toHaveValue('Test Workflow');
		expect(getByText('tag1')).toBeInTheDocument();
		expect(getByText('tag2')).toBeInTheDocument();
	});

	it('opens share modal on share button click', async () => {
		const openModalSpy = vi.spyOn(uiStore, 'openModalWithData');

		workflowDocumentStoreRef.value?.setScopes(['workflow:share']);
		const { getByTestId } = renderComponent({
			props: {
				...defaultProps,
			},
		});

		await userEvent.click(getByTestId('workflow-menu'));
		await userEvent.click(getByTestId('workflow-menu-item-share'));
		expect(openModalSpy).toHaveBeenCalledWith({
			name: WORKFLOW_SHARE_MODAL_KEY,
			data: { id: '1' },
		});
	});

	describe('Workflow menu', () => {
		it('should not have workflow duplicate and import when branch is read-only', async () => {
			sourceControlStore.preferences.branchReadOnly = true;

			workflowDocumentStoreRef.value?.setScopes(['workflow:read']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));

			expect(queryByTestId('workflow-menu-item-duplicate')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-import-from-url')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-import-from-file')).not.toBeInTheDocument();
		});

		it('should not have workflow duplicate and import when collaboration is read-only', async () => {
			collaborationStore.shouldBeReadOnly = true;

			workflowDocumentStoreRef.value?.setScopes(['workflow:read']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));

			expect(queryByTestId('workflow-menu-item-duplicate')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-import-from-url')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-import-from-file')).not.toBeInTheDocument();
		});

		it('should have workflow duplicate and import options if permission update is true', async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:update', 'workflow:share']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));

			expect(getByTestId('workflow-menu-item-duplicate')).not.toHaveClass('disabled');
			expect(getByTestId('workflow-menu-item-import-from-url')).not.toHaveClass('disabled');
			expect(getByTestId('workflow-menu-item-import-from-file')).not.toHaveClass('disabled');
			expect(queryByTestId('workflow-menu-item-share')).not.toHaveClass('disabled');
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-archive')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
		});

		it("should have disabled 'Archive' option on new workflow", async () => {
			vi.mocked(useRoute)
				.mockReset()
				.mockReturnValue({
					meta: {},
					query: { parentFolderId: '1', new: 'true' },
					params: { workflowId: 'test' },
				} as unknown as ReturnType<typeof useRoute>);

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					id: 'new',
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
			expect(getByTestId('workflow-menu-item-archive')).toBeInTheDocument();
			expect(getByTestId('workflow-menu-item-archive')).toHaveClass('disabled');
		});

		it("should have 'Archive' option on non archived workflow", async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
			expect(getByTestId('workflow-menu-item-archive')).toBeInTheDocument();
			expect(getByTestId('workflow-menu-item-archive')).not.toHaveClass('disabled');
		});

		it("should not have 'Archive' option on non archived workflow when branch is read-only", async () => {
			sourceControlStore.preferences.branchReadOnly = true;

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-archive')).not.toBeInTheDocument();
		});

		it("should not have 'Archive' option on non archived workflow when collaboration is read-only", async () => {
			collaborationStore.shouldBeReadOnly = true;

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-archive')).not.toBeInTheDocument();
		});

		it("should not have 'Archive' option on non archived workflow without permission", async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:update']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-archive')).not.toBeInTheDocument();
		});

		it("should have 'Unarchive' and 'Delete' options on archived workflow", async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-archive')).not.toBeInTheDocument();
			expect(getByTestId('workflow-menu-item-delete')).toBeInTheDocument();
			expect(getByTestId('workflow-menu-item-delete')).not.toHaveClass('disabled');
			expect(getByTestId('workflow-menu-item-unarchive')).toBeInTheDocument();
			expect(getByTestId('workflow-menu-item-unarchive')).not.toHaveClass('disabled');
		});

		it("should not have 'Unarchive' or 'Delete' options on archived workflow when branch is read-only", async () => {
			sourceControlStore.preferences.branchReadOnly = true;

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-archive')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
		});

		it("should not have 'Unarchive' or 'Delete' options on archived workflow when collaboration is read-only", async () => {
			collaborationStore.shouldBeReadOnly = true;

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-archive')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
		});

		it("should not have 'Unarchive' or 'Delete' options on archived workflow without permission", async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:update']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-archive')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-delete')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-unarchive')).not.toBeInTheDocument();
		});

		it('should not have edit actions on archived workflow even with update permission', async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:update', 'workflow:delete']);
			const { getByTestId, queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			expect(queryByTestId('workflow-menu-item-duplicate')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-import-from-url')).not.toBeInTheDocument();
			expect(queryByTestId('workflow-menu-item-import-from-file')).not.toBeInTheDocument();
		});

		it("should call onWorkflowMenuSelect on 'Archive' option click on nonactive workflow", async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			workflowsStore.archiveWorkflow.mockResolvedValue(undefined);

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-archive'));

			expect(message.confirm).toHaveBeenCalledTimes(0);
			expect(toast.showError).toHaveBeenCalledTimes(0);
			expect(toast.showToast).toHaveBeenCalledTimes(1);
			expect(workflowsStore.archiveWorkflow).toHaveBeenCalledTimes(1);
			expect(workflowsStore.archiveWorkflow).toHaveBeenCalledWith(workflow.id, 'test-checksum');
			expect(router.push).toHaveBeenCalledTimes(1);
			expect(router.push).toHaveBeenCalledWith({
				name: VIEWS.WORKFLOWS,
			});
		});

		it("should navigate to team project workflows page on 'Archive' for team project workflow", async () => {
			const teamProjectId = 'team-project-123';
			workflowDocumentStoreRef.value?.setHomeProject({
				id: teamProjectId,
				name: 'Team Project',
				type: 'team',
			} as ProjectSharingData);
			workflowsStore.archiveWorkflow.mockResolvedValue(undefined);

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-archive'));

			expect(workflowsStore.archiveWorkflow).toHaveBeenCalledWith(workflow.id, 'test-checksum');
			expect(router.push).toHaveBeenCalledWith({
				name: VIEWS.PROJECTS_WORKFLOWS,
				params: { projectId: teamProjectId },
			});
		});

		it("should navigate to personal project workflows page on 'Archive' for personal project workflow", async () => {
			const personalProjectId = 'personal-project-123';
			workflowDocumentStoreRef.value?.setHomeProject({
				id: personalProjectId,
				name: 'Personal Project',
				type: 'personal',
			} as ProjectSharingData);
			workflowsStore.archiveWorkflow.mockResolvedValue(undefined);

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-archive'));

			expect(workflowsStore.archiveWorkflow).toHaveBeenCalledWith(workflow.id, 'test-checksum');
			expect(router.push).toHaveBeenCalledWith({
				name: VIEWS.PROJECTS_WORKFLOWS,
				params: { projectId: personalProjectId },
			});
		});

		it("should confirm onWorkflowMenuSelect on 'Archive' option click on active workflow", async () => {
			workflowDocumentStoreRef.value?.setActiveState({
				activeVersionId: 'v1',
				activeVersion: null,
			});
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			workflowsStore.archiveWorkflow.mockResolvedValue(undefined);

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-archive'));

			expect(message.confirm).toHaveBeenCalledTimes(1);
			expect(toast.showError).toHaveBeenCalledTimes(0);
			expect(toast.showToast).toHaveBeenCalledTimes(1);
			expect(workflowsStore.archiveWorkflow).toHaveBeenCalledTimes(1);
			expect(workflowsStore.archiveWorkflow).toHaveBeenCalledWith(workflow.id, 'test-checksum');
			expect(router.push).toHaveBeenCalledTimes(1);
			expect(router.push).toHaveBeenCalledWith({
				name: VIEWS.WORKFLOWS,
			});
			expect(workflowDocumentStoreRef.value?.active).toBe(false);
		});

		it('should show a "Delete permanently" link in the archive toast that deletes the archived workflow', async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: { ...defaultProps, isArchived: false },
			});

			workflowsStore.archiveWorkflow.mockResolvedValue(undefined);

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-archive'));

			expect(toast.showToast).toHaveBeenCalledTimes(1);
			const toastConfig = vi.mocked(toast.showToast).mock.calls[0][0];
			expect(toastConfig.message).toContain('archive-toast-delete-permanently-link');
			expect(toastConfig.onClick).toBeDefined();

			const anchor = document.createElement('a');
			toastConfig.onClick?.({ target: anchor, preventDefault: vi.fn() } as unknown as MouseEvent);

			await vi.waitFor(() => {
				expect(workflowsListStore.deleteWorkflow).toHaveBeenCalledTimes(1);
			});
			expect(workflowsListStore.deleteWorkflow).toHaveBeenCalledWith(workflow.id);
		});

		it("should call onWorkflowMenuSelect on 'Unarchive' option click", async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-unarchive'));

			expect(toast.showError).toHaveBeenCalledTimes(0);
			expect(toast.showMessage).toHaveBeenCalledTimes(1);
			expect(workflowsStore.unarchiveWorkflow).toHaveBeenCalledTimes(1);
			expect(workflowsStore.unarchiveWorkflow).toHaveBeenCalledWith(workflow.id);
		});

		it("should call onWorkflowMenuSelect on 'Delete' option click", async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-delete'));

			expect(message.confirm).toHaveBeenCalledTimes(1);
			expect(toast.showError).toHaveBeenCalledTimes(0);
			expect(toast.showMessage).toHaveBeenCalledTimes(1);
			expect(workflowsListStore.deleteWorkflow).toHaveBeenCalledTimes(1);
			expect(workflowsListStore.deleteWorkflow).toHaveBeenCalledWith(workflow.id);
			expect(router.push).toHaveBeenCalledTimes(1);
			expect(router.push).toHaveBeenCalledWith({
				name: VIEWS.WORKFLOWS,
			});
		});

		it("should navigate to team project workflows page on 'Delete' for team project workflow", async () => {
			const teamProjectId = 'team-project-456';
			workflowDocumentStoreRef.value?.setHomeProject({
				id: teamProjectId,
				name: 'Team Project',
				type: 'team',
			} as ProjectSharingData);
			workflowsListStore.deleteWorkflow.mockResolvedValue(undefined);

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-delete'));

			expect(workflowsListStore.deleteWorkflow).toHaveBeenCalledWith(workflow.id);
			expect(router.push).toHaveBeenCalledWith({
				name: VIEWS.PROJECTS_WORKFLOWS,
				params: { projectId: teamProjectId },
			});
		});

		it("should navigate to personal project workflows page on 'Delete' for personal project workflow", async () => {
			const personalProjectId = 'personal-project-456';
			workflowDocumentStoreRef.value?.setHomeProject({
				id: personalProjectId,
				name: 'Personal Project',
				type: 'personal',
			} as ProjectSharingData);
			workflowsListStore.deleteWorkflow.mockResolvedValue(undefined);

			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-delete'));

			expect(workflowsListStore.deleteWorkflow).toHaveBeenCalledWith(workflow.id);
			expect(router.push).toHaveBeenCalledWith({
				name: VIEWS.PROJECTS_WORKFLOWS,
				params: { projectId: personalProjectId },
			});
		});

		it("should call onWorkflowMenuSelect on 'Change owner' option click", async () => {
			const openMoveToFolderModalSpy = vi.spyOn(uiStore, 'openMoveToFolderModal');

			workflowsListStore.workflowsById = { [workflow.id]: workflow };

			workflowDocumentStoreRef.value?.setScopes(['workflow:move']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
				},
			});

			await userEvent.click(getByTestId('workflow-menu'));
			await userEvent.click(getByTestId('workflow-menu-item-change-owner'));

			expect(openMoveToFolderModalSpy).toHaveBeenCalledWith(
				'workflow',
				expect.objectContaining({ id: workflow.id }),
				expect.anything(),
			);
		});
	});

	describe('Archived badge', () => {
		it('should show badge on archived workflow', async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { getByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: true,
				},
			});

			expect(getByTestId('workflow-archived-tag')).toBeVisible();
		});

		it('should not show badge on non archived workflow', async () => {
			workflowDocumentStoreRef.value?.setScopes(['workflow:delete']);
			const { queryByTestId } = renderComponent({
				props: {
					...defaultProps,
					isArchived: false,
				},
			});

			expect(queryByTestId('workflow-archived-tag')).not.toBeInTheDocument();
		});
	});
});
