<script setup lang="ts">
/**
 * 确认模式选择组件
 * 支持三种模式：始终确认、从不确认、变量控制
 */
import { computed, ref, watch } from 'vue';

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

import { ElRadioButton, ElRadioGroup } from 'element-plus';

import SmartInput from './SmartInput.vue';

interface Props {
  modelValue: boolean | string;
  currentNodeId: string;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  'update:modelValue': [value: boolean | string];
}>();

// 确认模式
type ConfirmMode = 'always' | 'never' | 'variable';

// 当前模式
const mode = ref<ConfirmMode>('always');

// 变量值（当模式为 variable 时使用）
const variableValue = ref('');

// 解析 modelValue 到 mode 和 variableValue
const parseModelValue = (value: boolean | string) => {
  if (typeof value === 'boolean') {
    mode.value = value ? 'always' : 'never';
    variableValue.value = '';
  } else if (typeof value === 'string') {
    if (value === 'always' || value === 'true') {
      mode.value = 'always';
      variableValue.value = '';
    } else if (value === 'never' || value === 'false') {
      mode.value = 'never';
      variableValue.value = '';
    } else if (value.includes('{{')) {
      mode.value = 'variable';
      variableValue.value = value;
    } else {
      // 默认当作变量引用
      mode.value = 'variable';
      variableValue.value = value;
    }
  }
};

// 初始化
parseModelValue(props.modelValue);

// 监听外部值变化
watch(
  () => props.modelValue,
  (newValue) => {
    parseModelValue(newValue);
  },
);

// 计算输出值
const outputValue = computed(() => {
  switch (mode.value) {
    case 'always': {
      return true;
    }
    case 'never': {
      return false;
    }
    case 'variable': {
      return variableValue.value || true;
    }
    default: {
      return true;
    }
  }
});

// 监听内部值变化，更新 modelValue
watch(
  [mode, variableValue],
  () => {
    emit('update:modelValue', outputValue.value);
  },
  { deep: true },
);
</script>

<template>
  <div class="confirm-mode-select space-y-2">
    <ElRadioGroup v-model="mode" size="small">
      <ElRadioButton value="always">
        {{ $t('ai-platform.workflow.editor.confirmMode.always') }}
      </ElRadioButton>
      <ElRadioButton value="never">
        {{ $t('ai-platform.workflow.editor.confirmMode.never') }}
      </ElRadioButton>
      <ElRadioButton value="variable">
        {{ $t('ai-platform.workflow.editor.confirmMode.variable') }}
      </ElRadioButton>
    </ElRadioGroup>

    <!-- 变量输入（仅在变量模式下显示） -->
    <div v-if="mode === 'variable'" class="mt-2">
      <SmartInput
        v-model="variableValue"
        :current-node-id="currentNodeId"
        :placeholder="$t('ai-platform.workflow.editor.confirmMode.placeholder')"
      />
      <div class="text-muted-foreground mt-1 text-xs">
        {{ $t('ai-platform.workflow.editor.confirmMode.hint') }}
      </div>
    </div>
  </div>
</template>
