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

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

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

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.question.label'),
  question: '',
  variable_name: 'user_input',
  input_type: 'text',
  placeholder: '',
  default_value: '',
  required: true,
  validation_regex: '',
  validation_message: $t(
    'ai-platform.workflow.panels.question.validationDefault',
  ),
  render_input: false, // 是否渲染输入框，默认不渲染（用户直接在聊天框输入）
  ...props.data,
});

const inputTypes = [
  { label: $t('ai-platform.workflow.panels.question.text'), value: 'text' },
  { label: $t('ai-platform.workflow.panels.question.number'), value: 'number' },
  { label: $t('ai-platform.workflow.panels.question.email'), value: 'email' },
  { label: $t('ai-platform.workflow.panels.question.phone'), value: 'phone' },
  { label: $t('ai-platform.workflow.panels.question.date'), value: 'date' },
];

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.question.placeholder')"
      />
    </ElFormItem>

    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.question.questionContent')
          }}</span>
          <span class="text-xs text-red-400">*</span>
        </div>
      </template>
      <SmartInput
        v-model="form.question"
        :current-node-id="nodeId"
        type="textarea"
        :rows="3"
        :placeholder="
          $t('ai-platform.workflow.panels.question.questionPlaceholder')
        "
      />
    </ElFormItem>

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

    <ElFormItem :label="$t('ai-platform.workflow.panels.question.renderInput')">
      <ElSwitch v-model="form.render_input" />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.question.renderInputHint') }}
      </div>
    </ElFormItem>

    <template v-if="form.render_input">
      <ElFormItem :label="$t('ai-platform.workflow.panels.question.inputType')">
        <ElSelect v-model="form.input_type" style="width: 100%">
          <ElOption
            v-for="t in inputTypes"
            :key="t.value"
            :label="t.label"
            :value="t.value"
          />
        </ElSelect>
      </ElFormItem>

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

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.question.defaultValueLabel')"
      >
        <SmartInput
          v-model="form.default_value"
          :current-node-id="nodeId"
          :placeholder="
            $t('ai-platform.workflow.panels.question.defaultValueHint')
          "
        />
      </ElFormItem>

      <ElFormItem :label="$t('ai-platform.workflow.panels.question.required')">
        <ElSwitch v-model="form.required" />
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.question.validationRegex')"
      >
        <ElInput v-model="form.validation_regex" placeholder="e.g. ^[0-9]+$" />
        <div class="text-muted-foreground mt-1 text-xs">
          {{ $t('ai-platform.workflow.panels.question.validationRegexHint') }}
        </div>
      </ElFormItem>

      <ElFormItem
        :label="$t('ai-platform.workflow.panels.question.validationMessage')"
      >
        <ElInput
          v-model="form.validation_message"
          :placeholder="
            $t('ai-platform.workflow.panels.question.validationDefault')
          "
        />
      </ElFormItem>
    </template>
  </ElForm>
</template>
