provenance/frontend/components/person-combobox.tsx

"use client";

import { useEffect, useMemo, useRef, useState } from "react";

import type { components } from "@/lib/api/schema";

type Person = components["schemas"]["PersonRead"];

/**
 * A type-to-filter person picker. Shows a text input; as you type, a dropdown
 * of matching people appears. Selecting one sets `value` (a person id) and
 * fills the input with their name. Replaces a plain <select> when the list is
 * long enough that scanning it by hand is painful.
 */
export function PersonCombobox({
  people,
  value,
  onChange,
  onCreate,
  placeholder = "Search for a person…",
  className,
}: {
  people: Person[];
  value: string;
  onChange: (id: string) => void;
  /** When set, the dropdown offers a "Create '<typed name>'" action. */
  onCreate?: (name: string) => void;
  placeholder?: string;
  className?: string;
}) {
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const wrapRef = useRef<HTMLDivElement>(null);

  const nameOf = useMemo(
    () => new Map(people.map((p) => [p.id, p.primary_name ?? "Unnamed"])),
    [people],
  );

  // Keep the input text in sync when the selection changes externally
  // (e.g. cleared to "" after a successful add).
  useEffect(() => {
    if (!value) {
      setQuery("");
    } else if (!open) {
      setQuery(nameOf.get(value) ?? "");
    }
  }, [value, open, nameOf]);

  // Close on outside click.
  useEffect(() => {
    function onDoc(e: MouseEvent) {
      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
    }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  const matches = useMemo(() => {
    const q = query.trim().toLowerCase();
    const pool = q
      ? people.filter((p) => (p.primary_name ?? "").toLowerCase().includes(q))
      : people;
    return pool.slice(0, 10);
  }, [query, people]);

  const base =
    "h-9 w-56 rounded-md border border-[var(--border)] bg-[var(--surface)] px-2 text-sm placeholder:text-[var(--muted)] focus-visible:border-bronze focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bronze/40";

  return (
    <div ref={wrapRef} className="relative">
      <input
        className={`${base} ${className ?? ""}`}
        value={query}
        placeholder={placeholder}
        onFocus={() => setOpen(true)}
        onChange={(e) => {
          setQuery(e.target.value);
          setOpen(true);
          if (value) onChange(""); // typing invalidates the prior pick
        }}
      />
      {open && (matches.length > 0 || (onCreate && query.trim())) && (
        <ul className="absolute z-30 mt-1 max-h-64 w-72 overflow-auto rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
          {matches.map((p) => (
            <li key={p.id}>
              <button
                type="button"
                onClick={() => {
                  onChange(p.id);
                  setQuery(p.primary_name ?? "Unnamed");
                  setOpen(false);
                }}
                className={`block w-full px-3 py-2 text-left text-sm hover:bg-[var(--muted-bg,rgba(0,0,0,0.04))] ${
                  p.id === value ? "text-bronze" : ""
                }`}
              >
                {p.primary_name ?? "Unnamed"}
              </button>
            </li>
          ))}
          {onCreate && query.trim() && (
            <li className={matches.length > 0 ? "border-t border-[var(--border)]" : ""}>
              <button
                type="button"
                onClick={() => {
                  const name = query.trim();
                  setOpen(false);
                  onCreate(name);
                }}
                className="block w-full px-3 py-2 text-left text-sm text-bronze hover:bg-[var(--muted-bg,rgba(0,0,0,0.04))]"
              >
                + Create “{query.trim()}”
              </button>
            </li>
          )}
        </ul>
      )}
    </div>
  );
}