"use client";

/**
 * MentionPopup — the R3 mention picker's listbox (the popup the composer +
 * inline `@` open). A pure presentational component: it renders the grouped,
 * fuzzy-ranked `MentionGroup[]` from `buildMentionGroups` and forwards the
 * selection. Keyboard nav (arrows/Enter/Tab/Esc) + the flat highlight index
 * live in the host `MentionInput`; this component maps the flat index back
 * to the group row it belongs to.
 *
 * A11y (ux §12 "mention popup = listbox"): the container is `role=listbox`,
 * each group is a labelled `role=group`, each option is `role=option` with
 * the accessible name = "Label (Kind)" (e.g. "Engineering (Team)"),
 * `aria-selected` on the highlighted row.
 */
import { UserAvatar } from "@/components/database/cell-renderer";
import { AtSign, Database, FileText, Users } from "lucide-react";
import type { MentionGroup, MentionItem, MentionKind } from "./mention-model";

export interface MentionPopupProps {
  groups: MentionGroup[];
  /** The flat highlight index across ALL groups' items (the keyboard cursor). */
  highlight: number;
  loading?: boolean;
  onPick: (item: MentionItem) => void;
  onHover: (flatIndex: number) => void;
}

const GROUP_ICON: Record<MentionKind, typeof AtSign> = {
  user: AtSign,
  team: Users,
  page: FileText,
  database: Database
};

/**
 * The SINGULAR kind descriptor for an option's accessible name (ux §12):
 * "Ana (Member)", "Engineering (Team)", "Launch Plan (Page)". The group
 * headers stay the plural labels; the per-option name is singular.
 */
const KIND_A11Y: Record<MentionKind, string> = {
  user: "Member",
  team: "Team",
  page: "Page",
  database: "Database"
};

export function MentionPopup({ groups, highlight, loading, onPick, onHover }: MentionPopupProps) {
  let flat = 0;
  return (
    <ul
      className="absolute left-0 top-full z-40 mt-1 max-h-80 w-72 overflow-y-auto rounded-md border bg-popover p-1 shadow-lg"
      role="listbox"
      aria-label="Mention"
      data-testid="mention-listbox"
    >
      {loading && groups.length === 0 ? (
        <li className="px-2 py-2 text-xs text-muted-foreground">Loading…</li>
      ) : null}
      {!loading && groups.length === 0 ? (
        <li className="px-2 py-2 text-xs text-muted-foreground">No matches</li>
      ) : null}
      {groups.map((group) => {
        const Icon = GROUP_ICON[group.kind];
        const groupIndex = flat; // the first flat index in this group
        flat += group.items.length;
        return (
          <li key={group.key} role="group" aria-label={group.label}>
            <div className="flex items-center gap-1.5 px-2 pb-0.5 pt-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
              <Icon className="size-3" aria-hidden />
              {group.label}
            </div>
            {group.items.map((item, i) => {
              const idx = groupIndex + i;
              const selected = idx === highlight;
              return (
                <li
                  key={item.id}
                  role="option"
                  aria-selected={selected}
                  aria-label={`${item.label} (${KIND_A11Y[group.kind]})`}
                  data-testid={`mention-option-${item.kind}-${item.id}`}
                >
                  <button
                    type="button"
                    className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-muted data-[selected=true]:bg-muted"
                    data-selected={selected}
                    onMouseDown={(e) => {
                      e.preventDefault();
                      onPick(item);
                    }}
                    onMouseEnter={() => onHover(idx)}
                  >
                    {item.user ? (
                      <UserAvatar user={item.user} size={18} />
                    ) : (
                      <span className="flex size-[18px] shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
                        <Icon className="size-3" aria-hidden />
                      </span>
                    )}
                    <span className="min-w-0 flex-1 truncate">{item.label}</span>
                    {item.sublabel ? (
                      <span className="shrink-0 text-[10px] text-muted-foreground">{item.sublabel}</span>
                    ) : null}
                  </button>
                </li>
              );
            })}
          </li>
        );
      })}
    </ul>
  );
}