spsays-training/components/chat/add-members-dialog.tsx

"use client";

/**
 * Search for people and add them to a group. Bottom drawer on mobile, modal on
 * desktop — see ResponsiveDialog.
 *
 * Search runs through the same-origin /api/search/users proxy the search page
 * uses. It returns handles, which is exactly what the member API takes — no id
 * plumbing needed.
 */

import { useEffect, useState } from "react";
import { Check, Search } from "lucide-react";
import { toast } from "sonner";
import { useAuth } from "@/components/auth/auth-provider";
import { useMediaQuery } from "@/components/selection-toolbar/shared";
import { UserAvatar } from "@/components/ui/user-avatar";
import { Button } from "@/components/ui/button";
import { chat } from "@/lib/chat";
import { ResponsiveDialog } from "@/components/chat/responsive-dialog";

type Candidate = { handle: string; name: string; avatar_url: string | null };

export function AddMembersDialog({
  conversationId,
  existing,
  onClose,
  onAdded,
}: {
  conversationId: string;
  /** Handles already in the group. Filtered out of results entirely. */
  existing: string[];
  onClose: () => void;
  onAdded: () => void;
}) {
  const { user } = useAuth();
  const isMobile = useMediaQuery("(max-width: 767px)");
  const [query, setQuery] = useState("");
  // Results are stored with the query they belong to, so what's displayed can
  // be derived: a stale page from a previous query simply stops matching, and
  // nothing has to be cleared from an effect.
  const [results, setResults] = useState<{ q: string; rows: Candidate[] }>({
    q: "",
    rows: [],
  });
  const [picked, setPicked] = useState<Set<string>>(new Set());
  const [busy, setBusy] = useState(false);

  const q = query.trim();
  const searchable = q.length >= 2;
  // Current members and the caller are dropped rather than shown greyed out:
  // this list exists to answer "who can I add?", and anyone already here is
  // not an answer to that.
  const alreadyIn = new Set(existing);
  const visible =
    results.q === q
      ? results.rows.filter(
          (u) => u.handle !== user?.handle && !alreadyIn.has(u.handle),
        )
      : [];

  useEffect(() => {
    if (!searchable) return;
    const timer = setTimeout(() => {
      fetch(`/api/search/users?q=${encodeURIComponent(q)}&limit=15`)
        .then((r) => r.json())
        .then((data: { results?: Candidate[] }) =>
          setResults({ q, rows: data.results ?? [] }),
        )
        .catch(() => setResults({ q, rows: [] }));
    }, 300);
    return () => clearTimeout(timer);
  }, [q, searchable]);

  const toggle = (handle: string) =>
    setPicked((prev) => {
      const next = new Set(prev);
      if (next.has(handle)) next.delete(handle);
      else next.add(handle);
      return next;
    });

  const submit = async () => {
    if (picked.size === 0) return;
    setBusy(true);
    try {
      await chat.addMembers(conversationId, [...picked]);
      toast.success(
        picked.size === 1 ? "Member added" : `${picked.size} members added`,
      );
      onAdded();
      onClose();
    } catch {
      toast.error("Could not add members");
    } finally {
      setBusy(false);
    }
  };

  return (
    <ResponsiveDialog
      title="Add members"
      description="Search for people to add to this group."
      onClose={onClose}
      toolbar={
        <div className="flex items-center gap-2 rounded-lg bg-muted/40 px-3 py-2">
          <Search className="size-4 shrink-0 text-muted-foreground" />
          <input
            // Not auto-focused on mobile: the keyboard would open mid-way
            // through the drawer's slide-up and fight the animation.
            autoFocus={!isMobile}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search by name or handle"
            className="flex-1 bg-transparent text-sm outline-none pointer-coarse:text-base placeholder:text-muted-foreground"
          />
        </div>
      }
      footer={
        <Button
          className="w-full"
          disabled={picked.size === 0 || busy}
          onClick={submit}
        >
          {picked.size === 0
            ? "Select people to add"
            : `Add ${picked.size} ${picked.size === 1 ? "person" : "people"}`}
        </Button>
      }
    >
      {!searchable ? (
        <p className="p-4 text-sm text-muted-foreground">
          Type at least two characters to search.
        </p>
      ) : visible.length === 0 ? (
        <p className="p-4 text-sm text-muted-foreground">No one found.</p>
      ) : (
        <ul className="divide-y divide-border">
          {visible.map((u) => (
            <li key={u.handle}>
              <button
                type="button"
                onClick={() => toggle(u.handle)}
                className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/60"
              >
                <UserAvatar
                  src={u.avatar_url}
                  name={u.name}
                  className="size-9 shrink-0"
                />
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm text-foreground">{u.name}</p>
                  <p className="truncate text-xs text-muted-foreground">
                    @{u.handle}
                  </p>
                </div>
                {picked.has(u.handle) && (
                  <Check className="size-4 shrink-0 text-primary" />
                )}
              </button>
            </li>
          ))}
        </ul>
      )}
    </ResponsiveDialog>
  );
}