<template>
  <div class="flex flex-col lg:flex-row lg:items-start gap-4 p-4 bg-gray-50 rounded-md">
    <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">
      <div>
        <label class="block text-xs text-gray-500">Code</label>
        <select
          :value="observation.observationCode"
          @change="update('observationCode', ($event.target as HTMLSelectElement).value)"
          class="form-input text-sm"
          :disabled="readonly"
        >
          <option value="">Select...</option>
          <option value="HEART_RATE">Heart Rate</option>
          <option value="TEMP_C">Temperature (C)</option>
          <option value="BP_SYSTOLIC">BP Systolic</option>
          <option value="BP_DIASTOLIC">BP Diastolic</option>
          <option value="RESP_RATE">Respiratory Rate</option>
          <option value="SPO2">SpO2</option>
          <option value="POTASSIUM_MEQ_L">Potassium</option>
          <option value="GLUCOSE_MG_DL">Glucose</option>
          <option value="WBC_K_UL">WBC</option>
          <option value="LACTATE_MMOL_L">Lactate</option>
        </select>
      </div>
      <div>
        <label class="flex items-center gap-2 text-xs text-gray-500">
          Value
          <OcrConfidenceBadge :label="ocrLabel" :level="ocrLevel" />
        </label>
        <input
          :value="observation.value"
          @change="update('value', parseFloat(($event.target as HTMLInputElement).value))"
          type="number"
          step="0.01"
          :class="['form-input', 'text-sm', valueInputClass]"
          :disabled="readonly"
        />
      </div>
      <div>
        <label class="block text-xs text-gray-500">Unit</label>
        <input
          :value="observation.unit"
          @change="update('unit', ($event.target as HTMLInputElement).value)"
          type="text"
          class="form-input text-sm"
          :disabled="readonly"
        />
      </div>
      <div>
        <label class="block text-xs text-gray-500">Recorded At</label>
        <input
          :value="observation.recordedAt?.substring(0, 16)"
          @change="update('recordedAt', ($event.target as HTMLInputElement).value)"
          type="datetime-local"
          class="form-input text-sm"
          :disabled="readonly"
        />
      </div>
      <div>
        <label class="block text-xs text-gray-500">Note</label>
        <input
          :value="observation.note"
          @change="update('note', ($event.target as HTMLInputElement).value)"
          type="text"
          class="form-input text-sm"
          placeholder="Optional"
          :disabled="readonly"
        />
      </div>
    </div>

    <!-- Verification checkbox (only in verification mode) -->
    <div v-if="showVerified" class="flex items-center lg:mt-8">
      <input
        type="checkbox"
        :checked="verified"
        @change="$emit('verify', observation.id, ($event.target as HTMLInputElement).checked)"
        class="w-4 h-4 text-clinical-safe rounded"
      />
      <span class="ml-2 text-xs text-gray-500">OK</span>
    </div>

    <!-- Delete button (entry mode only) -->
    <button
      v-if="!readonly && !showVerified"
      @click="$emit('delete', observation.id)"
      class="lg:mt-8 text-clinical-danger hover:text-red-800 text-sm"
    >
      Remove
    </button>
  </div>
</template>

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

defineProps<{
  observation: DraftObservation
  readonly?: boolean
  showVerified?: boolean
  verified?: boolean
  valueInputClass?: string
  ocrLabel?: string | null
  ocrLevel?: OcrConfidenceLevel | null
}>()

const emit = defineEmits<{
  (e: 'update', field: string, value: unknown): void
  (e: 'delete', obsId: string): void
  (e: 'verify', obsId: string, passed: boolean): void
}>()

function update(field: string, value: unknown) {
  emit('update', field, value)
}
</script>