<script setup>
import { computed } from 'vue'
import {
  formatAllergiesDisplay,
  formatBloodType,
  formatDepartment,
  formatDobWithAge,
  formatGender,
  hasKnownAllergies,
} from '@/composables/patientFormat'

const props = defineProps({
  encounter: { type: Object, required: true },
})

const patient = computed(() => props.encounter.patient ?? {})

const fullName = computed(() =>
  [patient.value.firstName, patient.value.lastName].filter(Boolean).join(' ') || 'Unknown patient',
)

const allergyText = computed(() => formatAllergiesDisplay(patient.value.allergies))
const allergiesKnown = computed(() => hasKnownAllergies(patient.value.allergies))

const emergencyContact = computed(() => {
  const name = patient.value.emergencyContactName
  const phone = patient.value.emergencyContactPhone
  if (name && phone) return `${name} · ${phone}`
  return name || phone || null
})
</script>

<template>
  <header class="w-full min-w-0 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
    <div
      class="px-4 py-2 text-sm font-medium"
      :class="allergiesKnown
        ? 'bg-red-600 text-white'
        : 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'"
      role="status"
      :aria-label="allergiesKnown ? `Known allergies: ${allergyText}` : 'No known drug allergies'"
    >
      <span class="font-semibold">Allergies:</span>
      {{ allergyText }}
    </div>

    <div class="space-y-3 bg-white p-4 dark:bg-gray-900">
      <div class="flex flex-wrap items-baseline gap-x-4 gap-y-1">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">
          {{ fullName }}
        </h1>
        <span class="text-sm text-gray-600 dark:text-gray-400">
          MRN {{ patient.mrn ?? '—' }}
        </span>
      </div>

      <dl class="grid gap-3 text-sm sm:grid-cols-2 lg:grid-cols-3">
        <div>
          <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">DOB / Age</dt>
          <dd class="mt-0.5 text-gray-900 dark:text-gray-100">
            {{ formatDobWithAge(patient.dateOfBirth) }}
          </dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Gender</dt>
          <dd class="mt-0.5 text-gray-900 dark:text-gray-100">
            {{ formatGender(patient.gender) }}
          </dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Blood type</dt>
          <dd class="mt-0.5 text-gray-900 dark:text-gray-100">
            {{ formatBloodType(patient.bloodType) }}
          </dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Room / Bed</dt>
          <dd class="mt-0.5 text-gray-900 dark:text-gray-100">
            {{ encounter.roomBed ?? '—' }}
          </dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Department</dt>
          <dd class="mt-0.5 text-gray-900 dark:text-gray-100">
            {{ formatDepartment(encounter.department) }}
          </dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Attending</dt>
          <dd class="mt-0.5 text-gray-900 dark:text-gray-100">
            {{ encounter.attendingPhysician ?? '—' }}
          </dd>
        </div>
        <div class="sm:col-span-2 lg:col-span-3">
          <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Admission reason</dt>
          <dd class="mt-0.5 text-gray-900 dark:text-gray-100">
            {{ encounter.admissionReason ?? '—' }}
          </dd>
        </div>
        <div v-if="emergencyContact" class="sm:col-span-2 lg:col-span-3">
          <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Emergency contact</dt>
          <dd class="mt-0.5 text-gray-900 dark:text-gray-100">
            {{ emergencyContact }}
          </dd>
        </div>
      </dl>
    </div>
  </header>
</template>
