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

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'
})

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

const simulated = computed(() => isSimulatedPatient(props.patient))

const cardLabel = computed(() =>
  `Patient ${props.patient.firstName} ${props.patient.lastName}, room ${patientRoom(props.patient)}${simulated.value ? ', simulated' : ''}`,
)

const emit = defineEmits(['activate'])

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

<template>
  <article
    role="button"
    tabindex="0"
    :aria-label="cardLabel"
    class="cursor-pointer rounded-md border border-border bg-surface-raised p-3 transition duration-200 hover:border-brand/40 active:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
    @click="emit('activate')"
    @keydown="onKeydown"
  >
    <div class="flex items-start justify-between gap-3">
      <div class="min-w-0 flex-1">
        <div class="flex items-center gap-2">
          <span class="text-xs font-medium text-ink-muted">
            Room {{ patientRoom(patient) }}
          </span>
          <Badge v-if="patient.sepsisActive" variant="critical" size="xs">Sepsis</Badge>
          <span
            v-if="simulated"
            class="inline-flex items-center rounded-sm px-1.5 py-0.5 text-[10px] font-bold uppercase bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200"
            title="Simulated patient"
          >
            SIM
          </span>
        </div>
        <h3 class="mt-2 truncate text-base font-semibold text-ink">
          {{ patient.firstName }} {{ patient.lastName }}
        </h3>
        <p class="text-xs text-ink-muted">{{ patient.mrn }}</p>
        <p v-if="patient.attendingPhysician" class="mt-1 text-xs text-ink-muted">
          {{ patient.attendingPhysician }}
        </p>
      </div>
      <Badge :variant="riskVariant">NEWS2 {{ patient.news2Score ?? '—' }}</Badge>
    </div>

    <dl class="mt-3 grid grid-cols-2 gap-3 border-t border-border pt-3">
      <div>
        <dt class="text-xs text-ink-muted">SOFA</dt>
        <dd class="mt-1.5 text-sm font-medium text-ink">
          {{ patient.sofaScore ?? '—' }}
          <span v-if="patient.sofaDelta != null && patient.sofaDelta > 0" class="text-xs text-severity-warning">
            Δ+{{ patient.sofaDelta }}
          </span>
        </dd>
      </div>
      <div>
        <dt class="text-xs text-ink-muted">GCS</dt>
        <dd class="mt-1.5 text-sm font-medium text-ink">
          {{ patient.gcsScore ?? '—' }}
          <span v-if="patient.gcsClassification" class="text-xs text-ink-muted">
            {{ formatGcsClassification(patient.gcsClassification) }}
          </span>
        </dd>
      </div>
      <div>
        <dt class="text-xs text-ink-muted">qSOFA</dt>
        <dd class="mt-1.5 text-sm font-medium text-ink">
          {{ patient.qsofaScore ?? '—' }}
        </dd>
      </div>
      <div>
        <dt class="text-xs text-ink-muted">LOS</dt>
        <dd class="mt-1.5 text-sm font-medium text-ink">
          {{ formatLengthOfStay(patient.admittedAt) }}
        </dd>
      </div>
      <div>
        <dt class="text-xs text-ink-muted">Last vitals</dt>
        <dd class="mt-1.5 text-sm font-medium" :class="stalenessClass(vitalsStaleness)">
          {{ formatLastObservation(patient.lastObservationAt) }}
        </dd>
      </div>
      <div>
        <dt class="text-xs text-ink-muted">Open alerts</dt>
        <dd class="mt-1.5">
          <Badge v-if="patient.openAlertCount > 0" :variant="patient.openAlertCount > 2 ? 'critical' : 'warning'">
            {{ patient.openAlertCount }}
          </Badge>
          <span v-else class="text-sm text-ink-muted">0</span>
        </dd>
      </div>
    </dl>
  </article>
</template>
