<template>
	<el-scrollbar class="w-full box-border p-12px">
		<div class="ai-agent-setter">
			<section class="section-block">
				<div class="section-title-row">
					<label class="section-title">智能体配置</label>
				</div>
				<div class="flex gap-12px">
					<el-button class="config-button" plain @click="openAgentPicker" :icon="Check">
						选择智能体
					</el-button>
					<el-button class="config-button" plain :icon="Operation" @click="openEditModal">
						配置智能体
					</el-button>
				</div>
			</section>

			<section class="section-block">
				<div class="section-title-row">
					<label class="section-title">上下文</label>
				</div>
				<VarInput
					v-model="formData.query"
					:rows="3"
					class="w-full"
					placeholder="请输入，输入/选择变量"
				/>
			</section>

			<section class="section-block">
				<el-switch v-model="formData.enable_memory" active-text="开启记忆" />
			</section>

			<!-- <section class="section-block">
				<div class="section-title-row">
					<label class="section-title">文件变量</label>
				</div>
				<el-input v-model="formData.file_variable.name" placeholder="变量名" />
				<el-input v-model="formData.file_variable.describe" placeholder="描述" />
				<el-input v-model="formData.file_variable.type" disabled />
			</section> -->

			<section class="section-block">
				<el-collapse>
					<el-collapse-item title="" name="2">
						<template #title>
							<div class="flex items-center justify-between beautify">
								<label class="text-14px font-bold text-gray-700">输出变量</label>
							</div>
						</template>
						<ul>
							<li v-for="output in formData.outputs" :key="output.name">
								<div>
									<span class="text-#333">{{ output.name }}</span>
									<span class="text-#999 ml-8px">{{ output.type }}</span>
								</div>
								<div class="text-#666">{{ output.describe }}</div>
							</li>
						</ul>
					</el-collapse-item>
				</el-collapse>
			</section>

			<NodeRuntimeConfig v-model="formData" />
		</div>
	</el-scrollbar>

	<!-- 智能体选择弹窗 -->
	<SelectAgentModal
		v-model="agentPickerVisible"
		@select="handleAgentSelect"
	/>

	<!-- 智能体编辑 -->
	<AgentEditModal
		v-model="agentEditVisible"
		config-only
		:initial-mode="formData.mode"
		:initial-config="formData.agent_config as any"
		@confirm="handleAgentConfigConfirm"
	/>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Operation, Check } from '@element-plus/icons-vue'

import NodeRuntimeConfig from '@/nodes/_base/NodeRuntimeConfig.vue'
import VarInput from '@/nodes/_base/VarInput.vue'
import { useSetterModel } from '../_shared/useSetterModel'
import {
	createDefaultFileVariable,
	DEFAULT_AI_AGENT_OUTPUTS,
	type AiAgentData,
	type AiAgentMode
} from './index'
import AgentEditModal from '@/views/agent/components/EditModal.vue'
import SelectAgentModal from '@/features/SelectAgentModal.vue'

type AgentOption = NonNullable<
	Awaited<ReturnType<typeof import('@repo/api-service').agentApplication.postAiAgentPageList>>['result']
>['model'][number]

const props = defineProps<{
	data: AiAgentData
}>()

const emit = defineEmits<{
	(e: 'update', data: AiAgentData): void
}>()

const formData = useSetterModel<AiAgentData>(props, emit)
const agentPickerVisible = ref(false)
const agentEditVisible = ref(false)

const ensureDefaults = () => {
	formData.value.mode = formData.value.mode || 'smart-reasoning'
	formData.value.file_variable = formData.value.file_variable || createDefaultFileVariable()
	formData.value.outputs = formData.value.outputs?.length
		? formData.value.outputs
		: DEFAULT_AI_AGENT_OUTPUTS
}

const openAgentPicker = () => {
	agentPickerVisible.value = true
}

const openEditModal = () => {
	agentEditVisible.value = true
}

const handleAgentConfigConfirm = (payload: {
	mode: string
	config: AiAgentData['agent_config']
}) => {
	formData.value.mode = (payload.mode || 'smart-reasoning') as AiAgentMode
	formData.value.agent_config = payload.config || {}
}

const handleAgentSelect = (item: AgentOption, config: any) => {
	formData.value.mode = (item.mode as AiAgentMode) || 'smart-reasoning'
	formData.value.agent_config = config
}

onMounted(async () => {
	ensureDefaults()
})
</script>

<style scoped lang="less">
.ai-agent-setter {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.section-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eef2f7;
}

.section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.section-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
}

.field-hint {
	font-size: 12px;
	color: var(--text-tertiary);
}

.config-button {
	width: fit-content;
	max-width: 100%;
}

.agent-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	font-size: 16px;
	line-height: 1;
}

.output-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.output-item {
	padding: 10px 12px;
	border: 1px solid var(--border-light);
	border-radius: 8px;
	background: var(--bg-container);
}

.output-item__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.output-item__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
}

.output-item__type,
.output-item__desc {
	font-size: 12px;
	color: var(--text-tertiary);
}
</style>
