<script setup>
import { reactive, computed } from 'vue'
import {
  AVPU_OPTIONS,
  VITAL_FIELD_DEFS,
  emptyVitalsForm,
  validateVitalsForm,
} from '@/composables/vitalsForm'

defineProps({
  submitting: { type: Boolean, default: false },
  error: { type: String, default: '' },
})

const emit = defineEmits(['submit'])

const values = reactive(emptyVitalsForm())
const touched = reactive(emptyVitalsForm())

const validation = computed(() => validateVitalsForm(values))
const fieldErrors = computed(() => validation.value.errors)

const numericFields = computed(() =>
  VITAL_FIELD_DEFS.filter(field => field.type !== 'select'),
)

function onBlur(key) {
  touched[key] = true
}

function showError(key) {
  return Boolean(touched[key] && fieldErrors.value[key])
}

function submit() {
  for (const field of VITAL_FIELD_DEFS) {
    touched[field.key] = true
  }
  if (!validation.value.valid) return
  emit('submit', validation.value.observations)
}
</script>

<template>
  <div class="space-y-4">
    <h3 class="text-sm font-semibold dark:text-white">Record Vital Signs</h3>
    <p class="text-xs text-gray-500 dark:text-gray-400">
      Enter one or more measurements. Values are validated against plausible clinical ranges before submission.
    </p>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <div v-for="field in numericFields" :key="field.key">
        <label class="mb-2 block text-xs text-gray-500 dark:text-gray-400">
          {{ field.label }}
          <span class="text-gray-400">({{ field.unit }})</span>
        </label>
        <input
          v-model="values[field.key]"
          type="number"
          :step="field.step"
          class="w-full rounded border px-4 py-2 text-sm focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
          :class="showError(field.key) ? 'border-red-500' : 'border-gray-300'"
          @blur="onBlur(field.key)"
        >
        <p v-if="showError(field.key)" class="mt-1 text-xs text-red-600 dark:text-red-400">
          {{ fieldErrors[field.key] }}
        </p>
      </div>

      <div>
        <label class="mb-2 block text-xs text-gray-500 dark:text-gray-400">AVPU (score)</label>
        <select
          v-model="values.avpu"
          class="w-full rounded border px-4 py-2 text-sm focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
          :class="showError('avpu') ? 'border-red-500' : 'border-gray-300'"
          @blur="onBlur('avpu')"
        >
          <option value="">Not recorded</option>
          <option v-for="option in AVPU_OPTIONS" :key="option.value" :value="option.value">
            {{ option.label }}
          </option>
        </select>
        <p v-if="showError('avpu')" class="mt-1 text-xs text-red-600 dark:text-red-400">
          {{ fieldErrors.avpu }}
        </p>
      </div>
    </div>

    <p v-if="fieldErrors._form" class="text-sm text-red-600 dark:text-red-400">
      {{ fieldErrors._form }}
    </p>
    <p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>

    <div class="flex justify-end">
      <button
        type="button"
        class="w-full rounded bg-blue-500 px-6 py-2 text-sm font-medium text-white hover:bg-blue-600 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 sm:w-auto"
        :disabled="submitting"
        @click="submit"
      >
        {{ submitting ? 'Saving…' : 'Record Vitals' }}
      </button>
    </div>
  </div>
</template>
