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

import { Plus, Trash2 } from '@vben/icons';
import { $t } from '@vben/locales';

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  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.choice.label'),
  question: '',
  variable_name: 'user_choice',
  options: [] as Array<{ description: string; label: string; value: string }>,
  multiple: false,
  min_select: 1,
  max_select: 1,
  ...props.data,
});

// 初始化选项
if (!form.value.options || form.value.options.length === 0) {
  form.value.options = [
    {
      value: 'option1',
      label: `${$t('ai-platform.workflow.panels.choice.option', { index: 1 })}`,
      description: '',
    },
    {
      value: 'option2',
      label: `${$t('ai-platform.workflow.panels.choice.option', { index: 2 })}`,
      description: '',
    },
  ];
}

const addOption = () => {
  const idx = form.value.options.length + 1;
  form.value.options.push({
    value: `option${idx}`,
    label: `${$t('ai-platform.workflow.panels.choice.option', { index: idx })}`,
    description: '',
  });
};

const removeOption = (index: number) => {
  if (form.value.options.length > 1) {
    form.value.options.splice(index, 1);
  }
};

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

    <ElFormItem>
      <template #label>
        <span>{{
          $t('ai-platform.workflow.panels.choice.questionContent')
        }}</span>
        <span class="text-destructive ml-1">*</span>
      </template>
      <SmartInput
        v-model="form.question"
        :current-node-id="nodeId"
        type="textarea"
        :rows="2"
        :placeholder="
          $t('ai-platform.workflow.panels.choice.questionPlaceholder')
        "
      />
    </ElFormItem>

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

    <ElFormItem>
      <template #label>
        <div class="flex w-full items-center justify-between">
          <span>{{ $t('ai-platform.workflow.panels.choice.optionList') }}</span>
          <ElButton link type="primary" :icon="Plus" @click="addOption">
            {{ $t('ai-platform.workflow.panels.choice.addOption') }}
          </ElButton>
        </div>
      </template>
      <div class="w-full space-y-2">
        <div
          v-for="(opt, index) in form.options"
          :key="index"
          class="border-border bg-muted flex items-start gap-2 rounded border p-2"
        >
          <div class="flex-1 space-y-2">
            <div class="flex gap-2">
              <ElInput
                v-model="opt.value"
                :placeholder="
                  $t('ai-platform.workflow.panels.choice.optionValue')
                "
                size="small"
                class="flex-1"
              />
              <ElInput
                v-model="opt.label"
                :placeholder="
                  $t('ai-platform.workflow.panels.choice.displayText')
                "
                size="small"
                class="flex-1"
              />
            </div>
            <ElInput
              v-model="opt.description"
              :placeholder="$t('ai-platform.workflow.panels.choice.optionDesc')"
              size="small"
            />
          </div>
          <ElButton
            v-if="form.options.length > 1"
            link
            type="danger"
            :icon="Trash2"
            @click="removeOption(index)"
          />
        </div>
      </div>
    </ElFormItem>

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

    <div v-if="form.multiple" class="flex gap-4">
      <ElFormItem
        :label="$t('ai-platform.workflow.panels.choice.minSelect')"
        class="flex-1"
      >
        <ElInputNumber
          v-model="form.min_select"
          :min="1"
          :max="form.options.length"
          size="small"
          style="width: 100%"
        />
      </ElFormItem>
      <ElFormItem
        :label="$t('ai-platform.workflow.panels.choice.maxSelect')"
        class="flex-1"
      >
        <ElInputNumber
          v-model="form.max_select"
          :min="form.min_select"
          :max="form.options.length"
          size="small"
          style="width: 100%"
        />
      </ElFormItem>
    </div>
  </ElForm>
</template>
