<template>
  <div>
    <div v-for="(row, idx) in rows" :key="idx" class="flex items-center gap-2 mb-2">
      <input
        v-model="row.key"
        :placeholder="placeholderKey"
        class="w-32 px-2 py-1 border rounded text-sm"
        @input="emitChange"
      />
      <input
        v-model="row.value"
        :placeholder="placeholderValue"
        class="flex-1 px-2 py-1 border rounded text-sm"
        @input="emitChange"
        :ref="el => valueInputs[idx] = el"
      />
      <VariableBrowser
        v-if="allowVariableInsert && variables && variables.length"
        :available-variables="variables"
        :placeholder="'Insert variable...'"
        :allow-create="false"
        @update:modelValue="varName => insertVariable(idx, varName)"
        class="w-32"
      />
      <button @click="removeRow(idx)" class="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200">✕</button>
    </div>
    <button @click="addRow" class="mt-1 px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200">+ Add</button>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import VariableBrowser from './VariableBrowser.vue';
const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  placeholderKey: { type: String, default: 'Key' },
  placeholderValue: { type: String, default: 'Value' },
  allowVariableInsert: { type: Boolean, default: false },
  variables: { type: Array, default: () => [] }
});
const emit = defineEmits(['update:modelValue']);
const rows = ref(props.modelValue.map(r => ({ ...r })));
const valueInputs = ref([]);
watch(() => props.modelValue, v => { rows.value = v.map(r => ({ ...r })); });
function emitChange() { emit('update:modelValue', rows.value.map(r => ({ ...r }))); }
function addRow() { rows.value.push({ key: '', value: '' }); emitChange(); }
function removeRow(idx) { rows.value.splice(idx, 1); emitChange(); }
function insertVariable(idx, varName) {
  if (!varName) return;
  const input = valueInputs.value[idx];
  if (input && input.selectionStart !== undefined) {
    const start = input.selectionStart;
    const end = input.selectionEnd;
    const before = rows.value[idx].value.substring(0, start);
    const after = rows.value[idx].value.substring(end);
    rows.value[idx].value = before + `{${varName}}` + after;
    emitChange();
    // Move cursor after inserted variable
    nextTick(() => {
      input.focus();
      input.selectionStart = input.selectionEnd = start + varName.length + 2;
    });
  } else {
    rows.value[idx].value += `{${varName}}`;
    emitChange();
  }
}
</script> 