<script>
  import { Printer, AlertCircle } from 'lucide-svelte';
  import { formatDate } from '$lib/utils/patients.js';

  /**
   * @typedef {Object} Order
   * @property {string} [OrderID]
   * @property {string} [OrderNumber]
   * @property {string} [PatientID]
   * @property {string} [VisitID]
   * @property {string} [OrderDate]
   * @property {string} [Status]
   * @property {string} [TestCode]
   * @property {string} [TestName]
   * @property {string} [Priority]
   * @property {string} [OrderedBy]
   * @property {string} [CollectionDate]
   * @property {string} [VerifiedDate]
   * @property {number} [ResultCount]
   * @property {boolean} [HasResults]
   */

  /** @type {{ order: Order, onView: () => void, onPrintBarcode: () => void }} */
  let { order, onView, onPrintBarcode } = $props();

  let isUrgent = $derived(order?.Priority?.toLowerCase() === 'urgent' || order?.Priority?.toLowerCase() === 'stat');
</script>

<div class="flex items-center justify-between py-1.5 px-2 text-sm border-b border-base-200 hover:bg-base-200 cursor-pointer"
     class:border-error={isUrgent}
     onclick={onView}>
  <div class="flex items-center gap-3 min-w-0 flex-1">
    {#if isUrgent}
      <AlertCircle class="w-3 h-3 text-error flex-shrink-0" />
    {/if}
    <span class="font-medium truncate w-24">{order.OrderNumber || order.OrderID || '-'}</span>
    <span class="text-gray-600 text-xs w-24">{formatDate(order.OrderDate)}</span>
    <span class="text-gray-600 text-xs truncate flex-1">{order.OrderedBy || '-'}</span>
  </div>
  <div class="flex gap-1">
    <button
      class="btn btn-xs btn-ghost"
      title="Print Barcode"
      onclick={(e) => { e.stopPropagation(); onPrintBarcode(); }}
    >
      <Printer class="w-3 h-3" />
    </button>
  </div>
</div>
