<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.appCreate.label'),
  name: '',
  code: '',
  description: '',
  icon: '',
  app_type: 'mixed',
  update_if_exists: false,
  ...props.data,
});

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

<template>
  <ElForm label-position="top">
    <ElFormItem :label="$t('ai-platform.workflow.panels.common.nodeName')">
      <ElInput
        v-model="form.label"
        :placeholder="$t('ai-platform.workflow.panels.appCreate.placeholder')"
      />
    </ElFormItem>

    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.appCreate.appNameOutput')
          }}</span>
          <span class="text-red-500">*</span>
        </div>
      </template>
      <SmartInput
        v-model="form.name"
        :current-node-id="nodeId"
        :placeholder="
          $t('ai-platform.workflow.panels.appCreate.appNamePlaceholder')
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.appCreate.appNameHint')
        }}<code v-pre>{{llm-1.app_name}}</code>
      </div>
    </ElFormItem>

    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.appCreate.appCodeOutput')
          }}</span>
          <span class="text-red-500">*</span>
        </div>
      </template>
      <SmartInput
        v-model="form.code"
        :current-node-id="nodeId"
        :placeholder="
          $t('ai-platform.workflow.panels.appCreate.appCodePlaceholder')
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.appCreate.appCodeHint') }}
      </div>
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.workflow.panels.appCreate.appDesc')">
      <SmartInput
        v-model="form.description"
        :current-node-id="nodeId"
        type="textarea"
        :rows="3"
        :placeholder="
          $t('ai-platform.workflow.panels.appCreate.appDescPlaceholder')
        "
      />
    </ElFormItem>

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

    <ElFormItem :label="$t('ai-platform.workflow.panels.appCreate.appType')">
      <ElSelect
        v-model="form.app_type"
        :placeholder="
          $t('ai-platform.workflow.panels.appCreate.appTypePlaceholder')
        "
        class="w-full"
      >
        <ElOption
          :label="$t('ai-platform.workflow.panels.appCreate.mixedApp')"
          value="mixed"
        />
        <ElOption
          :label="$t('ai-platform.workflow.panels.appCreate.formApp')"
          value="form"
        />
        <ElOption
          :label="$t('ai-platform.workflow.panels.appCreate.workflowApp')"
          value="workflow"
        />
        <ElOption
          :label="$t('ai-platform.workflow.panels.appCreate.dashboardApp')"
          value="dashboard"
        />
        <ElOption
          :label="$t('ai-platform.workflow.panels.appCreate.screenApp')"
          value="screen"
        />
      </ElSelect>
    </ElFormItem>

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

    <!-- 输出变量说明 -->
    <div
      class="mt-4 rounded border border-green-200 bg-green-50 p-3 dark:border-green-800 dark:bg-green-950"
    >
      <div class="mb-2 font-medium text-green-700 dark:text-green-300">
        {{ $t('ai-platform.workflow.panels.common.outputVars') }}
      </div>
      <div class="text-muted-foreground space-y-1 text-xs">
        <div class="flex justify-between">
          <span class="font-mono">app_id</span>
          <span>{{
            $t('ai-platform.workflow.panels.appCreate.createdAppId')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">app_code</span>
          <span>{{
            $t('ai-platform.workflow.panels.appCreate.appCodeOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">app_name</span>
          <span>{{
            $t('ai-platform.workflow.panels.appCreate.appNameOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">success</span>
          <span>{{
            $t('ai-platform.workflow.panels.appCreate.successOutput')
          }}</span>
        </div>
      </div>
    </div>
  </ElForm>
</template>
