spsays-training/components/social/mention-autocomplete.tsx

"use client";

/**
 * MentionAutocomplete — a search input with a suggestions popover for tagging
 * users. Suggestions come from the backend prioritised (following → followers
 * → others), 20 per page, and the popover infinite-scrolls (≈5 rows visible).
 * Already-selected users are filtered out. Calls onSelect with the chosen
 * user; the caller manages the selected set.
 */

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { Loader2, Search } from "lucide-react";
import { posts, type UserSummary } from "@/lib/social";

const PAGE = 20;

export function MentionAutocomplete({
  excludeIds = [],
  onSelect,
  placeholder = "Search people to mention…",
  autoFocus = false,
}: {
  excludeIds?: string[];
  onSelect: (user: UserSummary) => void;
  placeholder?: string;
  autoFocus?: boolean;
}) {
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(false);
  const [items, setItems] = useState<UserSummary[]>([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const reqRef = useRef(0);
  const busyRef = useRef(false);
  const rootRef = useRef<HTMLDivElement>(null);

  // (Re)load page 0 on open / query change (debounced — timer callback, so
  // setState isn't synchronous-in-effect).
  useEffect(() => {
    if (!open) return;
    const t = window.setTimeout(() => {
      const token = ++reqRef.current;
      busyRef.current = true;
      setLoading(true);
      posts
        .mentionSuggest(q, { limit: PAGE, offset: 0 })
        .then((res) => {
          if (reqRef.current !== token) return;
          setItems(res);
          setHasMore(res.length === PAGE);
        })
        .catch(() => {
          if (reqRef.current === token) {
            setItems([]);
            setHasMore(false);
          }
        })
        .finally(() => {
          if (reqRef.current === token) {
            setLoading(false);
            busyRef.current = false;
          }
        });
    }, 200);
    return () => window.clearTimeout(t);
  }, [q, open]);

  function loadMore() {
    if (busyRef.current || !hasMore) return;
    const token = reqRef.current;
    busyRef.current = true;
    setLoading(true);
    posts
      .mentionSuggest(q, { limit: PAGE, offset: items.length })
      .then((res) => {
        if (reqRef.current !== token) return;
        setItems((prev) => [...prev, ...res]);
        setHasMore(res.length === PAGE);
      })
      .catch(() => {})
      .finally(() => {
        if (reqRef.current === token) {
          setLoading(false);
          busyRef.current = false;
        }
      });
  }

  // Close on outside click / Escape.
  useEffect(() => {
    if (!open) return;
    function onDown(e: PointerEvent) {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("pointerdown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const excluded = new Set(excludeIds);
  const visible = items.filter((u) => !u.id || !excluded.has(u.id));

  return (
    <div ref={rootRef} className="relative">
      <div className="relative">
        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
        <input
          type="text"
          value={q}
          autoFocus={autoFocus}
          onFocus={() => setOpen(true)}
          onChange={(e) => {
            setQ(e.target.value);
            setOpen(true);
          }}
          placeholder={placeholder}
          autoComplete="off"
          // text-base (16px) on mobile prevents iOS Safari from auto-zooming
          // on focus (it zooms any input < 16px); compact 14px on desktop.
          className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-base sm:text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
        />
      </div>

      {open ? (
        <div
          onScroll={(e) => {
            const el = e.currentTarget;
            if (el.scrollHeight - el.scrollTop - el.clientHeight < 80) {
              loadMore();
            }
          }}
          className="absolute z-50 mt-1 max-h-60 w-full overflow-y-auto overscroll-contain rounded-lg border border-border bg-card shadow-lg"
        >
          {visible.length === 0 && !loading ? (
            <p className="px-3 py-3 text-sm text-muted-foreground">
              {q.trim() ? "No people found." : "No suggestions."}
            </p>
          ) : (
            visible.map((u) => (
              <button
                key={u.id ?? u.handle}
                type="button"
                onMouseDown={(e) => e.preventDefault()} // keep input focused
                onClick={() => {
                  onSelect(u);
                  setQ("");
                }}
                className="flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-muted/60"
              >
                <RowAvatar src={u.avatar_url} name={u.name} />
                <span className="min-w-0">
                  <span className="block truncate text-sm font-medium text-foreground">
                    {u.name}
                  </span>
                  <span className="block truncate text-xs text-muted-foreground">
                    @{u.handle}
                  </span>
                </span>
              </button>
            ))
          )}
          {loading ? (
            <div className="flex justify-center py-2">
              <Loader2 className="size-4 animate-spin text-muted-foreground" />
            </div>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

function RowAvatar({ src, name }: { src: string | null; name: string }) {
  if (src) {
    return (
      <Image
        src={src}
        alt={name}
        width={32}
        height={32}
        className="size-8 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
        unoptimized
      />
    );
  }
  const initials =
    name
      .split(/\s+/)
      .map((p) => p[0])
      .slice(0, 2)
      .join("")
      .toUpperCase() || "?";
  return (
    <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/15 text-xs font-semibold text-primary ring-1 ring-foreground/10">
      {initials}
    </span>
  );
}