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

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

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

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

const form = ref({
  variables: props.data.variables || [],
});

watch(
  form,
  (val) => {
    emit('update', { ...props.data, ...val });
  },
  { deep: true },
);

const handleAdd = () => {
  form.value.variables.push({
    variable: '',
    type: 'string',
    required: true,
    default_value: '',
  });
};

const handleDelete = (index: number) => {
  form.value.variables.splice(index, 1);
};
</script>

<template>
  <ElForm label-position="top" size="small" class="space-y-4">
    <!-- 默认的 user_input 变量（不可删除） -->
    <div class="border-primary/30 bg-primary/5 rounded border p-3">
      <div class="mb-2 flex items-center justify-between">
        <span class="text-primary text-sm font-medium">user_input</span>
        <span class="text-muted-foreground text-xs">{{
          $t('ai-platform.workflow.panels.common.sysVar')
        }}</span>
      </div>
      <div class="text-muted-foreground text-xs">
        {{ $t('ai-platform.workflow.panels.start.userInputDesc') }}
      </div>
    </div>

    <!-- 默认的 application_id 变量（不可删除） -->
    <div class="border-primary/30 bg-primary/5 rounded border p-3">
      <div class="mb-2 flex items-center justify-between">
        <span class="text-primary text-sm font-medium">application_id</span>
        <span class="text-muted-foreground text-xs">{{
          $t('ai-platform.workflow.panels.common.sysVar')
        }}</span>
      </div>
      <div class="text-muted-foreground text-xs">
        {{ $t('ai-platform.workflow.panels.start.appIdDesc') }}
      </div>
    </div>

    <!-- 默认的 application_code 变量（不可删除） -->
    <div class="border-primary/30 bg-primary/5 rounded border p-3">
      <div class="mb-2 flex items-center justify-between">
        <span class="text-primary text-sm font-medium">application_code</span>
        <span class="text-muted-foreground text-xs">{{
          $t('ai-platform.workflow.panels.common.sysVar')
        }}</span>
      </div>
      <div class="text-muted-foreground text-xs">
        {{ $t('ai-platform.workflow.panels.start.appCodeDesc') }}
      </div>
    </div>

    <!-- 默认的 form_code 变量（不可删除） -->
    <div class="border-primary/30 bg-primary/5 rounded border p-3">
      <div class="mb-2 flex items-center justify-between">
        <span class="text-primary text-sm font-medium">form_code</span>
        <span class="text-muted-foreground text-xs">{{
          $t('ai-platform.workflow.panels.common.sysVar')
        }}</span>
      </div>
      <div class="text-muted-foreground text-xs">
        {{ $t('ai-platform.workflow.panels.start.formCodeDesc') }}
      </div>
    </div>

    <div class="flex items-center justify-between">
      <span class="text-foreground text-sm font-medium">{{
        $t('ai-platform.workflow.panels.common.customVars')
      }}</span>
      <ElButton link type="primary" :icon="Plus" @click="handleAdd">
        {{ $t('ai-platform.workflow.panels.common.add') }}
      </ElButton>
    </div>

    <div
      v-if="form.variables.length === 0"
      class="text-muted-foreground py-4 text-center text-xs"
    >
      {{ $t('ai-platform.workflow.panels.common.noCustomVarsClickAdd') }}
    </div>

    <div v-else class="space-y-3">
      <div
        v-for="(item, index) in form.variables"
        :key="index"
        class="border-border bg-muted rounded border p-3"
      >
        <div class="flex items-center gap-2">
          <ElInput
            v-model="item.variable"
            :placeholder="$t('ai-platform.workflow.panels.common.variableName')"
            size="small"
            style="width: 100px"
          />
          <ElSelect
            v-model="item.type"
            :placeholder="$t('ai-platform.workflow.panels.end.type')"
            size="small"
            style="width: 90px"
          >
            <ElOption label="String" value="string" />
            <ElOption label="Number" value="number" />
            <ElOption label="Boolean" value="boolean" />
            <ElOption label="Array" value="array" />
            <ElOption label="Object" value="object" />
          </ElSelect>
          <ElInput
            v-model="item.default_value"
            :placeholder="$t('ai-platform.workflow.panels.common.defaultValue')"
            size="small"
            class="flex-1"
          />
          <ElButton
            link
            type="danger"
            :icon="Trash2"
            @click="() => handleDelete(index)"
          />
        </div>
      </div>
    </div>
  </ElForm>
</template>
