<script setup lang="ts">
const emit = defineEmits<{ submit: [payload: { type: string; body: string }] }>()

const type = ref('phone_call')
const body = ref('')
const submitting = ref(false)

const types = [
  { value: 'phone_call', label: 'Telefonat' },
  { value: 'consultation', label: 'Beratungsgespräch' },
  { value: 'recommendation', label: 'Empfehlung' },
  { value: 'instruction', label: 'Anweisung' },
  { value: 'remark', label: 'Bemerkung' },
  { value: 'other', label: 'Sonstiges' },
]

const submit = async () => {
  if (!body.value.trim()) return
  submitting.value = true
  emit('submit', { type: type.value, body: body.value })
  body.value = ''
  submitting.value = false
}
</script>

<template>
  <form @submit.prevent="submit" class="border border-gray-200 bg-white p-4 space-y-3">
    <div class="flex gap-3 items-start">
      <div class="shrink-0">
        <label class="block text-xs font-medium text-gray-600 mb-1">Typ</label>
        <select v-model="type" class="border border-gray-300 px-2 py-1.5 text-sm">
          <option v-for="t in types" :key="t.value" :value="t.value">{{ t.label }}</option>
        </select>
      </div>
      <div class="flex-1">
        <label class="block text-xs font-medium text-gray-600 mb-1">Eintrag</label>
        <textarea
          v-model="body"
          rows="3"
          placeholder="Notiz eingeben…"
          class="w-full border border-gray-300 px-3 py-2 text-sm resize-y"
        />
      </div>
    </div>
    <div class="flex justify-end">
      <button type="submit" :disabled="submitting || !body.trim()" class="bg-blue-600 text-white px-4 py-1.5 text-sm hover:bg-blue-700 disabled:opacity-50">
        Eintrag speichern
      </button>
    </div>
  </form>
</template>
