<template>
  <span
    v-if="label"
    class="ocr-confidence-badge"
    :class="badgeClass"
    :title="title"
  >
    {{ label }}
  </span>
</template>

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

const props = defineProps<{
  /** 0–1 confidence; omit or undefined hides the badge */
  confidence?: number | null
  label?: string | null
  level?: OcrConfidenceLevel | null
}>()

const resolvedLevel = computed<OcrConfidenceLevel | null>(() => {
  if (props.level) return props.level
  if (props.confidence === undefined || props.confidence === null) return null
  return confidenceToLevel(props.confidence)
})

const label = computed(() => {
  if (props.label) return props.label
  if (props.confidence === undefined || props.confidence === null) return null
  return formatOcrBadgeLabel(props.confidence)
})

const badgeClass = computed(() => {
  const level = resolvedLevel.value
  if (!level) return ''
  return `ocr-badge-${level}`
})

const title = computed(() => {
  if (!label.value) return undefined
  return 'OCR extraction confidence — assistive only; verify against the scan'
})
</script>
