Command Dialog

"use client";

import { useId, useMemo, useState, type KeyboardEvent, type ReactNode } from "react";
import { Dialog } from "radix-ui";
import { cn } from "@/lib/utils";

export interface CommandItem {
  label: string;
  group: string;
  shortcut?: string;
}

export interface CommandDialogProps {
  trigger?: ReactNode;
  defaultOpen?: boolean;
  items?: CommandItem[];
  onSelect?: (item: CommandItem) => void;
  da?: string;
}

const DEFAULT_ITEMS: CommandItem[] = [
  { label: "New project", group: "Create", shortcut: "N" },
  { label: "New page", group: "Create", shortcut: "P" },
  { label: "Upload images", group: "Create", shortcut: "U" },
  { label: "Go to Projects", group: "Navigate" },
  { label: "Go to Settings", group: "Navigate" },
  { label: "Switch template", group: "Site" },
  { label: "Publish site", group: "Site", shortcut: "⇧P" },
];

/** Command palette (Radix Dialog + listbox): a square panel near the top with a large borderless search, grouped results under mono headings, arrow-key navigation with an inverted active row and shortcut hints. */
export function CommandDialog({ trigger, defaultOpen, items = DEFAULT_ITEMS, onSelect, da = "mono-clean" }: CommandDialogProps) {
  const id = useId();
  const [open, setOpen] = useState(defaultOpen ?? false);
  const [q, setQ] = useState("");
  const [active, setActive] = useState(0);
  const list = useMemo(() => items.filter((i) => i.label.toLowerCase().includes(q.trim().toLowerCase())), [items, q]);
  const groups = [...new Set(list.map((i) => i.group))];
  const choose = (it: CommandItem | undefined) => {
    if (!it) return;
    onSelect?.(it);
    setOpen(false);
  };
  const key = (e: KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive((a) => Math.min(list.length - 1, a + 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((a) => Math.max(0, a - 1));
    } else if (e.key === "Enter") choose(list[active]);
  };
  return (
    <Dialog.Root
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        setQ("");
        setActive(0);
      }}
    >
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Dialog.Portal>
        <Dialog.Overlay
          data-da={da}
          className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <Dialog.Content
          data-da={da}
          className="fixed top-[12vh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 bg-da-surface text-da-surface-fg shadow-da-lg outline-none transition-[opacity,translate] duration-(--da-duration) starting:translate-y-2 starting:opacity-0 motion-reduce:transition-none"
        >
          <Dialog.Title className="sr-only">Command palette</Dialog.Title>
          <Dialog.Description className="sr-only">Type to filter commands, use arrow keys and Enter to run.</Dialog.Description>
          <input
            autoFocus
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              setActive(0);
            }}
            onKeyDown={key}
            role="combobox"
            aria-expanded
            aria-controls={`${id}-l`}
            aria-activedescendant={list[active] ? `${id}-${active}` : undefined}
            aria-label="Search commands"
            placeholder="Type a command…"
            className="h-16 w-full border-b border-da-border-strong bg-transparent px-5 text-xl outline-none placeholder:text-da-muted-fg"
          />
          <ul id={`${id}-l`} role="listbox" aria-label="Commands" className="max-h-80 overflow-y-auto py-2">
            {groups.map((g) => (
              <li key={g} role="presentation">
                <p className="px-5 pt-3 pb-1 font-da-mono text-[10px] tracking-da-label text-da-muted-fg uppercase">{g}</p>
                <ul role="group" aria-label={g}>
                  {list
                    .filter((i) => i.group === g)
                    .map((it) => {
                      const idx = list.indexOf(it);
                      return (
                        <li
                          key={it.label}
                          id={`${id}-${idx}`}
                          role="option"
                          aria-selected={idx === active}
                          onMouseEnter={() => setActive(idx)}
                          onClick={() => choose(it)}
                          className={cn("flex cursor-pointer items-center justify-between px-5 py-2.5", idx === active && "bg-da-fg text-da-bg")}
                        >
                          {it.label}
                          {it.shortcut && <kbd className="font-da-mono text-[11px] opacity-70">{it.shortcut}</kbd>}
                        </li>
                      );
                    })}
                </ul>
              </li>
            ))}
            {!list.length && <li className="px-5 py-6 text-da-muted-fg">No command matches “{q}”.</li>}
          </ul>
          <p className="flex gap-4 border-t border-da-border px-5 py-2 font-da-mono text-[10px] tracking-da-label text-da-muted-fg uppercase">
            <span>↑↓ Navigate</span>
            <span>↵ Run</span>
            <span>Esc Close</span>
          </p>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default CommandDialog;