ChatApp/apps/desktop/src/components/MentionAutocomplete.tsx

import type { ConversationSummary } from '@chat-app/shared/chat';
import { useEffect, useState } from 'react';

import { Avatar } from './Avatar';

interface Props {
  members: ConversationSummary['members'];
  query: string;
  excludeUserId: string | undefined;
  onSelect: (username: string) => void;
  onClose: () => void;
}

// Dropdown shown above the composer when the user has typed `@` followed
// by the start of a member name. Keyboard-first — arrow keys move through,
// enter/tab commits, escape cancels.
export function MentionAutocomplete({
  members,
  query,
  excludeUserId,
  onSelect,
  onClose,
}: Props) {
  const q = query.toLowerCase();
  const matches = members
    .filter((m) => m.userId !== excludeUserId)
    .filter((m) => {
      if (!q) return true;
      const name = (m.profile?.displayName ?? '').toLowerCase();
      const handle = (m.profile?.username ?? '').toLowerCase();
      return name.includes(q) || handle.includes(q);
    })
    .slice(0, 8);

  const [active, setActive] = useState(0);
  useEffect(() => {
    setActive(0);
  }, [query]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (matches.length === 0) return;
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        setActive((i) => (i + 1) % matches.length);
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        setActive((i) => (i - 1 + matches.length) % matches.length);
      } else if (e.key === 'Enter' || e.key === 'Tab') {
        e.preventDefault();
        const pick = matches[active];
        if (pick?.profile?.username) onSelect(pick.profile.username);
      } else if (e.key === 'Escape') {
        e.preventDefault();
        onClose();
      }
    };
    window.addEventListener('keydown', onKey, true);
    return () => {
      window.removeEventListener('keydown', onKey, true);
    };
  }, [matches, active, onSelect, onClose]);

  if (matches.length === 0) return null;

  return (
    <div
      role="listbox"
      aria-label="Mitglieder"
      className="absolute bottom-full left-0 right-0 z-20 mb-2 max-h-64 overflow-y-auto rounded-xl border border-line bg-surface-2 p-1 shadow-xl"
    >
      {matches.map((m, idx) => {
        const name = m.profile?.displayName ?? m.profile?.username ?? '?';
        const handle = m.profile?.username ?? '';
        const isActive = idx === active;
        return (
          <button
            key={m.userId}
            type="button"
            role="option"
            aria-selected={isActive}
            onMouseEnter={() => setActive(idx)}
            onClick={() => {
              if (m.profile?.username) onSelect(m.profile.username);
            }}
            className={
              'flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ' +
              (isActive ? 'bg-accent/20 text-fg' : 'text-fg-muted hover:bg-surface-3')
            }
          >
            <Avatar
              displayName={name}
              url={m.profile?.avatarUrl ?? null}
              className="h-6 w-6 text-[10px]"
            />
            <span className="min-w-0 flex-1 truncate text-fg">{name}</span>
            <span className="shrink-0 text-[10px] text-fg-muted">@{handle}</span>
          </button>
        );
      })}
    </div>
  );
}