<script>
  import { Search, X, Calendar, User } from 'lucide-svelte';

  /** @type {{ 
   *   patientId: string,
   *   patientName: string,
   *   visitDate: string,
   *   status: string,
   *   location: string,
   *   loading: boolean,
   *   onSearch: () => void,
   *   onClear: () => void
   * }} */
  let { 
    patientId = '',
    patientName = '',
    visitDate = '',
    status = '',
    location = '',
    loading = false,
    onSearch,
    onClear
  } = $props();

  function handleKeydown(e) {
    if (e.key === 'Enter') {
      onSearch();
    }
  }

  function hasFilters() {
    return patientId || patientName || visitDate || status || location;
  }

  const statusOptions = [
    { value: '', label: 'All Status' },
    { value: 'active', label: 'Active' },
    { value: 'discharged', label: 'Discharged' },
    { value: 'transferred', label: 'Transferred' },
  ];
</script>

<div class="bg-base-100 rounded-lg shadow-sm border border-base-200 p-3">
  <div class="flex flex-wrap items-end gap-2">
    <!-- Patient ID -->
    <div class="flex-1 min-w-[120px]">
      <label class="label py-0 mb-1" for="searchPatientId">
        <span class="label-text text-xs text-gray-500">Patient ID</span>
      </label>
      <input
        id="searchPatientId"
        type="text"
        class="input input-sm input-bordered w-full"
        placeholder="e.g. P001234"
        bind:value={patientId}
        onkeydown={handleKeydown}
      />
    </div>

    <!-- Patient Name -->
    <div class="flex-[2] min-w-[160px]">
      <label class="label py-0 mb-1" for="searchPatientName">
        <span class="label-text text-xs text-gray-500">Patient Name</span>
      </label>
      <input
        id="searchPatientName"
        type="text"
        class="input input-sm input-bordered w-full"
        placeholder="Search by name..."
        bind:value={patientName}
        onkeydown={handleKeydown}
      />
    </div>

    <!-- Visit Date -->
    <div class="flex-1 min-w-[140px]">
      <label class="label py-0 mb-1" for="searchVisitDate">
        <span class="label-text text-xs text-gray-500">Visit Date</span>
      </label>
      <input
        id="searchVisitDate"
        type="date"
        class="input input-sm input-bordered w-full"
        bind:value={visitDate}
        onkeydown={handleKeydown}
      />
    </div>

    <!-- Status -->
    <div class="flex-1 min-w-[120px]">
      <label class="label py-0 mb-1" for="searchStatus">
        <span class="label-text text-xs text-gray-500">Status</span>
      </label>
      <select
        id="searchStatus"
        class="select select-sm select-bordered w-full"
        bind:value={status}
      >
        {#each statusOptions as opt}
          <option value={opt.value}>{opt.label}</option>
        {/each}
      </select>
    </div>

    <!-- Actions -->
    <div class="flex gap-1">
      {#if hasFilters()}
        <button 
          class="btn btn-sm btn-ghost" 
          title="Clear filters"
          onclick={onClear}
        >
          <X class="w-4 h-4" />
        </button>
      {/if}
      <button 
        class="btn btn-primary btn-sm" 
        onclick={onSearch}
        disabled={loading}
      >
        {#if loading}
          <span class="loading loading-spinner loading-sm"></span>
        {:else}
          <Search class="w-4 h-4 mr-1" />
        {/if}
        Search
      </button>
    </div>
  </div>
</div>
