/* MemberPicker — autocomplete + selected chip(s).
 *
 * Single-select by default, but `multi` flips it for the post-class
 * smart-link confirmation row. Phase 2 uses substring matching against
 * placeholder data; Phase 4 swaps to fuzzy + live sheet.
 */
(function () {
  const { useState, useRef, useEffect } = React;
  const { Input, Pill, Icons, members, tokens } = window.CC;

  function MemberPicker({
    label = "Member",
    value, // member object or array
    onChange,
    multi = false,
    autoFocus = false,
  }) {
    const [q, setQ] = useState("");
    const [results, setResults] = useState([]);
    const [activeIdx, setActiveIdx] = useState(0);
    const ref = useRef(null);

    useEffect(() => {
      setResults(members.search(q, { limit: 6 }));
      setActiveIdx(0);
    }, [q]);

    const selected = multi ? value || [] : value ? [value] : [];

    function pick(m) {
      if (multi) {
        if (selected.find((s) => s.row_id === m.row_id)) return;
        onChange([...selected, m]);
      } else {
        onChange(m);
      }
      setQ("");
    }

    function unpick(m) {
      if (multi) {
        onChange(selected.filter((s) => s.row_id !== m.row_id));
      } else {
        onChange(null);
      }
    }

    function onKey(e) {
      if (results.length === 0) return;
      if (e.key === "ArrowDown") {
        e.preventDefault();
        setActiveIdx((i) => Math.min(i + 1, results.length - 1));
      } else if (e.key === "ArrowUp") {
        e.preventDefault();
        setActiveIdx((i) => Math.max(i - 1, 0));
      } else if (e.key === "Enter") {
        e.preventDefault();
        pick(results[activeIdx]);
      }
    }

    return (
      <div className="cc-mp">
        {label && <div className="cc-mp__label">{label}</div>}
        <div className="cc-mp__chips">
          {selected.map((m) => (
            <span key={m.row_id} className="cc-mp__chip">
              {m.name}
              <button
                type="button"
                onClick={() => unpick(m)}
                aria-label={`Remove ${m.name}`}
              >
                {Icons.x(12)}
              </button>
            </span>
          ))}
          {(!selected.length || multi) && (
            <Input
              value={q}
              onChange={setQ}
              placeholder={selected.length ? "Add another" : "Type a name"}
              onKeyDown={onKey}
              autoFocus={autoFocus}
            />
          )}
        </div>
        {q.trim().length >= 1 && results.length > 0 && (
          <ul className="cc-mp__results" ref={ref} role="listbox">
            {results.map((m, i) => (
              <li
                key={m.row_id}
                role="option"
                aria-selected={i === activeIdx}
                className={i === activeIdx ? "is-active" : ""}
                onMouseEnter={() => setActiveIdx(i)}
                onMouseDown={(e) => {
                  e.preventDefault();
                  pick(m);
                }}
              >
                <span className="cc-mp__results-name">{m.name}</span>
                <Pill
                  size="sm"
                  tone={tokens.statusForLabel(m.status)}
                >
                  {m.status}
                </Pill>
                <span className="cc-mp__results-coach">{m.coach}</span>
              </li>
            ))}
          </ul>
        )}
        {q.trim().length >= 1 && results.length === 0 && (
          <div className="cc-mp__empty">No members match “{q}”.</div>
        )}
      </div>
    );
  }

  window.CC = window.CC || {};
  window.CC.MemberPicker = MemberPicker;
})();