CommandPalette

"use client";

import { Dialog } from "@base-ui-components/react/dialog";
import { Command } from "cmdk";
import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDateShort } from "@/lib/ledger/fiscal-period";
import { parseMoneyInput } from "@/lib/ledger/format-money";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";

export type CommandItem = {
  id: string;
  group: string;
  label: string;
  hint?: string;
  amount?: MoneyValue;
  date?: Date;
  onSelect: () => void;
};

export interface CommandPaletteProps {
  items: CommandItem[];
  onOpenChange: (open: boolean) => void;
  open: boolean;
}

/**
 * **Zero animation. Opens instantly.** Used hundreds of times a day — this
 * is the canonical Tier 0 component and the clearest demonstration of the
 * frequency law.
 *
 * Money-aware search: `1240` finds transactions with that amount, `>1000`
 * filters by magnitude, and a date range parses.
 */
export function CommandPalette({ items, open, onOpenChange }: CommandPaletteProps) {
  const [query, setQuery] = React.useState("");

  React.useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        onOpenChange(!open);
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onOpenChange]);

  const filtered = React.useMemo(() => moneyAwareFilter(items, query), [items, query]);
  const groups = React.useMemo(() => {
    const map = new Map<string, CommandItem[]>();
    for (const item of filtered) {
      const list = map.get(item.group) ?? [];
      list.push(item);
      map.set(item.group, list);
    }
    return [...map.entries()];
  }, [filtered]);

  return (
    <Dialog.Root onOpenChange={onOpenChange} open={open}>
      <Dialog.Portal>
        {/* No animation classes anywhere in this component. Deliberate. */}
        <Dialog.Backdrop className="fixed inset-0 z-overlay bg-[oklch(0.21_0.02_265/0.4)]" />
        <Dialog.Popup
          className={cn(
            "fixed left-1/2 top-[15vh] z-dialog w-[calc(100vw-32px)] max-w-[560px] -translate-x-1/2",
            "overflow-hidden rounded-md border border-border bg-surface-raised shadow-elevation-4",
          )}
        >
          <Dialog.Title className="sr-only">Command palette</Dialog.Title>
          <Dialog.Description className="sr-only">
            Search transactions, accounts and actions. Type an amount to find it, or a comparison like greater
            than 1000.
          </Dialog.Description>
          <Command loop shouldFilter={false}>
            <Command.Input
              className="h-12 w-full border-b border-border-subtle bg-transparent px-4 text-body outline-none placeholder:text-text-disabled"
              onValueChange={setQuery}
              placeholder="Search, or type an amount (1240) or a comparison (>1000)"
              value={query}
            />
            <Command.List className="max-h-[320px] overflow-y-auto p-2 scrollbar-thin">
              <Command.Empty className="px-3 py-6 text-center text-body text-text-secondary">
                Nothing matches “{query}”.
              </Command.Empty>
              {groups.map(([group, groupItems]) => (
                <Command.Group
                  className="[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-1 [&_[cmdk-group-heading]]:text-caption [&_[cmdk-group-heading]]:text-text-tertiary"
                  heading={group}
                  key={group}
                >
                  {groupItems.map((item) => (
                    <Command.Item
                      className="flex cursor-pointer items-center gap-3 rounded-xs px-3 py-2 text-body data-[selected=true]:bg-surface-hover"
                      key={item.id}
                      onSelect={() => {
                        item.onSelect();
                        onOpenChange(false);
                      }}
                      value={item.id}
                    >
                      <span className="min-w-0 flex-1 truncate">{item.label}</span>
                      {item.date ? (
                        <span className="numeric shrink-0 text-caption text-text-tertiary">
                          {formatDateShort(item.date)}
                        </span>
                      ) : null}
                      {item.amount ? <Money accounting value={item.amount} /> : null}
                      {item.hint ? (
                        <span className="shrink-0 text-caption text-text-tertiary">{item.hint}</span>
                      ) : null}
                    </Command.Item>
                  ))}
                </Command.Group>
              ))}
            </Command.List>
          </Command>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

/** `>1000`, `<50`, `1240`, or plain text. */
function moneyAwareFilter(items: CommandItem[], query: string): CommandItem[] {
  const q = query.trim();
  if (!q) return items;

  const comparison = /^([<>])\s*([\d.,]+)$/.exec(q);
  if (comparison) {
    const threshold = parseMoneyInput(comparison[2], "USD");
    if (threshold != null) {
      return items.filter((i) => {
        if (!i.amount) return false;
        const magnitude = Math.abs(Number(i.amount.amount));
        return comparison[1] === ">" ? magnitude > threshold : magnitude < threshold;
      });
    }
  }

  const asAmount = /^[\d.,]+$/.test(q) ? parseMoneyInput(q, "USD") : null;
  const lower = q.toLowerCase();

  return items.filter((i) => {
    if (i.label.toLowerCase().includes(lower)) return true;
    if (asAmount != null && i.amount) {
      return Math.abs(Number(i.amount.amount)) === Math.abs(asAmount);
    }
    return false;
  });
}