/**
 * The menu shell the reviewer and label pickers share: an icon trigger, a search box, and a
 * scrolling body that says when the list is loading, could not be read, is empty, or is not all
 * of it. The rows and the words are the caller's; the frame is the same either way.
 *
 * The same combobox as the project and branch pickers, and dressed the same, rather than a menu:
 * a menu's typeahead claims every keypress to jump between rows, which a search box cannot share.
 */
import { SearchIcon } from "lucide-react";
import type { ReactNode } from "react";

import { Button } from "../ui/button";
import {
  Combobox,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxTrigger,
} from "../ui/combobox";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
import { PullRequestPeopleGhost } from "./PullRequestGhosts";

export function PullRequestCandidatePicker<T>({
  icon,
  label,
  allowed,
  disabledReason,
  open,
  onOpenChange,
  query,
  onQueryChange,
  searchLabel,
  isPending,
  error,
  candidates,
  emptyLabel,
  noMatchLabel,
  errorLabel,
  truncated,
  truncatedLabel,
  candidateKey,
  disabled,
  onSelect,
  children,
}: {
  icon: ReactNode;
  /** The trigger's accessible name; the button carries an icon alone. */
  label: string;
  /** False where the host would refuse this account's change. Disabled with the reason rather
   * than hidden: a control that vanishes teaches nobody why. */
  allowed: boolean;
  disabledReason: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  query: string;
  onQueryChange: (query: string) => void;
  searchLabel: string;
  isPending: boolean;
  error: string | null;
  /** Already narrowed by the query; the shell only decides which state to show. */
  candidates: ReadonlyArray<T>;
  emptyLabel: string;
  noMatchLabel: string;
  /** Leads the host's own message, which follows it in the same sentence. */
  errorLabel: string;
  /** The host has more than the read asked for, so a name missing here may still be askable. */
  truncated: boolean;
  truncatedLabel: string;
  candidateKey: (candidate: T) => string;
  /** Every row locks while one change is in flight, so a second press cannot race the first. */
  disabled: boolean;
  onSelect: (candidate: T) => void;
  children: (candidate: T) => ReactNode;
}) {
  if (!allowed) {
    return (
      <Tooltip>
        <TooltipTrigger
          render={
            <Button size="icon-xs" variant="ghost" disabled aria-label={label}>
              {icon}
            </Button>
          }
        />
        <TooltipPopup side="bottom">{disabledReason}</TooltipPopup>
      </Tooltip>
    );
  }

  const keys = candidates.map(candidateKey);

  return (
    <Combobox
      items={keys}
      // The caller narrows the list, so the combobox does no filtering of its own.
      filteredItems={keys}
      filter={null}
      autoHighlight
      value={null}
      onValueChange={(key) => {
        const candidate = candidates.find((entry) => candidateKey(entry) === key);
        if (candidate) onSelect(candidate);
      }}
      open={open}
      onOpenChange={(nextOpen, details) => {
        // Stays open on a pick: a change is confirmed by the row's own check turning over, and a
        // second label or reviewer is usually wanted right after the first. Cancelled rather than
        // ignored, so the combobox also skips its own close work: freezing the query and returning
        // focus to the trigger, either of which would take the next keystroke away from the box.
        if (!nextOpen && details.reason === "item-press") {
          details.cancel();
          return;
        }
        onOpenChange(nextOpen);
      }}
    >
      <ComboboxTrigger
        render={
          <Button size="icon-xs" variant="ghost" aria-label={label}>
            {icon}
          </Button>
        }
      />
      <ComboboxPopup align="start" side="bottom" className="w-72">
        <div className="shrink-0 px-3 pt-2.5">
          <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
            <SearchIcon
              aria-hidden="true"
              className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
            />
            <ComboboxInput
              aria-label={searchLabel}
              className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
              inputClassName="rounded-none bg-transparent text-sm"
              placeholder={searchLabel}
              showTrigger={false}
              size="sm"
              unstyled
              value={query}
              onChange={(event) => onQueryChange(event.target.value)}
            />
          </div>
        </div>
        <ComboboxList className="max-h-72">
          {isPending ? (
            <PullRequestPeopleGhost rows={4} />
          ) : error !== null ? (
            <p className="p-2 text-xs text-muted-foreground">
              {errorLabel} {error}
            </p>
          ) : candidates.length === 0 ? (
            <p className="p-2 text-xs text-muted-foreground">
              {query.length > 0 ? noMatchLabel : emptyLabel}
            </p>
          ) : (
            candidates.map((candidate, index) => (
              <ComboboxItem
                key={keys[index]}
                hideIndicator
                index={index}
                value={keys[index]}
                disabled={disabled}
                className="min-h-0 py-1.5 text-xs sm:min-h-0 sm:text-xs"
                contentClassName="flex min-w-0 items-center gap-2"
              >
                {children(candidate)}
              </ComboboxItem>
            ))
          )}
          {truncated ? (
            // Typing filters what arrived; it does not ask the host again, so this says what the
            // list is rather than offering a search that would find nothing further.
            <p className="px-2 py-1.5 text-xs text-muted-foreground">{truncatedLabel}</p>
          ) : null}
        </ComboboxList>
      </ComboboxPopup>
    </Combobox>
  );
}