<template>
  <div
    class="observation-card observation-card--readonly"
    :class="{ 'observation-card--verified': checked }"
    data-testid="verification-field-card"
  >
    <div class="observation-card__rail" aria-hidden="true">
      <span class="observation-card__dot" />
    </div>

    <div class="min-w-0 flex-1">
      <div class="flex items-start justify-between gap-2">
        <div class="min-w-0">
          <div class="flex flex-wrap items-center gap-1.5">
            <p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
              {{ label }}
            </p>
            <OcrConfidenceBadge
              v-if="ocrLabel"
              :label="ocrLabel"
              :level="ocrLevel"
            />
          </div>
          <p
            class="mt-0.5 text-base font-bold leading-snug text-ink-strong break-words"
            :class="valueClass"
          >
            {{ displayValue }}
          </p>
        </div>

        <label
          class="inline-flex shrink-0 items-center gap-1.5 rounded-input border px-2 py-1 text-xs font-semibold cursor-pointer transition-colors"
          :class="checked
            ? 'border-clinical-safe bg-clinical-safe-bg text-clinical-safe'
            : 'border-line bg-surface text-ink-secondary hover:border-primary-300'"
        >
          <input
            type="checkbox"
            class="w-3.5 h-3.5 text-clinical-safe rounded"
            :checked="checked"
            @change="$emit('toggle', ($event.target as HTMLInputElement).checked)"
          />
          OK
        </label>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { OcrConfidenceLevel } from '../composables/useOcrFieldConfidence'
import OcrConfidenceBadge from './OcrConfidenceBadge.vue'

const props = defineProps<{
  label: string
  value: string | null | undefined
  checked: boolean
  valueClass?: string
  ocrLabel?: string | null
  ocrLevel?: OcrConfidenceLevel | null
}>()

defineEmits<{
  (e: 'toggle', checked: boolean): void
}>()

const displayValue = computed(() => {
  const raw = props.value
  if (raw == null || String(raw).trim() === '') return '(empty)'
  return String(raw)
})
</script>
