<script setup lang="ts">
import type { HistoryEntry } from '~/types'

const props = defineProps<{ entry: HistoryEntry }>()
const emit = defineEmits<{ delete: [id: number]; update: [id: number, body: string] }>()

const labelMap: Record<string, string> = {
  phone_call: 'Telefonat',
  consultation: 'Beratungsgespräch',
  recommendation: 'Empfehlung',
  instruction: 'Anweisung',
  remark: 'Bemerkung',
  other: 'Sonstiges',
}

const editing = ref(false)
const editBody = ref(props.entry.body)

const saveEdit = () => {
  emit('update', props.entry.id, editBody.value)
  editing.value = false
}

const formatDate = (iso: string) =>
  new Date(iso).toLocaleString('de-DE', { dateStyle: 'short', timeStyle: 'short' })
</script>

<template>
  <div class="border border-gray-200 bg-white p-4">
    <div class="flex items-start justify-between gap-2 mb-2">
      <div class="flex items-center gap-2">
        <span class="text-xs font-medium bg-gray-100 text-gray-600 px-2 py-0.5">
          {{ labelMap[entry.type] ?? entry.type }}
        </span>
        <span class="text-xs text-gray-400">{{ formatDate(entry.created_at) }}</span>
        <span class="text-xs text-gray-400">{{ entry.author_name }}</span>
        <span v-if="entry.updated_by_name" class="text-xs text-gray-400 italic">
          (bearb. {{ entry.updated_by_name }})
        </span>
      </div>
      <div class="flex gap-2 shrink-0">
        <button @click="editing = !editing" class="text-xs text-blue-600 hover:underline">
          {{ editing ? 'Abbrechen' : 'Bearbeiten' }}
        </button>
        <button @click="emit('delete', entry.id)" class="text-xs text-red-500 hover:underline">
          Löschen
        </button>
      </div>
    </div>
    <div v-if="!editing" class="text-sm text-gray-800 whitespace-pre-wrap">{{ entry.body }}</div>
    <div v-else>
      <textarea
        v-model="editBody"
        rows="4"
        class="w-full border border-gray-300 px-3 py-2 text-sm resize-y"
      />
      <button @click="saveEdit" class="mt-2 bg-blue-600 text-white px-3 py-1 text-sm hover:bg-blue-700">
        Speichern
      </button>
    </div>
  </div>
</template>
