<script setup>
import { useRouter } from 'vue-router'
import PatientRow from './PatientRow.vue'
import PatientCard from './PatientCard.vue'

defineProps({ patients: { type: Array, required: true } })
const router = useRouter()

function goToPatient(encounterId) {
  router.push({ name: 'PatientDetail', params: { encounterId } })
}
</script>

<template>
  <!-- Mobile: card list -->
  <div class="space-y-4 md:hidden">
    <PatientCard
      v-for="patient in patients"
      :key="patient.encounterId"
      :patient="patient"
      @click="goToPatient(patient.encounterId)"
    />
  </div>

  <!-- Desktop: scrollable table -->
  <div class="hidden overflow-x-auto rounded-lg border border-gray-200 md:block dark:border-gray-700">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="sticky top-0 bg-gray-50 dark:bg-gray-800">
        <tr>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Room</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Patient</th>
          <th class="px-4 py-4 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">NEWS2</th>
          <th class="px-4 py-4 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">qSOFA</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Sepsis</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Alerts</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
        <PatientRow
          v-for="patient in patients"
          :key="patient.encounterId"
          :patient="patient"
          class="cursor-pointer transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-800"
          @click="goToPatient(patient.encounterId)"
        />
      </tbody>
    </table>
  </div>
</template>
