<script>
  import Modal from '$lib/components/Modal.svelte';
  import { Beaker, Hash, Calendar, User, FileText, FlaskConical, ClipboardList, Info } from 'lucide-svelte';

  /** @type {{ 
   *   open: boolean,
   *   specimen: Object | null,
   *   loading: boolean,
   *   onClose: () => void
   * }} */
  let { 
    open = $bindable(false),
    specimen = null,
    loading = false,
    onClose
  } = $props();

  function formatDate(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }

  function formatShortDate(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'short', 
      day: 'numeric'
    });
  }

  const statusColors = {
    'COLLECTED': 'badge-info',
    'RECEIVED': 'badge-primary',
    'PROCESSING': 'badge-warning',
    'COMPLETED': 'badge-success',
    'REJECTED': 'badge-error'
  };
</script>

<Modal 
  bind:open 
  title="Specimen Details" 
  size="lg"
  onClose={onClose}
>
  {#if loading}
    <div class="flex items-center justify-center py-12">
      <span class="loading loading-spinner loading-lg text-primary"></span>
    </div>
  {:else if specimen}
    <div class="space-y-4">
      <!-- Specimen Header -->
      <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
        <div>
          <div class="flex items-center gap-2 mb-1">
            <Beaker class="w-5 h-5 text-gray-500" />
            <span class="text-lg font-bold">{specimen.SpecimenID}</span>
          </div>
          <p class="text-sm text-gray-600">
            Created: {formatDate(specimen.CreatedDate || specimen.CollectionDate)}
          </p>
        </div>
        <div>
          {#if specimen.Status}
            <span class="badge badge-md {statusColors[specimen.Status] || 'badge-ghost'}">
              {specimen.Status}
            </span>
          {/if}
        </div>
      </div>

      <!-- Specimen Info -->
      <div class="border border-base-300 rounded-lg p-4">
        <h4 class="font-semibold text-sm mb-3 flex items-center gap-2">
          <ClipboardList class="w-4 h-4" />
          Specimen Information
        </h4>
        <div class="grid grid-cols-2 gap-3 text-sm">
          <div>
            <span class="text-gray-500">Specimen ID:</span>
            <span class="ml-1 font-medium">{specimen.SpecimenID || '-'}</span>
          </div>
          <div>
            <span class="text-gray-500">Type:</span>
            <span class="ml-1 font-medium">{specimen.SpecimenType || '-'}</span>
          </div>
          <div>
            <span class="text-gray-500">Status:</span>
            <span class="ml-1 font-medium">{specimen.Status || '-'}</span>
          </div>
          <div>
            <span class="text-gray-500">Order ID:</span>
            <span class="ml-1 font-medium">{specimen.OrderID || '-'}</span>
          </div>
        </div>
      </div>

      <!-- Collection Details -->
      <div class="border border-base-300 rounded-lg p-4">
        <h4 class="font-semibold text-sm mb-3 flex items-center gap-2">
          <Calendar class="w-4 h-4" />
          Collection Details
        </h4>
        <div class="grid grid-cols-2 gap-3 text-sm">
          <div>
            <span class="text-gray-500">Collection Date:</span>
            <span class="ml-1 font-medium">{formatDate(specimen.CollectionDate)}</span>
          </div>
          <div>
            <span class="text-gray-500">Collected By:</span>
            <span class="ml-1 font-medium">{specimen.CollectedBy || '-'}</span>
          </div>
          <div>
            <span class="text-gray-500">Container Type:</span>
            <span class="ml-1 font-medium">{specimen.ContainerType || '-'}</span>
          </div>
          <div>
            <span class="text-gray-500">Volume:</span>
            <span class="ml-1 font-medium">
              {specimen.Volume ? `${specimen.Volume} ${specimen.Units || ''}` : '-'}
            </span>
          </div>
        </div>
      </div>

      <!-- Comment -->
      {#if specimen.Comment}
        <div class="border border-base-300 rounded-lg p-4">
          <h4 class="font-semibold text-sm mb-3 flex items-center gap-2">
            <Info class="w-4 h-4" />
            Comments
          </h4>
          <p class="text-sm">{specimen.Comment}</p>
        </div>
      {/if}

      <!-- Related Order (if available) -->
      {#if specimen.Order}
        <div class="border border-base-300 rounded-lg p-4">
          <h4 class="font-semibold text-sm mb-3 flex items-center gap-2">
            <FileText class="w-4 h-4" />
            Related Order
          </h4>
          <div class="grid grid-cols-2 gap-3 text-sm">
            <div>
              <span class="text-gray-500">Order ID:</span>
              <span class="ml-1 font-medium">{specimen.Order.OrderID || '-'}</span>
            </div>
            <div>
              <span class="text-gray-500">Order Date:</span>
              <span class="ml-1 font-medium">{formatDate(specimen.Order.OrderDate)}</span>
            </div>
            {#if specimen.Order.PatientName}
              <div class="col-span-2">
                <span class="text-gray-500">Patient:</span>
                <span class="ml-1 font-medium">{specimen.Order.PatientName}</span>
              </div>
            {/if}
          </div>
        </div>
      {/if}
    </div>
  {:else}
    <div class="text-center py-8 text-gray-500">
      <Beaker class="w-12 h-12 mx-auto mb-3 opacity-50" />
      <p>No specimen data available</p>
    </div>
  {/if}

  {#snippet footer()}
    <button 
      class="btn btn-ghost btn-sm" 
      onclick={onClose}
    >
      Close
    </button>
  {/snippet}
</Modal>
