Command Palette

"use client";

import { useEffect, useId, useMemo, useState, type ComponentType, type SVGProps } from "react";
import { Dialog } from "radix-ui";
import { AlarmClock, BellOff, CornerDownLeft, FileText, Plus, Search, Siren, Users } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CommandPaletteItem {
  id: string;
  label: string;
  group: string;
  icon?: ComponentType<SVGProps<SVGSVGElement>>;
  shortcut?: string;
  keywords?: string;
}

export interface CommandPaletteProps {
  items?: CommandPaletteItem[];
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** Called with the chosen item; the palette closes afterwards. */
  onSelect?: (item: CommandPaletteItem) => void;
  /** Open with ⌘K / Ctrl+K. */
  hotkey?: boolean;
  placeholder?: string;
  da?: string;
}

const DEFAULT_ITEMS: CommandPaletteItem[] = [
  { id: "new", label: "Declare incident", group: "Actions", icon: Siren, shortcut: "I" },
  { id: "ack", label: "Acknowledge all my alerts", group: "Actions", icon: Plus, shortcut: "A" },
  { id: "snooze", label: "Snooze notifications for 1 hour", group: "Actions", icon: BellOff },
  { id: "override", label: "Create on-call override", group: "Actions", icon: AlarmClock },
  { id: "inc-2481", label: "INC-2481 · Elevated 5xx on checkout-api", group: "Incidents", icon: FileText, keywords: "checkout payments" },
  { id: "inc-2480", label: "INC-2480 · Webhook delivery delays", group: "Incidents", icon: FileText, keywords: "webhooks eu" },
  { id: "payments", label: "Payments · Primary rotation", group: "Schedules", icon: Users },
  { id: "platform", label: "Platform on-call", group: "Schedules", icon: Users },
];

/** ⌘K command palette (Radix Dialog): filter-as-you-type, grouped results, arrow-key navigation, Enter to run. */
export function CommandPalette({
  items = DEFAULT_ITEMS,
  open,
  onOpenChange,
  onSelect,
  hotkey = true,
  placeholder = "Type a command or search…",
  da = "minimal",
}: CommandPaletteProps) {
  const [inner, setInner] = useState(false);
  const isOpen = open ?? inner;
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  const listId = useId();

  const setOpen = (v: boolean) => {
    setInner(v);
    onOpenChange?.(v);
    if (!v) {
      setQuery("");
      setActive(0);
    }
  };

  useEffect(() => {
    if (!hotkey) return;
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setInner((o) => !o);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [hotkey]);

  const results = useMemo(() => {
    const q = query.trim().toLowerCase();
    return q ? items.filter((i) => `${i.label} ${i.keywords ?? ""} ${i.group}`.toLowerCase().includes(q)) : items;
  }, [items, query]);
  const groups = [...new Set(results.map((r) => r.group))];
  const run = (item?: CommandPaletteItem) => {
    if (!item) return;
    onSelect?.(item);
    setOpen(false);
  };

  return (
    <Dialog.Root open={isOpen} onOpenChange={setOpen}>
      <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="da-stroke fixed top-[15vh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-lg outline-none transition-[opacity,scale] duration-(--da-duration) ease-da starting:scale-[0.98] starting:opacity-0 motion-reduce:transition-none"
        >
          <Dialog.Title className="sr-only">Command palette</Dialog.Title>
          <Dialog.Description className="sr-only">Search commands, incidents and schedules. Use arrow keys and Enter.</Dialog.Description>
          <div className="flex items-center gap-2.5 border-b border-da-border px-4">
            <Search aria-hidden className="size-4 text-da-muted-fg" />
            <input
              autoFocus
              value={query}
              onChange={(e) => {
                setQuery(e.target.value);
                setActive(0);
              }}
              onKeyDown={(e) => {
                if (e.key === "ArrowDown") {
                  e.preventDefault();
                  setActive((a) => Math.min(a + 1, results.length - 1));
                } else if (e.key === "ArrowUp") {
                  e.preventDefault();
                  setActive((a) => Math.max(a - 1, 0));
                } else if (e.key === "Enter") {
                  e.preventDefault();
                  run(results[active]);
                }
              }}
              role="combobox"
              aria-expanded
              aria-controls={listId}
              aria-activedescendant={results[active] ? `${listId}-${results[active].id}` : undefined}
              aria-label="Search commands"
              placeholder={placeholder}
              className="h-12 flex-1 bg-transparent text-[15px] outline-none placeholder:text-da-muted-fg"
            />
            <kbd className="rounded-[4px] px-1.5 font-da-mono text-[11px] text-da-muted-fg ring-1 ring-da-border">esc</kbd>
          </div>
          <div id={listId} role="listbox" aria-label="Results" className="max-h-80 overflow-y-auto p-1.5">
            {results.length === 0 && <p className="px-3 py-8 text-center text-sm text-da-muted-fg">No results for “{query}”.</p>}
            {groups.map((g) => (
              <div key={g} role="group" aria-label={g}>
                <p aria-hidden className="px-2.5 pt-2 pb-1 text-[11px] font-medium text-da-muted-fg">
                  {g}
                </p>
                {results
                  .filter((r) => r.group === g)
                  .map((r) => {
                    const i = results.indexOf(r);
                    const Icon = r.icon;
                    return (
                      <div
                        key={r.id}
                        id={`${listId}-${r.id}`}
                        role="option"
                        aria-selected={i === active}
                        onMouseMove={() => setActive(i)}
                        onClick={() => run(r)}
                        className={cn("flex cursor-pointer items-center gap-3 rounded-da-md px-2.5 py-2 text-sm", i === active && "bg-da-muted")}
                      >
                        {Icon && <Icon aria-hidden className="size-4 text-da-muted-fg" />}
                        <span className="min-w-0 flex-1 truncate">{r.label}</span>
                        {r.shortcut && <kbd className="rounded-[4px] px-1.5 font-da-mono text-[11px] text-da-muted-fg ring-1 ring-da-border">{r.shortcut}</kbd>}
                        {i === active && !r.shortcut && <CornerDownLeft aria-hidden className="size-3.5 text-da-muted-fg" />}
                      </div>
                    );
                  })}
              </div>
            ))}
          </div>
          <div className="flex items-center gap-4 border-t border-da-border bg-da-surface-2/60 px-4 py-2 text-[11px] text-da-muted-fg">
            <span>↑↓ navigate</span>
            <span>↵ run</span>
            <span className="ml-auto">{results.length} results</span>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default CommandPalette;