import { useState } from 'react';
import { Search, X } from 'lucide-react';

/**
 * A filter box for a list that is already in the browser.
 *
 * Client-side, deliberately. Both screens load a whole collection in one request and hold it — a
 * calendar of a few hundred events, an address book of a few hundred cards — so filtering is a string
 * comparison over data already in hand. A server round trip per keystroke would be slower, would need a
 * search endpoint on the sidecar, and would show a spinner where a person expects a list to narrow.
 *
 * Matching is CASE- AND ACCENT-INSENSITIVE, and that second half is not decoration here: this owner's
 * contacts are Portuguese. Typing "jose" must find "José" or the box is useless for half the address
 * book. `NFD` splits a letter from its accent and the range strips what is left behind.
 *
 * Every term must match SOMEWHERE, not all in one field — so "ana lisboa" finds the Ana whose address is
 * in Lisbon, which is how people actually search a contact list.
 */
const fold = (value: string) => value.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();

export const matches = (query: string, ...fields: (string | undefined)[]): boolean => {
  const terms = fold(query).split(/\s+/).filter(Boolean);
  if (!terms.length) return true;
  const haystack = fold(fields.filter(Boolean).join(' '));
  return terms.every((term) => haystack.includes(term));
};

export function useFilter(placeholder: string) {
  const [query, setQuery] = useState('');

  const input = (
    <div className="relative min-w-0 flex-1 sm:max-w-64">
      <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder={placeholder}
        className="w-full rounded-md border bg-background py-1 pl-7 pr-7 text-xs"
      />
      {query && (
        <button
          onClick={() => setQuery('')}
          title="Clear"
          className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground"
        >
          <X className="h-3 w-3" />
        </button>
      )}
    </div>
  );

  return { query, input };
}