Search

"use client";

import * as React from "react";
import { Loader2, Search, SearchX, X } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

/**
 * Live Search example — Search is a composition PATTERN, not a component:
 * there is no `<Search>` import and no `components/ui/search.tsx`. Both
 * sections below simulate an async source (a `setTimeout` delay) so the
 * loading state is genuinely reachable, per docs/patterns/search.md.
 *
 *  - Plain search: a real <Input type="search"> with a hand-composed leading
 *    icon/spinner and a flush trailing clear Button (unmodified `ghost` +
 *    `icon`), matching results rendered below in a plain list; empty results
 *    fall back to the Empty States no-results composition (a local,
 *    unexported `NoResults` helper, the same role `EmptyState` plays in
 *    empty-state-showcase.tsx).
 *  - Disabled: a static composition demonstrating the one-opacity-value rule
 *    the doc's States table names — dimming lives on the wrapper, not Input
 *    alone, so the icon and clear button dim (and stop responding) with it.
 *  - Combobox search: the already-documented Combobox pattern
 *    (Popover + Command, `shouldFilter={false}`) styled for search, with the
 *    loading message carried in Command's own `CommandEmpty` slot instead of
 *    a new part.
 */

const ARTICLES = [
  "Getting started with Monogem",
  "Design tokens overview",
  "Button component guide",
  "Building accessible forms",
  "Empty states pattern",
  "Combobox vs. Select",
  "Theming with CSS variables",
  "Icon usage guidelines",
];

/**
 * Simulates a debounced remote search against a static list. `loading` is
 * derived (never set directly in the effect body, per this repo's
 * `react-hooks/set-state-in-effect` rule) by comparing the query the last
 * committed results answered against the current one — they differ for as
 * long as a request is "in flight".
 */
function useDelayedResults(query: string, items: string[], delayMs = 400) {
  const [committed, setCommitted] = React.useState(() => ({
    query,
    results: items,
  }));

  React.useEffect(() => {
    const id = window.setTimeout(() => {
      const needle = query.trim().toLowerCase();
      setCommitted({
        query,
        results:
          needle === ""
            ? items
            : items.filter((item) => item.toLowerCase().includes(needle)),
      });
    }, delayMs);
    return () => window.clearTimeout(id);
  }, [query, items, delayMs]);

  return { results: committed.results, loading: committed.query !== query };
}

function NoResults({ query, onClear }: { query: string; onClear: () => void }) {
  return (
    <div className="flex max-w-sm flex-col items-center py-6 text-center">
      <SearchX
        aria-hidden="true"
        className="mb-4 size-6 text-muted-foreground [stroke-width:var(--icon-stroke-width)]"
      />
      <div className="flex flex-col gap-1">
        <h4 className="text-xl font-semibold leading-snug">
          No results for “{query}”
        </h4>
        <p className="text-sm leading-normal text-muted-foreground">
          Try a different search term.
        </p>
      </div>
      <div className="mt-6">
        <Button onClick={onClear}>Clear search</Button>
      </div>
    </div>
  );
}

function PlainSearchExample() {
  const [query, setQuery] = React.useState("");
  const { results, loading } = useDelayedResults(query, ARTICLES);
  const inputRef = React.useRef<HTMLInputElement>(null);

  function clear() {
    setQuery("");
    inputRef.current?.focus();
  }

  const status = loading
    ? "Searching…"
    : query
      ? results.length > 0
        ? `${results.length} result${results.length === 1 ? "" : "s"} for “${query}”`
        : `No results for “${query}”.`
      : `Showing all ${ARTICLES.length} articles.`;

  return (
    <section className="flex flex-col gap-3">
      <h3 className="text-sm font-medium leading-snug text-muted-foreground">
        Plain search field — results render below, in the page’s own region
      </h3>
      <div className="flex w-full max-w-sm flex-col gap-1.5">
        <Label htmlFor="pattern-search-input">Search articles</Label>
        <div className="relative" aria-busy={loading}>
          {loading ? (
            <Loader2
              aria-hidden="true"
              className="absolute left-3 top-1/2 size-4 -translate-y-1/2 animate-spin text-muted-foreground [stroke-width:var(--icon-stroke-width)]"
            />
          ) : (
            <Search
              aria-hidden="true"
              className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground [stroke-width:var(--icon-stroke-width)]"
            />
          )}
          <Input
            ref={inputRef}
            id="pattern-search-input"
            type="search"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Search articles…"
            className="pl-8 pr-10 [&::-webkit-search-cancel-button]:appearance-none"
          />
          {query ? (
            <Button
              type="button"
              variant="ghost"
              size="icon"
              aria-label="Clear search"
              onClick={clear}
              className="absolute right-0 top-0 rounded-l-none rounded-r-sm"
            >
              <X aria-hidden="true" className="[stroke-width:var(--icon-stroke-width)]" />
            </Button>
          ) : null}
        </div>
      </div>
      <p className="text-sm leading-normal text-muted-foreground" aria-live="polite">
        {status}
      </p>
      {!loading && query && results.length === 0 ? (
        <NoResults query={query} onClear={clear} />
      ) : (
        <ul className="flex max-w-sm flex-col gap-1">
          {results.map((item) => (
            <li
              key={item}
              className="rounded-sm px-3 py-2 text-sm leading-normal text-foreground"
            >
              {item}
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}

/**
 * Static disabled composition — matches Input's own "one opacity value
 * applies to the field as a unit" rule (input.md#disabled-treatment): the
 * dimming lives on the wrapper, not on Input alone, so the icon and the
 * clear button dim with it instead of a caller getting a visually mixed
 * control whose query can still be changed through Clear. Each descendant's
 * own `disabled:opacity-50` is neutralized (`disabled:opacity-100`) so the
 * wrapper's opacity isn't compounded on top of it, and the clear button
 * carries a real `disabled` attribute so it's genuinely non-interactive, not
 * just dimmed.
 */
function DisabledSearchExample() {
  return (
    <section className="flex flex-col gap-3">
      <h3 className="text-sm font-medium leading-snug text-muted-foreground">
        Disabled — one opacity value dims the whole composition, not the field
        alone
      </h3>
      <div className="flex w-full max-w-sm flex-col gap-1.5">
        <Label htmlFor="pattern-search-disabled" className="opacity-50">
          Search articles
        </Label>
        <div className="relative opacity-50">
          <Search
            aria-hidden="true"
            className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground [stroke-width:var(--icon-stroke-width)]"
          />
          <Input
            id="pattern-search-disabled"
            type="search"
            disabled
            defaultValue="design tokens"
            className="pl-8 pr-10 disabled:opacity-100 [&::-webkit-search-cancel-button]:appearance-none"
          />
          <Button
            type="button"
            variant="ghost"
            size="icon"
            disabled
            aria-label="Clear search"
            className="absolute right-0 top-0 rounded-l-none rounded-r-sm disabled:opacity-100"
          >
            <X aria-hidden="true" className="[stroke-width:var(--icon-stroke-width)]" />
          </Button>
        </div>
      </div>
    </section>
  );
}

function ComboboxSearchExample() {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [selected, setSelected] = React.useState<string | null>(null);
  const { results, loading } = useDelayedResults(query, ARTICLES);
  const triggerRef = React.useRef<HTMLButtonElement>(null);

  return (
    <section className="flex flex-col gap-3">
      <h3 className="text-sm font-medium leading-snug text-muted-foreground">
        Combobox search — live suggestions in a popover, one committed value
      </h3>
      <Label htmlFor="pattern-search-combobox-trigger">Search documentation</Label>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger>
          <button
            ref={triggerRef}
            id="pattern-search-combobox-trigger"
            type="button"
            className={cn(
              "flex h-10 w-64 items-center gap-2 rounded-sm border-[length:var(--scale-px)] border-solid border-input bg-background px-3 text-sm leading-normal text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
              !selected && "text-muted-foreground",
            )}
          >
            <Search
              aria-hidden="true"
              className="size-4 shrink-0 [stroke-width:var(--icon-stroke-width)]"
            />
            {selected ?? "Search documentation…"}
          </button>
        </PopoverTrigger>
        <PopoverContent aria-label="Documentation search" className="w-64 p-0">
          <Command shouldFilter={false} value={query} onValueChange={setQuery}>
            <CommandInput
              placeholder="Type to search…"
              aria-label="Search documentation"
            />
            <CommandList aria-label="Results">
              <CommandEmpty>
                {loading ? "Searching…" : `No results for “${query}”.`}
              </CommandEmpty>
              {!loading &&
                results.map((item) => (
                  <CommandItem
                    key={item}
                    value={item}
                    onSelect={(value) => {
                      setSelected(value);
                      setOpen(false);
                      triggerRef.current?.focus();
                    }}
                  >
                    {item}
                  </CommandItem>
                ))}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
      <p className="text-sm leading-normal text-muted-foreground" aria-live="polite">
        {selected ? `Committed: ${selected}` : "Nothing committed yet."}
      </p>
    </section>
  );
}

export function SearchShowcase() {
  return (
    <div className="flex flex-col gap-10">
      <PlainSearchExample />
      <DisabledSearchExample />
      <ComboboxSearchExample />
    </div>
  );
}