Command Menu

/**
 * VibeBox Motion · Command Menu
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useId, useMemo, useState, type KeyboardEvent } from "react";
import { cn } from "@/lib/utils";
import { accentStyle } from "@/lib/vibebox/app-accent";

export type Command = { label: string; hint?: string; group?: string };
export type CommandMenuProps = { commands?: Command[]; onSelect?: (command: Command) => void; accent?: string; className?: string };

const SAMPLE: Command[] = [
  { label: "New booking", hint: "N", group: "Create" },
  { label: "Add a client", hint: "C", group: "Create" },
  { label: "Go to calendar", hint: "G C", group: "Navigate" },
  { label: "Go to messages", hint: "G M", group: "Navigate" },
  { label: "Switch theme", group: "Settings" },
  { label: "Open billing", group: "Settings" },
];

/** A command palette as a combobox: type to filter, arrows to move, Enter to run. */
export function CommandMenu({ commands = SAMPLE, onSelect, accent, className }: CommandMenuProps) {
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  const listId = useId();
  const shown = useMemo(() => commands.filter((c) => c.label.toLowerCase().includes(query.trim().toLowerCase())), [commands, query]);
  const move = (event: KeyboardEvent) => {
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setActive((i) => Math.min(i + 1, shown.length - 1));
    } else if (event.key === "ArrowUp") {
      event.preventDefault();
      setActive((i) => Math.max(i - 1, 0));
    } else if (event.key === "Enter" && shown[active]) {
      event.preventDefault();
      onSelect?.(shown[active]!);
    }
  };
  return (
    <div data-vb="command-menu" style={accentStyle(accent)} className={cn("overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-md", className)}>
      <input
        role="combobox"
        aria-expanded="true"
        aria-controls={listId}
        aria-activedescendant={shown[active] ? `${listId}-${active}` : undefined}
        aria-label="Search commands"
        placeholder="Type a command"
        value={query}
        onChange={(event) => {
          setQuery(event.target.value);
          setActive(0);
        }}
        onKeyDown={move}
        className="h-12 w-full border-b border-border bg-transparent px-4 text-[1rem] outline-none placeholder:text-subtle-foreground"
      />
      <ul id={listId} role="listbox" aria-label="Commands" className="max-h-72 overflow-y-auto p-1.5">
        {shown.map((c, i) => (
          <li
            key={c.label}
            id={`${listId}-${i}`}
            role="option"
            aria-selected={i === active}
            onMouseMove={() => setActive(i)}
            onClick={() => onSelect?.(c)}
            className={cn("flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-small", i === active && "bg-[color-mix(in_oklab,var(--app-accent)_16%,transparent)]")}
          >
            <span>{c.label}{c.group && <span className="ml-2 text-caption text-subtle-foreground">{c.group}</span>}</span>
            {c.hint && <kbd className="rounded border border-border px-1.5 font-mono text-caption text-muted-foreground">{c.hint}</kbd>}
          </li>
        ))}
        {shown.length === 0 && <li role="presentation" className="px-3 py-6 text-center text-small text-muted-foreground">Nothing matches “{query}”.</li>}
      </ul>
    </div>
  );
}

/**
 * VibeBox Motion · Command Menu
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export { CommandMenu, type CommandMenuProps } from "./command-menu.client";