<template>
  <div class="space-y-2">
    <label class="block text-sm font-medium text-white/70 mb-1">Custom Body (JSON)</label>
    <textarea
      :value="modelValue"
      @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
      rows="6"
      placeholder='{ "text": "Webhook triggered", "event": "{{event}}" }'
      class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/50 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-cyan-500 resize-y"
    ></textarea>
    <p v-if="error" class="text-sm text-red-400">{{ error }}</p>
    <p class="text-xs text-white/50">
      Use {{event}}, {{timestamp}}, {{peer}} as placeholders for dynamic values.
    </p>
  </div>
</template>

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

const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const error = ref('')

watch(() => props.modelValue, (val) => {
  if (!val.trim()) {
    error.value = ''
    return
  }
  try {
    JSON.parse(val)
    error.value = ''
  } catch (e) {
    error.value = 'Invalid JSON format'
  }
}, { immediate: true })
</script>
