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

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

const emit = defineEmits(['select'])

const hasPatients = computed(() => props.department.patientCount > 0)

function onSelect() {
  if (!hasPatients.value) return
  emit('select', props.department.filterValue)
}
</script>

<template>
  <button
    type="button"
    class="w-full text-left transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
    :class="hasPatients ? 'cursor-pointer hover:-translate-y-0.5' : 'cursor-default opacity-80'"
    :disabled="!hasPatients"
    @click="onSelect"
  >
    <Card padding="lg" class="h-full">
      <div class="mb-4 flex items-start justify-between gap-4">
        <div>
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
            {{ department.label }}
          </h2>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {{ department.patientCount }} active patient{{ department.patientCount === 1 ? '' : 's' }}
          </p>
        </div>
        <Badge v-if="department.acuity.high > 0" variant="critical">
          {{ department.acuity.high }} critical
        </Badge>
      </div>

      <div class="space-y-4">
        <div>
          <p class="mb-2 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
            NEWS2 acuity
          </p>
          <AcuityBar :acuity="department.acuity" />
        </div>

        <dl class="grid grid-cols-2 gap-4 text-sm">
          <div>
            <dt class="text-gray-500 dark:text-gray-400">Avg NEWS2</dt>
            <dd class="mt-1 font-semibold text-gray-900 dark:text-white">
              {{ department.averageNews2 ?? '—' }}
            </dd>
          </div>
          <div>
            <dt class="text-gray-500 dark:text-gray-400">Open alerts</dt>
            <dd class="mt-1 font-semibold text-gray-900 dark:text-white">
              {{ department.openAlertCount }}
            </dd>
          </div>
          <div>
            <dt class="text-gray-500 dark:text-gray-400">Sepsis bundles</dt>
            <dd class="mt-1 font-semibold text-gray-900 dark:text-white">
              {{ department.activeBundleCount }}
            </dd>
          </div>
          <div>
            <dt class="text-gray-500 dark:text-gray-400">Alert volume</dt>
            <dd class="mt-1 font-semibold text-gray-900 dark:text-white">
              {{ department.alertVolume }}
            </dd>
          </div>
        </dl>
      </div>

      <p v-if="hasPatients" class="mt-4 text-xs font-medium text-blue-600 dark:text-blue-400">
        View patients in Virtual Ward
      </p>
    </Card>
  </button>
</template>
