CategoryPicker

"use client";

import { Popover } from "@base-ui-components/react/popover";
import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { Button } from "@/components/ledger/button";
import { ChevronDownIcon, MagnifyingGlassIcon, SparklesIcon } from "@/components/ledger/icons";

export type CategoryNode = {
  id: string;
  label: string;
  children?: CategoryNode[];
};

export interface CategoryPickerProps {
  className?: string;
  /** The preview count is shown before the rule is applied, never after. */
  onCreateRule?: (categoryId: string) => { matchCount: number; description: string };
  onValueChange: (id: string) => void;
  recents?: string[];
  tree: CategoryNode[];
  value: string | null;
}

/**
 * Categorizing one transaction and offering to categorize the other 40 like
 * it is the highest-leverage interaction in bookkeeping software. The rule
 * preview shows the match count *before* applying.
 */
export function CategoryPicker({
  tree,
  value,
  onValueChange,
  recents = [],
  onCreateRule,
  className,
}: CategoryPickerProps) {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [rulePreview, setRulePreview] = React.useState<{
    matchCount: number;
    description: string;
  } | null>(null);

  const flat = React.useMemo(() => flatten(tree), [tree]);
  const selected = flat.find((n) => n.id === value);
  const filtered = query ? flat.filter((n) => n.label.toLowerCase().includes(query.toLowerCase())) : flat;

  return (
    <Popover.Root onOpenChange={setOpen} open={open}>
      <Popover.Trigger
        aria-label={selected ? `Category: ${selected.label}` : "Choose a category"}
        className={cn(
          "inline-flex h-8 items-center gap-2 rounded-sm border border-border bg-surface px-3",
          "text-label transition-colors duration-1 ease-standard hover:bg-surface-hover",
          className,
        )}
      >
        {selected?.label ?? "Uncategorized"}
        <ChevronDownIcon aria-hidden="true" className="size-3.5 text-text-tertiary" />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner align="start" className="z-dropdown" sideOffset={8}>
          <Popover.Popup
            className="w-[320px] overflow-hidden rounded-md border border-border bg-surface-raised shadow-elevation-3"
            style={{ transformOrigin: "var(--transform-origin)" }}
          >
            <div className="flex items-center gap-2 border-b border-border-subtle px-3">
              <MagnifyingGlassIcon aria-hidden="true" className="size-4 text-text-tertiary" />
              <input
                aria-label="Search categories"
                autoFocus
                className="h-10 flex-1 bg-transparent text-body outline-none"
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search categories"
                value={query}
              />
            </div>
            <div className="max-h-[280px] overflow-y-auto py-1 scrollbar-thin">
              {!query && recents.length > 0 ? (
                <>
                  <p className="px-3 py-1 text-caption text-text-tertiary">Recent</p>
                  {recents.map((id) => {
                    const node = flat.find((n) => n.id === id);
                    if (!node) return null;
                    return (
                      <Option
                        key={`r-${id}`}
                        node={node}
                        onSelect={() => {
                          onValueChange(id);
                          setRulePreview(onCreateRule?.(id) ?? null);
                        }}
                        selected={id === value}
                      />
                    );
                  })}
                </>
              ) : null}
              {filtered.map((n) => (
                <Option
                  key={n.id}
                  node={n}
                  onSelect={() => {
                    onValueChange(n.id);
                    setRulePreview(onCreateRule?.(n.id) ?? null);
                  }}
                  selected={n.id === value}
                />
              ))}
            </div>

            {rulePreview ? (
              <div className="ledger-crossfade border-t border-border-subtle bg-accent-subtle p-3">
                <p className="flex items-start gap-2 text-caption text-text-primary">
                  <SparklesIcon aria-hidden="true" className="mt-0.5 size-3.5 shrink-0 text-accent" />
                  {rulePreview.description} — this would recategorize{" "}
                  <span className="numeric font-medium">{rulePreview.matchCount}</span> other transactions.
                </p>
                <div className="mt-2 flex gap-2">
                  <Button onClick={() => setRulePreview(null)} size="sm" variant="primary">
                    Create the rule
                  </Button>
                  <Button onClick={() => setRulePreview(null)} size="sm" variant="ghost">
                    Just this one
                  </Button>
                </div>
              </div>
            ) : null}
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

type FlatNode = CategoryNode & { depth: number };

function flatten(nodes: CategoryNode[], depth = 0): FlatNode[] {
  return nodes.flatMap((n) => [{ ...n, depth }, ...(n.children ? flatten(n.children, depth + 1) : [])]);
}

function Option({ node, selected, onSelect }: { node: FlatNode; selected: boolean; onSelect: () => void }) {
  return (
    <button
      className={cn(
        "block w-full px-3 py-2 text-left text-body",
        "transition-colors duration-1 ease-standard hover:bg-surface-hover",
        selected && "bg-surface-selected",
        node.children && node.depth === 0 && "font-medium",
      )}
      onClick={onSelect}
      style={{ paddingLeft: 12 + node.depth * 16 }}
      type="button"
    >
      {node.label}
    </button>
  );
}