<script setup>
import { computed } from 'vue'
import Badge from '@/components/ui/Badge.vue'
import { bundleElementLabel } from '@/api/normalize'
import {
  bundleUrgency,
  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>
  <article
    class="cursor-pointer rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition duration-200 hover:border-gray-300 hover:shadow-md active:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:active:bg-gray-800"
  >
    <div class="flex items-start justify-between gap-4">
      <div class="min-w-0 flex-1">
        <h3 class="truncate text-base font-semibold text-gray-900 dark:text-white">
          {{ bundle.firstName }} {{ bundle.lastName }}
        </h3>
        <p class="text-xs text-gray-500 dark:text-gray-400">{{ bundle.mrn }}</p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
          {{ formatDepartment(bundle.department) }}
          <span v-if="bundle.roomBed"> · {{ bundle.roomBed }}</span>
        </p>
      </div>
      <Badge :variant="urgencyVariant(urgency)">{{ urgencyLabel(urgency) }}</Badge>
    </div>

    <dl class="mt-4 grid grid-cols-2 gap-4 border-t border-gray-100 pt-4 dark:border-gray-800">
      <div>
        <dt class="text-xs text-gray-500 dark:text-gray-400">Time remaining</dt>
        <dd
          class="mt-2 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) }}
        </dd>
      </div>
      <div>
        <dt class="text-xs text-gray-500 dark:text-gray-400">Outstanding</dt>
        <dd class="mt-2 text-sm text-gray-900 dark:text-white">
          <span v-if="outstanding.length === 0">None</span>
          <ul v-else class="space-y-1">
            <li v-for="element in outstanding" :key="element.id" class="text-xs">
              {{ bundleElementLabel(element.elementType) }}
            </li>
          </ul>
        </dd>
      </div>
    </dl>
  </article>
</template>
