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

"use client";

/**
 * Search for people and add them to a group.
 *
 * 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, X } from "lucide-react";
import { toast } from "sonner";
import { useAuth } from "@/components/auth/auth-provider";
import { UserAvatar } from "@/components/ui/user-avatar";
import { Button } from "@/components/ui/button";
import { chat } from "@/lib/chat";

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 [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]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  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 (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 sm:items-center">
      <div className="absolute inset-0" onClick={onClose} aria-hidden />
      <div className="relative z-10 flex max-h-[75vh] w-full max-w-md flex-col overflow-hidden rounded-t-2xl border border-border bg-background sm:rounded-2xl">
        <div className="flex items-center justify-between border-b border-border px-4 py-3">
          <h2 className="text-sm font-semibold text-foreground">Add members</h2>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close"
            className="rounded-md p-1 text-muted-foreground hover:text-foreground"
          >
            <X className="size-4" />
          </button>
        </div>

        <div className="border-b border-border p-3">
          <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
              autoFocus
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search by name or handle"
              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
            />
          </div>
        </div>

        <div className="flex-1 overflow-y-auto">
          {!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>
          )}
        </div>

        <div className="border-t border-border p-3">
          <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>
        </div>
      </div>
    </div>
  );
}