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

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

import {
  ElAlert,
  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.formDbCreate.label'),
  database_design: '',
  db_database: '',
  db_schema: '',
  if_exists: 'skip',
  create_schema_if_not_exists: true,
  ...props.data,
});

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

    <ElAlert type="warning" :closable="false" show-icon class="mb-4">
      <template #title>
        <span class="text-sm">{{
          $t('ai-platform.workflow.panels.formDbCreate.cautionWarning')
        }}</span>
      </template>
    </ElAlert>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formDbCreate.dbDesignConfig')"
      required
    >
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.formDbCreate.dbDesignConfig')
          }}</span>
          <span class="text-red-500">*</span>
        </div>
      </template>
      <SmartInput
        v-model="form.database_design"
        :current-node-id="nodeId"
        type="textarea"
        :rows="4"
        :placeholder="
          $t(
            'ai-platform.workflow.panels.formDbCreate.dbDesignConfigPlaceholder',
          ) + ' {{database_design}}'
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.formDbCreate.dbDesignConfigHint') }}
      </div>
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formDbCreate.database')"
    >
      <SmartInput
        v-model="form.db_database"
        :current-node-id="nodeId"
        :placeholder="
          $t('ai-platform.workflow.panels.formDbCreate.databasePlaceholder')
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.formDbCreate.databaseHint') }}
      </div>
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.workflow.panels.formDbCreate.schema')">
      <SmartInput
        v-model="form.db_schema"
        :current-node-id="nodeId"
        :placeholder="
          $t('ai-platform.workflow.panels.formDbCreate.schemaPlaceholder') +
          ' {{schema_name}}'
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.formDbCreate.schemaHint') }}
      </div>
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formDbCreate.ifExists')"
    >
      <ElSelect
        v-model="form.if_exists"
        :placeholder="
          $t('ai-platform.workflow.panels.formDbCreate.ifExistsPlaceholder')
        "
      >
        <ElOption
          :label="
            $t('ai-platform.workflow.panels.formDbCreate.skipRecommended')
          "
          value="skip"
        />
        <ElOption
          :label="$t('ai-platform.workflow.panels.formDbCreate.throwError')"
          value="error"
        />
        <ElOption
          :label="$t('ai-platform.workflow.panels.formDbCreate.replaceDanger')"
          value="replace"
        />
      </ElSelect>
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.formDbCreate.ifExistsHint') }}
      </div>
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formDbCreate.autoCreateSchema')"
    >
      <ElSwitch v-model="form.create_schema_if_not_exists" />
      <div class="text-muted-foreground mt-1 text-xs">
        {{
          $t('ai-platform.workflow.panels.formDbCreate.autoCreateSchemaHint')
        }}
      </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">creation_result</span>
          <span>{{
            $t('ai-platform.workflow.panels.formDbCreate.resultOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">all_tables_ready</span>
          <span>{{
            $t('ai-platform.workflow.panels.formDbCreate.allReadyOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">created_count</span>
          <span>{{
            $t('ai-platform.workflow.panels.formDbCreate.successCountOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">error_count</span>
          <span>{{
            $t('ai-platform.workflow.panels.formDbCreate.errorCountOutput')
          }}</span>
        </div>
      </div>
    </div>

    <!-- 警告提示 -->
    <div
      class="mt-4 rounded border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950"
    >
      <div class="mb-2 font-medium text-orange-700 dark:text-orange-300">
        {{ $t('ai-platform.workflow.panels.formDbCreate.notes') }}
      </div>
      <ul class="text-muted-foreground list-disc space-y-1 pl-4 text-xs">
        <li>{{ $t('ai-platform.workflow.panels.formDbCreate.note1') }}</li>
        <li>{{ $t('ai-platform.workflow.panels.formDbCreate.note2') }}</li>
        <li>{{ $t('ai-platform.workflow.panels.formDbCreate.note3') }}</li>
        <li>{{ $t('ai-platform.workflow.panels.formDbCreate.note4') }}</li>
      </ul>
    </div>
  </ElForm>
</template>
