<script>
  import { ChevronLeft, ChevronRight, Users, Edit2 } from 'lucide-svelte';
  import DataTable from '$lib/components/DataTable.svelte';
  import { formatPatientName, formatSex, formatBirthdate } from '$lib/utils/patients.js';

  /**
   * @typedef {Object} Patient
   * @property {string} InternalPID
   * @property {string} PatientID
   * @property {string} [FullName]
   * @property {string} [Prefix]
   * @property {string} [NameFirst]
   * @property {string} [NameMiddle]
   * @property {string} [NameLast]
   * @property {string} [SexLabel]
   * @property {string} [Sex]
   * @property {string} [Birthdate]
   * @property {string} [BirthdateFormatted]
   */

  /** @type {{ 
   *   patients: Patient[], 
   *   loading: boolean,
   *   selectedPatient: Patient | null,
   *   currentPage: number,
   *   totalPages: number,
   *   totalItems: number,
   *   perPage: number,
   *   onPageChange: (page: number) => void,
   *   onSelectPatient: (patient: Patient) => void,
   *   onEditPatient?: (patient: Patient) => void
   * }} */
  let { 
    patients = [], 
    loading = false,
    selectedPatient = null,
    currentPage = 1,
    totalPages = 1,
    totalItems = 0,
    perPage = 20,
    onPageChange,
    onSelectPatient,
    onEditPatient
  } = $props();

  const columns = [
    { key: 'PatientID', label: 'ID', class: 'font-medium w-24' },
    { key: 'FullName', label: 'Name', class: 'min-w-32' },
    { key: 'SexLabel', label: 'Sex', class: 'w-12' },
    { key: 'BirthdateFormatted', label: 'DOB', class: 'w-28' },
    { key: 'actions', label: '', class: 'w-12 text-center' },
  ];

  let displayPatients = $derived(
    patients.map((p) => ({
      ...p,
      FullName: formatPatientName(p),
      SexLabel: formatSex(p),
      BirthdateFormatted: formatBirthdate(p),
    }))
  );

</script>

<div class="bg-base-100 rounded-lg shadow border border-base-200 flex flex-col h-full overflow-hidden">
  {#if !loading && patients.length === 0}
    <!-- Empty State -->
    <div class="flex-1 flex items-center justify-center bg-base-100">
      <div class="text-center text-gray-500 p-6">
        <Users class="w-12 h-12 mx-auto mb-2 opacity-50" />
        <p class="text-sm">Enter search criteria above</p>
        <p class="text-xs text-gray-400">to find patients</p>
      </div>
    </div>
  {:else}
    <!-- Patient Table -->
    <div class="flex-1 overflow-auto">
      <DataTable
        {columns}
        data={displayPatients}
        {loading}
        emptyMessage="No patients found"
        hover={true}
        onRowClick={onSelectPatient}
      >
        {#snippet cell({ column, row })}
          {#if column.key === 'actions'}
            <button
              class="btn btn-xs btn-ghost"
              title="Edit patient"
              onclick={(e) => {
                e.stopPropagation();
                onEditPatient?.(row);
              }}
            >
              <Edit2 class="w-4 h-4" />
            </button>
          {:else}
            <span 
              class="truncate block"
              class:font-semibold={selectedPatient?.InternalPID === row.InternalPID}
              class:text-primary={selectedPatient?.InternalPID === row.InternalPID}
            >
              {row[column.key]}
            </span>
          {/if}
        {/snippet}
      </DataTable>
    </div>

    <!-- Pagination -->
    {#if totalPages > 1}
      <div class="flex items-center justify-between px-3 py-2 border-t border-base-200 bg-base-100">
        <div class="text-xs text-gray-600">
          {(currentPage - 1) * perPage + 1} - {Math.min(currentPage * perPage, totalItems)} of {totalItems}
        </div>
        <div class="flex gap-1">
          <button 
            class="btn btn-xs btn-ghost" 
            onclick={() => onPageChange(currentPage - 1)} 
            disabled={currentPage === 1}
          >
            <ChevronLeft class="w-3 h-3" />
          </button>
          <span class="btn btn-xs btn-ghost no-animation text-xs">
            {currentPage} / {totalPages}
          </span>
          <button 
            class="btn btn-xs btn-ghost" 
            onclick={() => onPageChange(currentPage + 1)} 
            disabled={currentPage === totalPages}
          >
            <ChevronRight class="w-3 h-3" />
          </button>
        </div>
      </div>
    {/if}
  {/if}
</div>
