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

import { $t } from '@vben/locales';

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElOption,
  ElSelect,
  ElSwitch,
} from 'element-plus';

import { getModelListApi } from '#/api/ai-platform/ai-platform';

import SmartInput from '../components/SmartInput.vue';

const props = defineProps<{ data: any; nodeId: string }>();
const emit = defineEmits(['update']);

const form = ref({
  label: $t('ai-platform.workflow.panels.confirm.label'),
  title: $t('ai-platform.workflow.panels.confirm.titlePlaceholder'),
  content: '',
  confirm_text: $t('ai-platform.workflow.panels.confirm.confirmPlaceholder'),
  cancel_text: $t('ai-platform.workflow.panels.confirm.cancelPlaceholder'),
  variable_name: 'confirmed',
  use_llm_intent: false,
  llm_model_id: '',
  ...props.data,
});

// 模型列表
const modelList = ref<any[]>([]);
const loadingModels = ref(false);

// 加载模型列表
const loadModels = async () => {
  loadingModels.value = true;
  try {
    const res = await getModelListApi({
      page: 1,
      pageSize: 100,
      is_active: true,
    });
    modelList.value = res.items || [];
  } catch (error) {
    console.error('加载模型列表失败', error);
  } finally {
    loadingModels.value = false;
  }
};

onMounted(() => {
  if (form.value.use_llm_intent) {
    loadModels();
  }
});

// 当启用 LLM 意图识别时加载模型列表
watch(
  () => form.value.use_llm_intent,
  (val) => {
    if (val && modelList.value.length === 0) {
      loadModels();
    }
  },
);

watch(
  form,
  (val) => {
    emit('update', val);
  },
  { deep: true },
);
</script>

<template>
  <ElForm label-position="top" size="small" class="space-y-4">
    <ElFormItem :label="$t('ai-platform.workflow.panels.common.nodeName')">
      <ElInput
        v-model="form.label"
        :placeholder="$t('ai-platform.workflow.panels.confirm.placeholder')"
      />
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.workflow.panels.confirm.dialogTitle')">
      <SmartInput
        v-model="form.title"
        :current-node-id="nodeId"
        :placeholder="
          $t('ai-platform.workflow.panels.confirm.titlePlaceholder')
        "
      />
    </ElFormItem>

    <ElFormItem>
      <template #label>
        <span>{{ $t('ai-platform.workflow.panels.confirm.content') }}</span>
        <span class="text-destructive ml-1">*</span>
      </template>
      <SmartInput
        v-model="form.content"
        :current-node-id="nodeId"
        type="textarea"
        :rows="4"
        :placeholder="
          $t('ai-platform.workflow.panels.confirm.contentPlaceholder')
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.confirm.contentHint') }}
      </div>
    </ElFormItem>

    <div class="flex gap-4">
      <ElFormItem
        :label="$t('ai-platform.workflow.panels.confirm.confirmBtnText')"
        class="flex-1"
      >
        <ElInput
          v-model="form.confirm_text"
          :placeholder="
            $t('ai-platform.workflow.panels.confirm.confirmPlaceholder')
          "
        />
      </ElFormItem>
      <ElFormItem
        :label="$t('ai-platform.workflow.panels.confirm.cancelBtnText')"
        class="flex-1"
      >
        <ElInput
          v-model="form.cancel_text"
          :placeholder="
            $t('ai-platform.workflow.panels.confirm.cancelPlaceholder')
          "
        />
      </ElFormItem>
    </div>

    <ElFormItem :label="$t('ai-platform.workflow.panels.common.outputVarName')">
      <ElInput v-model="form.variable_name" placeholder="confirmed" />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.confirm.outputHint') }}
      </div>
    </ElFormItem>

    <!-- LLM 意图识别配置 -->
    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.confirm.smartIntent')
          }}</span>
          <ElSwitch v-model="form.use_llm_intent" size="small" />
        </div>
      </template>
      <div class="text-muted-foreground text-xs">
        {{ $t('ai-platform.workflow.panels.confirm.smartIntentHint') }}
      </div>
    </ElFormItem>

    <ElFormItem
      v-if="form.use_llm_intent"
      :label="$t('ai-platform.workflow.panels.confirm.intentModel')"
    >
      <ElSelect
        v-model="form.llm_model_id"
        :placeholder="$t('ai-platform.workflow.panels.common.selectModel')"
        :loading="loadingModels"
        filterable
        class="w-full"
      >
        <ElOption
          v-for="model in modelList"
          :key="model.id"
          :label="`${model.display_name} (${model.provider_name})`"
          :value="model.id"
        />
      </ElSelect>
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.confirm.intentModelHint') }}
      </div>
    </ElFormItem>
  </ElForm>
</template>
