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

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

import { ElInput, ElPopover } from 'element-plus';

import VariableSelector from './VariableSelector.vue';

const props = defineProps<{
  currentNodeId?: string;
  modelValue: string;
  placeholder?: string;
  rows?: number;
  size?: 'default' | 'large' | 'small';
  type?: 'text' | 'textarea';
}>();

const emit = defineEmits(['update:modelValue', 'change']);

const showSelector = ref(false);
const inputRef = ref();

const handleInput = (val: string) => {
  emit('update:modelValue', val);
};

const handleChange = (val: string) => {
  emit('change', val);
};

// 监听键盘事件，输入 '{' 时触发
const handleKeyup = (e: KeyboardEvent) => {
  if (e.key === '{' && props.currentNodeId) {
    showSelector.value = true;
  }
};

const insertVariable = (variable: string) => {
  const val = props.modelValue || '';
  const el = inputRef.value?.textarea || inputRef.value?.input;

  if (el) {
    const start = el.selectionStart || 0;
    const end = el.selectionEnd || 0;
    const newVal = val.slice(0, start) + variable + val.slice(end);

    emit('update:modelValue', newVal);
    emit('change', newVal);

    nextTick(() => {
      el.focus();
      const newPos = start + variable.length;
      el.setSelectionRange(newPos, newPos);
    });
  } else {
    const newVal = val + variable;
    emit('update:modelValue', newVal);
    emit('change', newVal);
  }
  showSelector.value = false;
};
</script>

<template>
  <div class="group relative w-full min-w-48">
    <ElInput
      ref="inputRef"
      :model-value="modelValue"
      :type="type"
      :rows="rows"
      :placeholder="placeholder"
      :size="size"
      class="smart-input-textarea"
      @input="handleInput"
      @change="handleChange"
      @keyup="handleKeyup"
    />

    <ElPopover
      v-if="currentNodeId"
      v-model:visible="showSelector"
      trigger="click"
      placement="bottom-end"
      :width="260"
      :show-arrow="false"
      popper-class="!p-0"
    >
      <template #reference>
        <div
          class="text-muted-foreground/60 hover:bg-primary/10 hover:text-primary absolute z-10 flex h-5 cursor-pointer items-center rounded px-1 transition-all"
          :class="
            type === 'textarea'
              ? 'right-2 top-1'
              : 'right-1 top-1/2 -translate-y-1/2'
          "
          :title="$t('ai-platform.workflow.editor.smartInput.insertVariable')"
          @click.stop
        >
          <span class="font-mono text-[10px] font-bold leading-none">{ }</span>
        </div>
      </template>

      <VariableSelector
        :current-node-id="currentNodeId"
        @select="insertVariable"
      />
    </ElPopover>
  </div>
</template>

<style scoped>
/* Element Plus 风格的滚动条样式 */
.smart-input-textarea :deep(.el-textarea__inner) {
  scrollbar-width: thin;
  scrollbar-color: var(--el-border-color-darker) transparent;
}

.smart-input-textarea :deep(.el-textarea__inner::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

.smart-input-textarea :deep(.el-textarea__inner::-webkit-scrollbar-thumb) {
  background-color: var(--el-border-color-darker);
  border-radius: 3px;
}

.smart-input-textarea
  :deep(.el-textarea__inner::-webkit-scrollbar-thumb:hover) {
  background-color: var(--el-border-color-dark);
}

.smart-input-textarea :deep(.el-textarea__inner::-webkit-scrollbar-track) {
  background-color: transparent;
}
</style>
