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

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

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRadioButton,
  ElRadioGroup,
  ElSwitch,
} from 'element-plus';

import ConfirmModeSelect from '../components/ConfirmModeSelect.vue';
import DbConnectionSelect from '../components/DbConnectionSelect.vue';
import DbDatabaseSelect from '../components/DbDatabaseSelect.vue';
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.formDbDesign.label'),
  design_mode: 'main', // 'main' or 'sub'
  // 主表配置
  table_name: '',
  fields: '',
  // 从表配置
  sub_table_name: '',
  sub_fields: '',
  parent_table: '',
  foreign_key: '',
  // 通用配置
  db_config: 'default',
  db_database: '',
  db_schema: '',
  db_type: 'postgresql',
  auto_add_system_fields: true,
  require_confirmation: true,
  ...props.data,
});

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

const resolvedDbTypeLabel = computed(() => form.value.db_type || 'postgresql');

function handleConnectionChange(payload: {
  database?: string;
  dbName: string;
  dbType: string;
}) {
  const connectionChanged = form.value.db_config !== payload.dbName;
  form.value.db_config = payload.dbName;
  form.value.db_type = payload.dbType;
  if (connectionChanged) {
    form.value.db_database = payload.database || '';
  }
}
</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.formDbDesign.placeholder')
        "
      />
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formDbDesign.designMode')"
    >
      <ElRadioGroup v-model="form.design_mode">
        <ElRadioButton value="main">
          {{ $t('ai-platform.workflow.panels.formDbDesign.mainTable') }}
        </ElRadioButton>
        <ElRadioButton value="sub">
          {{ $t('ai-platform.workflow.panels.formDbDesign.subTable') }}
        </ElRadioButton>
      </ElRadioGroup>
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.formDbDesign.designModeHint') }}
      </div>
    </ElFormItem>

    <!-- 主表配置 -->
    <template v-if="form.design_mode === 'main'">
      <ElFormItem>
        <template #label>
          <div class="flex items-center gap-2">
            <span>{{
              $t('ai-platform.workflow.panels.formDbDesign.tableName')
            }}</span>
            <span class="text-red-500">*</span>
            <span class="text-muted-foreground text-xs">(string)</span>
          </div>
        </template>
        <SmartInput
          v-model="form.table_name"
          :current-node-id="nodeId"
          :placeholder="
            $t('ai-platform.workflow.panels.formDbDesign.tableNamePlaceholder') +
            ' {{llm_table_name}}'
          "
        />
        <div class="text-muted-foreground mt-1 text-xs">
          {{ $t('ai-platform.workflow.panels.formDbDesign.tableNameHint') }}
        </div>
      </ElFormItem>

      <ElFormItem>
        <template #label>
          <div class="flex items-center gap-2">
            <span>{{
              $t('ai-platform.workflow.panels.formDbDesign.fieldList')
            }}</span>
            <span class="text-red-500">*</span>
            <span class="text-muted-foreground text-xs">(array)</span>
          </div>
        </template>
        <SmartInput
          v-model="form.fields"
          :current-node-id="nodeId"
          type="textarea"
          :rows="8"
          :placeholder="
            $t('ai-platform.workflow.panels.formDbDesign.fieldListPlaceholder') +
            ' {{llm_fields}}'
          "
        />
        <div class="text-muted-foreground mt-1 text-xs">
          {{ $t('ai-platform.workflow.panels.formDbDesign.fieldListHint') }}
        </div>
      </ElFormItem>
    </template>

    <!-- 从表配置 -->
    <template v-else>
      <ElFormItem>
        <template #label>
          <div class="flex items-center gap-2">
            <span>{{
              $t('ai-platform.workflow.panels.formDbDesign.subTableName')
            }}</span>
            <span class="text-red-500">*</span>
            <span class="text-muted-foreground text-xs">(string)</span>
          </div>
        </template>
        <SmartInput
          v-model="form.sub_table_name"
          :current-node-id="nodeId"
          :placeholder="
            $t('ai-platform.workflow.panels.formDbDesign.subTableNamePlaceholder')
          "
        />
        <div class="text-muted-foreground mt-1 text-xs">
          {{ $t('ai-platform.workflow.panels.formDbDesign.subTableNameHint') }}
        </div>
      </ElFormItem>

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

      <ElFormItem>
        <template #label>
          <div class="flex items-center gap-2">
            <span>{{
              $t('ai-platform.workflow.panels.formDbDesign.foreignKey')
            }}</span>
            <span class="text-muted-foreground text-xs">(string)</span>
          </div>
        </template>
        <SmartInput
          v-model="form.foreign_key"
          :current-node-id="nodeId"
          :placeholder="
            $t('ai-platform.workflow.panels.formDbDesign.foreignKeyPlaceholder')
          "
        />
        <div class="text-muted-foreground mt-1 text-xs">
          {{ $t('ai-platform.workflow.panels.formDbDesign.foreignKeyHint') }}
        </div>
      </ElFormItem>

      <ElFormItem>
        <template #label>
          <div class="flex items-center gap-2">
            <span>{{
              $t('ai-platform.workflow.panels.formDbDesign.fieldList')
            }}</span>
            <span class="text-red-500">*</span>
            <span class="text-muted-foreground text-xs">(array)</span>
          </div>
        </template>
        <SmartInput
          v-model="form.sub_fields"
          :current-node-id="nodeId"
          type="textarea"
          :rows="8"
          :placeholder="
            $t(
              'ai-platform.workflow.panels.formDbDesign.subFieldListPlaceholder',
            )
          "
        />
        <div class="text-muted-foreground mt-1 text-xs">
          {{ $t('ai-platform.workflow.panels.formDbDesign.subFieldListHint') }}
        </div>
      </ElFormItem>
    </template>

    <DbConnectionSelect
      v-model="form.db_config"
      write-mode
      @change="handleConnectionChange"
    />

    <DbDatabaseSelect
      v-model="form.db_database"
      :db-name="form.db_config"
      :db-type="form.db_type"
      :current-node-id="nodeId"
    />

    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.formDbDesign.dbSchema')
          }}</span>
          <span class="text-muted-foreground text-xs">(string)</span>
        </div>
      </template>
      <SmartInput
        v-model="form.db_schema"
        :current-node-id="nodeId"
        :placeholder="
          $t('ai-platform.workflow.panels.formDbDesign.dbSchemaPlaceholder')
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.formDbDesign.dbSchemaHint') }}
      </div>
    </ElFormItem>

    <ElFormItem :label="$t('ai-platform.workflow.panels.formDbDesign.dbType')">
      <ElInput :model-value="resolvedDbTypeLabel" readonly />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.formDbDesign.dbTypeHint') }}
      </div>
    </ElFormItem>

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

    <ElFormItem :label="$t('ai-platform.workflow.panels.common.confirmMode')">
      <ConfirmModeSelect
        v-model="form.require_confirmation"
        :current-node-id="nodeId"
      />
    </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">database_design</span>
          <span>{{
            $t('ai-platform.workflow.panels.formDbDesign.fullDesignOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">table_name</span>
          <span>{{
            $t('ai-platform.workflow.panels.formDbDesign.tableNameOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">field_count</span>
          <span>{{
            $t('ai-platform.workflow.panels.formDbDesign.fieldCountOutput')
          }}</span>
        </div>
      </div>
    </div>

    <!-- 字段配置示例 -->
    <div
      class="mt-4 rounded border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-950"
    >
      <div class="mb-2 font-medium text-blue-700 dark:text-blue-300">
        {{ $t('ai-platform.workflow.panels.formDbDesign.fieldConfigExample') }}
      </div>
      <pre class="text-muted-foreground overflow-x-auto text-[10px]">
[
  {
    "name": "name",
    "type": "varchar",
    "maxLength": 100,
    "comment": "Name",
    "nullable": false
  },
  {
    "name": "age",
    "type": "int",
    "comment": "Age",
    "nullable": true
  }
]</pre
      >
    </div>
  </ElForm>
</template>
