<script setup>
import { computed } from 'vue'
import Badge from '@/components/ui/Badge.vue'
import {
  formatGcsClassification,
  formatLastObservation,
  formatLengthOfStay,
  observationStaleness,
  patientRoom,
  stalenessClass,
} from '@/composables/wardFormat'
import { formatDepartment } from '@/composables/sepsisFormat'

const props = defineProps({
  patient: { type: Object, required: true },
  tabindex: { type: [Number, String], default: 0 },
})

const emit = defineEmits(['activate'])

const riskVariant = computed(() => {
  const score = props.patient.news2Score ?? 0
  if (score >= 7) return 'critical'
  if (score >= 5) return 'warning'
  return 'success'
})

const sofaVariant = computed(() => {
  const delta = props.patient.sofaDelta
  if (delta != null && delta >= 2) return 'critical'
  if (delta != null && delta === 1) return 'warning'
  return 'info'
})

const gcsVariant = computed(() => {
  const score = props.patient.gcsScore
  if (score == null) return 'info'
  if (score <= 8) return 'critical'
  if (score <= 12) return 'warning'
  return 'success'
})

const vitalsStaleness = computed(() =>
  observationStaleness(props.patient.lastObservationAt, props.patient.status),
)

const rowLabel = computed(() =>
  `Patient ${props.patient.firstName} ${props.patient.lastName}, room ${patientRoom(props.patient)}`,
)

function onKeydown(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault()
    emit('activate')
  }
}
</script>

<template>
  <tr
    data-patient-row
    :tabindex="tabindex"
    :aria-label="rowLabel"
    @keydown="onKeydown"
    @click="emit('activate')"
  >
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ patientRoom(patient) }}
    </td>
    <td class="px-4 py-4">
      <div class="text-sm font-medium text-gray-900 dark:text-white">
        {{ patient.firstName }} {{ patient.lastName }}
      </div>
      <div class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</div>
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ formatDepartment(patient.department) }}
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-right">
      <Badge :variant="riskVariant">{{ patient.news2Score ?? '—' }}</Badge>
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-right text-sm">
      <div class="flex flex-col items-end gap-1">
        <span class="font-medium text-gray-900 dark:text-white">{{ patient.sofaScore ?? '—' }}</span>
        <Badge v-if="patient.sofaDelta != null && patient.sofaDelta > 0" :variant="sofaVariant" size="xs">
          Δ+{{ patient.sofaDelta }}
        </Badge>
      </div>
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-right text-sm">
      <div class="flex flex-col items-end gap-1">
        <Badge :variant="gcsVariant">{{ patient.gcsScore ?? '—' }}</Badge>
        <span v-if="patient.gcsClassification" class="text-xs text-gray-500 dark:text-gray-400">
          {{ formatGcsClassification(patient.gcsClassification) }}
        </span>
      </div>
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-right text-sm text-gray-700 dark:text-gray-300">
      {{ patient.qsofaScore ?? '—' }}
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ patient.attendingPhysician ?? '—' }}
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ formatLengthOfStay(patient.admittedAt) }}
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-sm" :class="stalenessClass(vitalsStaleness)">
      {{ formatLastObservation(patient.lastObservationAt) }}
    </td>
    <td class="whitespace-nowrap px-4 py-4">
      <Badge v-if="patient.sepsisActive" variant="critical">Active</Badge>
      <span v-else class="text-sm text-gray-400">No</span>
    </td>
    <td class="whitespace-nowrap px-4 py-4">
      <Badge v-if="patient.openAlertCount > 0" :variant="patient.openAlertCount > 2 ? 'critical' : 'warning'">
        {{ patient.openAlertCount }}
      </Badge>
      <span v-else class="text-sm text-gray-400">0</span>
    </td>
  </tr>
</template>
