<script setup>
import { computed } from 'vue'
import Badge from '@/components/ui/Badge.vue'
import { bundleElementLabel } from '@/api/normalize'
import {
  bundleUrgency,
  complianceStatusLabel,
  formatCountdown,
  formatDepartment,
  outstandingElements,
  urgencyLabel,
  urgencyVariant,
} from '@/composables/sepsisFormat'

const props = defineProps({
  bundle: { type: Object, required: true },
  now: { type: Number, required: true },
})

const urgency = computed(() => bundleUrgency(props.bundle, props.now))
const outstanding = computed(() => outstandingElements(props.bundle))
</script>

<template>
  <tr>
    <td class="px-4 py-4">
      <div class="text-sm font-medium text-gray-900 dark:text-white">
        {{ bundle.firstName }} {{ bundle.lastName }}
      </div>
      <div class="text-xs text-gray-500 dark:text-gray-400">{{ bundle.mrn }}</div>
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ formatDepartment(bundle.department) }}
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ bundle.roomBed ?? '—' }}
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ new Date(bundle.recognizedAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) }}
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      {{ new Date(bundle.deadlineAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) }}
    </td>
    <td class="whitespace-nowrap px-4 py-4 text-right">
      <span
        class="font-mono text-sm font-semibold"
        :class="urgency === 'overdue' ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white'"
      >
        {{ formatCountdown(bundle.deadlineAt, now) }}
      </span>
    </td>
    <td class="whitespace-nowrap px-4 py-4">
      <Badge :variant="urgencyVariant(urgency)">{{ urgencyLabel(urgency) }}</Badge>
    </td>
    <td class="px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
      <span class="text-gray-500 dark:text-gray-400">{{ complianceStatusLabel(bundle.complianceStatus) }}</span>
      <ul v-if="outstanding.length" class="mt-2 space-y-1">
        <li v-for="element in outstanding" :key="element.id" class="text-xs text-amber-700 dark:text-amber-300">
          {{ bundleElementLabel(element.elementType) }}
        </li>
      </ul>
      <span v-else class="mt-1 block text-xs text-green-700 dark:text-green-300">All elements complete</span>
    </td>
  </tr>
</template>
