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

const props = defineProps<{ field: ClientCustomField }>()
const emit = defineEmits<{ save: [definitionId: number, value: string | null] }>()

const editing = ref(false)
const saving = ref(false)
const draft = ref<string>(props.field.value ?? '')

// Keep the draft in sync if the field reloads from the server.
watch(() => props.field.value, (v) => {
  if (!editing.value) draft.value = v ?? ''
})

const startEdit = () => {
  draft.value = props.field.value ?? ''
  editing.value = true
}

const cancel = () => {
  draft.value = props.field.value ?? ''
  editing.value = false
}

const save = async () => {
  saving.value = true
  try {
    const next = draft.value === '' ? null : draft.value
    emit('save', props.field.definition_id, next)
    editing.value = false
  } finally {
    saving.value = false
  }
}

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

// Human-readable value for display (dates rendered in German short form).
const displayValue = computed(() => {
  const v = props.field.value
  if (v === null || v === '') return null
  if (props.field.type === 'date') {
    const d = new Date(v)
    return Number.isNaN(d.getTime()) ? v : d.toLocaleDateString('de-DE', { dateStyle: 'medium' })
  }
  return v
})
</script>

<template>
  <div class="border border-gray-200 bg-white p-4">
    <div class="flex items-start justify-between gap-2">
      <h3 class="text-sm font-semibold text-gray-800">{{ field.label }}</h3>
      <button
        v-if="!editing"
        @click="startEdit"
        :title="`${field.label} bearbeiten`"
        class="shrink-0 text-gray-400 hover:text-blue-600"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
          <path d="M2.695 14.762l-1.262 3.155a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.886L17.5 5.501a2.121 2.121 0 00-3-3L3.58 13.419a4 4 0 00-.885 1.343z" />
        </svg>
      </button>
    </div>

    <!-- Value display -->
    <div v-if="!editing" class="mt-1">
      <p v-if="displayValue !== null" class="text-sm text-gray-800 whitespace-pre-wrap">{{ displayValue }}</p>
      <p v-else class="text-sm text-gray-400 italic">Nicht gesetzt</p>
    </div>

    <!-- Inline editor (type-aware) -->
    <div v-else class="mt-2 space-y-2">
      <textarea
        v-if="field.type === 'textarea'"
        v-model="draft"
        rows="4"
        class="w-full border border-gray-300 px-3 py-2 text-sm resize-y"
      />
      <select
        v-else-if="field.type === 'select'"
        v-model="draft"
        class="w-full border border-gray-300 px-3 py-2 text-sm"
      >
        <option value="">— Bitte wählen —</option>
        <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
      </select>
      <input
        v-else
        v-model="draft"
        :type="field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'"
        class="w-full border border-gray-300 px-3 py-2 text-sm"
      />
      <div class="flex gap-2">
        <button
          @click="save"
          :disabled="saving"
          class="bg-blue-600 text-white px-3 py-1 text-sm hover:bg-blue-700 disabled:opacity-50"
        >
          Speichern
        </button>
        <button @click="cancel" class="text-sm text-gray-500 hover:underline px-2">Abbrechen</button>
      </div>
    </div>

    <!-- Metadata: last change date + author -->
    <p v-if="!editing && field.updated_at" class="mt-2 text-xs text-gray-400">
      {{ formatDate(field.updated_at) }}<template v-if="field.author_name"> · {{ field.author_name }}</template>
    </p>
  </div>
</template>
