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

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

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

  function hasFilters() {
    return patientId || patientName;
  }
</script>

<div class="bg-base-100 rounded-xl shadow-lg border border-base-300/50 p-3">
  <div class="flex flex-col gap-3">
    <!-- Row 1: Patient ID and Patient Name -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
      <!-- Patient ID -->
      <div class="form-control">
        <label class="label py-0 mb-1" for="searchPatientId">
          <span class="label-text text-xs font-medium text-gray-600">Patient ID</span>
        </label>
        <label class="input input-sm input-bordered flex items-center gap-2 w-full focus-within:input-primary">
          <User class="w-4 h-4 text-gray-400" />
          <input
            id="searchPatientId"
            type="text"
            class="grow bg-transparent outline-none"
            placeholder="e.g. P001234"
            bind:value={patientId}
            onkeydown={handleKeydown}
          />
        </label>
      </div>

      <!-- Patient Name -->
      <div class="form-control md:col-span-2">
        <label class="label py-0 mb-1" for="searchPatientName">
          <span class="label-text text-xs font-medium text-gray-600">Patient Name</span>
        </label>
        <label class="input input-sm input-bordered flex items-center gap-2 w-full focus-within:input-primary">
          <FileUser class="w-4 h-4 text-gray-400" />
          <input
            id="searchPatientName"
            type="text"
            class="grow bg-transparent outline-none"
            placeholder="Search by name..."
            bind:value={patientName}
            onkeydown={handleKeydown}
          />
        </label>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="flex flex-row items-end gap-2 mt-2">
      {#if hasFilters()}
        <button 
          class="btn btn-ghost btn-sm" 
          title="Clear filters"
          onclick={onClear}
        >
          <X class="w-4 h-4" />
          <span class="hidden sm:inline ml-1">Clear</span>
        </button>
      {/if}
      <button 
        class="btn btn-primary btn-sm flex-1" 
        onclick={onSearch}
        disabled={loading}
      >
        {#if loading}
          <span class="loading loading-spinner loading-sm"></span>
        {:else}
          <Search class="w-4 h-4 mr-1" />
          Search
        {/if}
      </button>
    </div>
  </div>
</div>
