// <LinkAccountMenu> — one "link account" badge that opens a `Dropdown` with
// the three kinds of account an agent can be linked to, in place of one
// badge per kind: three side-by-side badges were wider than the detail
// panel and spilled out of it. Presentational only, same split as
// `WantedMenu`: the caller owns what each selection opens.
import { useRef, useState } from "preact/hooks";
import { Badge } from "@hive/shared/badge.js";
import { Dropdown, type DropdownOption } from "@hive/shared/dropdown.js";
import { LinkIcon } from "@hive/shared/icons.js";

export type LinkKind = "matrix" | "forge" | "github";

const OPTIONS: DropdownOption[] = [
  { value: "matrix", label: "matrix account" },
  { value: "forge", label: "forge account" },
  { value: "github", label: "github account" },
];

export function LinkAccountMenu({
  agent,
  hasHive,
  onSelect,
}: {
  agent: string;
  /** Linking writes against the agent's hive, so without one there is
   * nothing to link against and the menu stays shut. */
  hasHive: boolean;
  onSelect: (kind: LinkKind) => void;
}) {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef<HTMLDivElement>(null);
  return (
    <div class="ui-dropdown-anchor" ref={anchorRef}>
      <Badge
        variant="quiet"
        icon={<LinkIcon />}
        value="link account"
        onClick={hasHive ? () => setOpen((o) => !o) : undefined}
        expanded={open}
        disabled={!hasHive}
        title={
          hasHive
            ? `link a matrix, forge or github account to ${agent}`
            : "no hive on record for this agent — nothing to link against"
        }
      />
      <Dropdown
        open={open}
        options={OPTIONS}
        label={`link an account to ${agent}`}
        onSelect={(value) => {
          setOpen(false);
          onSelect(value as LinkKind);
        }}
        onClose={() => setOpen(false)}
        anchorRef={anchorRef}
      />
    </div>
  );
}