"use client";

import { AdminSearchInput } from "@/components/admin/design-system";

export type OrdersFilters = {
  statusFilter: string;
  dateFrom: string;
  dateTo: string;
  searchQuery: string;
};

export default function OrdersFilterBar({
  filters,
  filteredCount,
  totalCount,
  onStatusChange,
  onDateFromChange,
  onDateToChange,
  onSearchChange,
  onSearchClear,
}: {
  filters: OrdersFilters;
  filteredCount: number;
  totalCount: number;
  onStatusChange: (v: string) => void;
  onDateFromChange: (v: string) => void;
  onDateToChange: (v: string) => void;
  onSearchChange: (v: string) => void;
  onSearchClear: () => void;
}) {
  return (
    <div className="flex flex-wrap items-center gap-3 rounded-2xl bg-white border border-[var(--admin-border)] p-4 shadow-sm">
      <div>
        <label htmlFor="fld-5-status"  className="block text-xs font-medium text-[var(--admin-text-muted)] mb-1">Status</label>
        <select id="fld-5-status"  aria-label="Select" value={filters.statusFilter} onChange={e => onStatusChange(e.target.value)}
          className="rounded-lg border border-[var(--admin-border)] px-3 py-1.5 text-sm outline-none focus:border-[var(--admin-accent)]">
          <option value="all">All Statuses</option>
          <option value="pending">Pending</option>
          <option value="awaiting_deposit">Awaiting Deposit</option>
          <option value="confirmed">Confirmed</option>
          <option value="fulfilled">Fulfilled</option>
        </select>
      </div>
      <div>
        <label htmlFor="fld-6-pickup-from"  className="block text-xs font-medium text-[var(--admin-text-muted)] mb-1">Pickup From</label>
        <input id="fld-6-pickup-from"  aria-label="Date" type="date" value={filters.dateFrom} onChange={e => onDateFromChange(e.target.value)}
          className="rounded-lg border border-[var(--admin-border)] px-3 py-1.5 text-sm outline-none focus:border-[var(--admin-accent)]" />
      </div>
      <div>
        <label htmlFor="fld-7-pickup-to"  className="block text-xs font-medium text-[var(--admin-text-muted)] mb-1">Pickup To</label>
        <input id="fld-7-pickup-to"  aria-label="Date" type="date" value={filters.dateTo} onChange={e => onDateToChange(e.target.value)}
          className="rounded-lg border border-[var(--admin-border)] px-3 py-1.5 text-sm outline-none focus:border-[var(--admin-accent)]" />
      </div>
      <div className="flex-1 min-w-[180px]">
        <label className="block text-xs font-medium text-[var(--admin-text-muted)] mb-1" htmlFor="fld-search">Search</label>
        <AdminSearchInput
          value={filters.searchQuery}
          onChange={e => onSearchChange(e.target.value)}
          onClear={onSearchClear}
          placeholder="Invoice, customer, email..."
        />
      </div>
      {filteredCount !== totalCount && (
        <div className="self-end pb-1">
          <span className="text-xs text-[var(--admin-text-muted)]">{filteredCount} of {totalCount}</span>
        </div>
      )}
    </div>
  );
}
