<script setup lang="ts">
/* eslint-disable vue/no-mutating-props */
import type { AgentInfo, AgentOption } from '../types';

import { InfoFilled } from '@element-plus/icons-vue';
import {
  ElForm,
  ElFormItem,
  ElIcon,
  ElInput,
  ElInputNumber,
  ElOption,
  ElSelect,
  ElSwitch,
  ElTooltip,
} from 'element-plus';

defineProps<{
  agent: AgentInfo;
  categories: AgentOption[];
  models: AgentOption[];
}>();

const emit = defineEmits<{ change: [] }>();
</script>

<template>
  <ElForm label-position="top" class="agent-form">
    <ElFormItem label="名称" required>
      <ElInput
        v-model="agent.name"
        maxlength="50"
        show-word-limit
        @input="emit('change')"
      />
    </ElFormItem>
    <ElFormItem label="描述">
      <ElInput
        v-model="agent.description"
        type="textarea"
        :rows="3"
        maxlength="200"
        show-word-limit
        @input="emit('change')"
      />
    </ElFormItem>
    <ElFormItem label="头像">
      <ElInput
        v-model="agent.avatar"
        placeholder="图片地址"
        @input="emit('change')"
      />
    </ElFormItem>
    <ElFormItem label="分类">
      <ElSelect
        v-model="agent.categoryId"
        clearable
        filterable
        @change="emit('change')"
      >
        <ElOption
          v-for="item in categories"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="模型" required>
      <ElSelect v-model="agent.modelId" filterable @change="emit('change')">
        <ElOption
          v-for="item in models"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem>
      <template #label>
        <span class="agent-form__label">
          模型流式响应
          <ElTooltip
            content="关闭后，模型会在生成完成后一次性返回回答。"
            effect="light"
            placement="top"
          >
            <ElIcon class="agent-form__info" aria-label="模型流式响应说明">
              <InfoFilled />
            </ElIcon>
          </ElTooltip>
        </span>
      </template>
      <ElSwitch
        v-model="agent.generationConfigJson!.stream"
        aria-label="模型流式响应"
        @change="emit('change')"
      />
    </ElFormItem>
    <ElFormItem label="系统提示词">
      <ElInput
        v-model="agent.promptConfigJson!.systemPrompt"
        type="textarea"
        :rows="7"
        @input="emit('change')"
      />
    </ElFormItem>
    <div class="agent-form__grid">
      <ElFormItem>
        <template #label>
          <span class="agent-form__label">
            消息数触发阈值
            <ElTooltip
              content="工作记忆里的消息条数达到该值时，会触发上下文压缩；用户消息和智能体消息都会计入。"
              effect="light"
              placement="top"
            >
              <ElIcon class="agent-form__info" aria-label="消息数触发阈值说明">
                <InfoFilled />
              </ElIcon>
            </ElTooltip>
          </span>
        </template>
        <ElInputNumber
          v-model="agent.memoryConfigJson!.compressionParameter.msgThreshold"
          :min="1"
          :max="100"
          controls-position="right"
          @change="emit('change')"
        />
      </ElFormItem>
      <ElFormItem>
        <template #label>
          <span class="agent-form__label">
            最近保留消息数
            <ElTooltip
              content="压缩上下文时，最近这 N 条消息会尽量保留原文；更早的消息会优先被压缩。"
              effect="light"
              placement="top"
            >
              <ElIcon class="agent-form__info" aria-label="最近保留消息数说明">
                <InfoFilled />
              </ElIcon>
            </ElTooltip>
          </span>
        </template>
        <ElInputNumber
          v-model="agent.memoryConfigJson!.compressionParameter.lastKeep"
          :min="0"
          :max="100"
          controls-position="right"
          @change="emit('change')"
        />
      </ElFormItem>
      <ElFormItem>
        <template #label>
          <span class="agent-form__label">
            最小压缩 Token 阈值
            <ElTooltip
              content="工作记忆的 Token 数达到该值时，会触发上下文压缩。"
              effect="light"
              placement="top"
            >
              <ElIcon
                class="agent-form__info"
                aria-label="最小压缩 Token 阈值说明"
              >
                <InfoFilled />
              </ElIcon>
            </ElTooltip>
          </span>
        </template>
        <ElInputNumber
          v-model="
            agent.memoryConfigJson!.compressionParameter
              .minCompressionTokenThreshold
          "
          :min="0"
          :step="500"
          controls-position="right"
          @change="emit('change')"
        />
      </ElFormItem>
    </div>
  </ElForm>
</template>

<style scoped>
.agent-form {
  padding: 16px;
}

.agent-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.agent-form__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.agent-form__info {
  color: var(--el-text-color-secondary);
  cursor: help;
  font-size: 14px;
}

.agent-form :deep(.el-select),
.agent-form :deep(.el-input-number) {
  width: 100%;
}
</style>
