<script>
  import { Search, X, ClipboardList, User, Filter, Calendar } from 'lucide-svelte';
  import { ORDER_STATUS } from '$lib/api/orders.js';

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

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

  function hasFilters() {
    return orderId || patientId || orderStatus || dateFrom || dateTo;
  }

  const statusOptions = Object.values(ORDER_STATUS);
</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: Order ID, Patient ID, Status -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
      <!-- Order ID -->
      <div class="form-control">
        <label class="label py-0 mb-1" for="searchOrderId">
          <span class="label-text text-xs font-medium text-gray-600">Order ID</span>
        </label>
        <label class="input input-sm input-bordered flex items-center gap-2 w-full focus-within:input-primary">
          <ClipboardList class="w-4 h-4 text-gray-400" />
          <input
            id="searchOrderId"
            type="text"
            class="grow bg-transparent outline-none"
            placeholder="e.g., 0025030300001"
            bind:value={orderId}
            onkeydown={handleKeydown}
          />
        </label>
      </div>

      <!-- 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="Internal Patient ID"
            bind:value={patientId}
            onkeydown={handleKeydown}
          />
        </label>
      </div>

      <!-- Order Status -->
      <div class="form-control">
        <label class="label py-0 mb-1" for="searchOrderStatus">
          <span class="label-text text-xs font-medium text-gray-600">Status</span>
        </label>
        <label class="input input-sm input-bordered flex items-center gap-2 w-full focus-within:input-primary">
          <Filter class="w-4 h-4 text-gray-400" />
          <select
            id="searchOrderStatus"
            class="grow bg-transparent outline-none text-sm"
            bind:value={orderStatus}
            onchange={onSearch}
          >
            <option value="">All Statuses</option>
            {#each statusOptions as status (status.code)}
              <option value={status.code}>{status.label}</option>
            {/each}
          </select>
        </label>
      </div>
    </div>

    <!-- Row 2: Date Range and Actions -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
      <!-- Date From -->
      <div class="form-control">
        <label class="label py-0 mb-1" for="searchDateFrom">
          <span class="label-text text-xs font-medium text-gray-600">Date From</span>
        </label>
        <label class="input input-sm input-bordered flex items-center gap-2 w-full focus-within:input-primary">
          <Calendar class="w-4 h-4 text-gray-400" />
          <input
            id="searchDateFrom"
            type="date"
            class="grow bg-transparent outline-none text-xs"
            bind:value={dateFrom}
            onkeydown={handleKeydown}
          />
        </label>
      </div>

      <!-- Date To -->
      <div class="form-control">
        <label class="label py-0 mb-1" for="searchDateTo">
          <span class="label-text text-xs font-medium text-gray-600">Date To</span>
        </label>
        <label class="input input-sm input-bordered flex items-center gap-2 w-full focus-within:input-primary">
          <Calendar class="w-4 h-4 text-gray-400" />
          <input
            id="searchDateTo"
            type="date"
            class="grow bg-transparent outline-none text-xs"
            bind:value={dateTo}
            onkeydown={handleKeydown}
          />
        </label>
      </div>

      <!-- Action Buttons -->
      <div class="form-control col-span-2 flex flex-row items-end gap-2">
        {#if hasFilters()}
          <button 
            class="btn btn-ghost btn-sm flex-1" 
            title="Clear filters"
            onclick={onClear}
          >
            <X class="w-4 h-4" />
            <span class="hidden sm:inline ml-1">Clear</span>
          </button>
        {:else}
          <div class="flex-1"></div>
        {/if}
        <button 
          class="btn btn-primary btn-sm flex-[2]" 
          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>
</div>
