<template>
	<div class="absolute top-0 right-0 p-16px flex flex-col gap-12px">
		<el-tooltip :content="t('pages.toolbar.nodes')" placement="left">
			<el-popover placement="left-start" width="360px">
				<NodeLibary @add-node="(val) => $emit('create:node', val)" />
				<template #reference>
					<IconButton type="primary" class="ml-12px" icon="lucide:package-plus" square />
				</template>
			</el-popover>
		</el-tooltip>

		<el-tooltip :content="t('pages.toolbar.note')" placement="left">
			<IconButton
				icon="lucide:file-plus-corner"
				square
				@click="$emit('create:node', 'stickyNote')"
			/>
		</el-tooltip>

		<el-popover
			ref="popoverRef"
			width="240px"
			trigger="click"
			:disabled="props.runNodes.length <= 1"
		>
			<div v-if="props.runNodes.length > 1" class="run-selector">
				<div class="run-selector__title">{{ t('pages.toolbar.runEntry') }}</div>
				<button
					v-for="node in props.runNodes"
					:key="node.id"
					type="button"
					class="run-selector__item"
					@click="handleSelectRunNode(node.id)"
				>
					<span class="run-selector__name">{{ node.name }}</span>
					<span class="run-selector__type">{{ getNodeDisplayName(node.nodeType) }}</span>
				</button>
			</div>
			<template #reference>
				<IconButton
					icon="lucide:play"
					icon-color="#fff"
					type="success"
					square
					@click="handleRunClick"
				/>
			</template>
		</el-popover>

		<el-tooltip :content="t('pages.toolbar.env')" placement="left">
			<IconButton icon="eos-icons:env" icon-color="#666" square @click="showEnvDialog = true" />
		</el-tooltip>

		<AgentEnvDialog v-model="showEnvDialog" @change="handleEnvChange" :value="envVars" />
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconButton } from '@repo/ui'
import type { PopoverInstance } from 'element-plus'

import NodeLibary from '@/features/nodeLibary/index.vue'
import AgentEnvDialog from './AgentEnvDialog.vue'
import { useI18n } from '@/composables/useI18n'
import { getNodeDisplayName } from '@/nodes/i18n'

const props = defineProps<{
	envVars: {
		name: string
		value: string
		type: 'string' | 'number' | 'boolean' | 'object' | 'array'
	}[]
	runNodes: {
		id: string
		name: string
		nodeType: string
	}[]
}>()

const emit = defineEmits<{
	(
		e: 'changeEnvVars',
		value: {
			name: string
			value: string
			type: 'string' | 'number' | 'boolean' | 'object' | 'array'
		}[]
	): void
	(e: 'run', id?: string): void
	(e: 'create:node', value: { type: string } | string): void
}>()

const { t } = useI18n()
const showEnvDialog = ref(false)
const popoverRef = ref<PopoverInstance>()

function handleEnvChange(
	payload: {
		name: string
		value: string
		type: 'string' | 'number' | 'boolean' | 'object' | 'array'
	}[]
) {
	emit('changeEnvVars', payload)
}

function handleRunClick() {
	if (props.runNodes.length <= 1) {
		emit('run', props.runNodes[0]?.id)
	}
}

function handleSelectRunNode(id: string) {
	popoverRef.value?.hide()
	emit('run', id)
}
</script>

<style scoped>
.run-selector {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.run-selector__title {
	font-size: 13px;
	font-weight: 600;
	color: #344054;
}

.run-selector__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	text-align: left;
}

.run-selector__item:hover {
	border-color: #2563eb;
	background: #f8fbff;
}

.run-selector__name {
	font-size: 13px;
	font-weight: 600;
	color: #344054;
}

.run-selector__type {
	font-size: 12px;
	color: #667085;
}
</style>
