<script setup>
import { computed } from 'vue'
import Badge from '@/components/ui/Badge.vue'

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

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

<template>
  <tr>
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ patient.room ?? '—' }}
    </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-right">
      <Badge :variant="riskVariant">{{ patient.news2Score ?? '—' }}</Badge>
    </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">
      <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>