<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 ConfirmModeSelect from '../components/ConfirmModeSelect.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.formListDesign.label'),
  form_ui_design: '',
  database_design: '',
  auto_query_fields: true,
  auto_columns: true,
  container_type: 'drawer',
  page_size: 20,
  show_index: true,
  show_selection: true,
  enable_export: true,
  enable_import: false,
  require_confirmation: 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.formListDesign.placeholder')
        "
      />
    </ElFormItem>

    <ElFormItem>
      <template #label>
        <div class="flex items-center gap-2">
          <span>{{
            $t('ai-platform.workflow.panels.formListDesign.uiDesignConfig')
          }}</span>
          <span class="text-red-500">*</span>
          <span class="text-muted-foreground text-xs">(object)</span>
        </div>
      </template>
      <SmartInput
        v-model="form.form_ui_design"
        :current-node-id="nodeId"
        type="textarea"
        :rows="3"
        :placeholder="
          $t(
            'ai-platform.workflow.panels.formListDesign.uiDesignConfigPlaceholder',
          ) + ' {{form_ui_design.form_ui_design}}'
        "
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{
          $t('ai-platform.workflow.panels.formListDesign.uiDesignConfigHint')
        }}
      </div>
    </ElFormItem>

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

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

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

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formListDesign.containerType')"
    >
      <ElSelect
        v-model="form.container_type"
        :placeholder="
          $t(
            'ai-platform.workflow.panels.formListDesign.containerTypePlaceholder',
          )
        "
      >
        <ElOption
          :label="$t('ai-platform.workflow.panels.formListDesign.drawer')"
          value="drawer"
        />
        <ElOption
          :label="$t('ai-platform.workflow.panels.formListDesign.dialog')"
          value="dialog"
        />
        <ElOption
          :label="$t('ai-platform.workflow.panels.formListDesign.page')"
          value="page"
        />
      </ElSelect>
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.panels.formListDesign.containerTypeHint') }}
      </div>
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formListDesign.pageSize')"
    >
      <ElSelect
        v-model="form.page_size"
        :placeholder="
          $t('ai-platform.workflow.panels.formListDesign.pageSizePlaceholder')
        "
      >
        <ElOption
          :label="
            $t('ai-platform.workflow.panels.formListDesign.perPage', {
              count: 10,
            })
          "
          :value="10"
        />
        <ElOption
          :label="
            $t('ai-platform.workflow.panels.formListDesign.perPage', {
              count: 20,
            })
          "
          :value="20"
        />
        <ElOption
          :label="
            $t('ai-platform.workflow.panels.formListDesign.perPage', {
              count: 50,
            })
          "
          :value="50"
        />
        <ElOption
          :label="
            $t('ai-platform.workflow.panels.formListDesign.perPage', {
              count: 100,
            })
          "
          :value="100"
        />
      </ElSelect>
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formListDesign.showIndex')"
    >
      <ElSwitch v-model="form.show_index" />
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formListDesign.showSelection')"
    >
      <ElSwitch v-model="form.show_selection" />
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formListDesign.enableExport')"
    >
      <ElSwitch v-model="form.enable_export" />
    </ElFormItem>

    <ElFormItem
      :label="$t('ai-platform.workflow.panels.formListDesign.enableImport')"
    >
      <ElSwitch v-model="form.enable_import" />
    </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">list_config</span>
          <span>{{
            $t('ai-platform.workflow.panels.formListDesign.fullConfigOutput')
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">query_field_count</span>
          <span>{{
            $t(
              'ai-platform.workflow.panels.formListDesign.queryFieldCountOutput',
            )
          }}</span>
        </div>
        <div class="flex justify-between">
          <span class="font-mono">column_count</span>
          <span>{{
            $t('ai-platform.workflow.panels.formListDesign.columnCountOutput')
          }}</span>
        </div>
      </div>
    </div>

    <!-- 智能推断说明 -->
    <div
      class="mt-4 rounded border border-indigo-200 bg-indigo-50 p-3 dark:border-indigo-800 dark:bg-indigo-950"
    >
      <div class="mb-2 font-medium text-indigo-700 dark:text-indigo-300">
        {{ $t('ai-platform.workflow.panels.formListDesign.inferRules') }}
      </div>
      <div class="text-muted-foreground space-y-1 text-xs">
        <div>• {{ $t('ai-platform.workflow.panels.formListDesign.inferRule1') }}</div>
        <div>• {{ $t('ai-platform.workflow.panels.formListDesign.inferRule2') }}</div>
        <div>• {{ $t('ai-platform.workflow.panels.formListDesign.inferRule3') }}</div>
        <div>• {{ $t('ai-platform.workflow.panels.formListDesign.inferRule4') }}</div>
        <div>• {{ $t('ai-platform.workflow.panels.formListDesign.inferRule5') }}</div>
      </div>
    </div>
  </ElForm>
</template>
