AccountPicker

"use client";

import { Popover } from "@base-ui-components/react/popover";
import * as React from "react";
import type { Account } from "@/lib/ledger/accounting.types";
import { cn } from "@/lib/ledger/cn";
import { ChevronDownIcon, LockClosedIcon, MagnifyingGlassIcon } from "@/components/ledger/icons";

export interface AccountPickerProps {
  accounts: Account[];
  className?: string;
  /** Inactive accounts are hidden by default but reachable by search. */
  includeInactive?: boolean;
  label?: string;
  onValueChange: (account: Account) => void;
  value: string | null;
}

/**
 * Shows the normal balance (Dr / Cr) — a user posting to an unfamiliar
 * account needs to know which side increases it.
 *
 * Non-postable rollup accounts are visibly disabled with the reason:
 * posting to a rollup is a data-integrity failure that surfaces months
 * later at close.
 */
export function AccountPicker({
  accounts,
  value,
  onValueChange,
  includeInactive = false,
  className,
  label = "Account",
}: AccountPickerProps) {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const selected = accounts.find((a) => a.id === value);

  const filtered = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    return accounts.filter((a) => {
      if (a.status === "archived") return false;
      if (a.status === "inactive" && !includeInactive && !q) return false;
      if (!q) return true;
      return a.number.toLowerCase().startsWith(q) || a.name.toLowerCase().includes(q) || a.number.includes(q);
    });
  }, [accounts, query, includeInactive]);

  const grouped = React.useMemo(() => {
    const map = new Map<string, Account[]>();
    for (const a of filtered) {
      const key = `${a.type}${a.subType ? ` · ${a.subType}` : ""}`;
      const list = map.get(key) ?? [];
      list.push(a);
      map.set(key, list);
    }
    return [...map.entries()];
  }, [filtered]);

  return (
    <Popover.Root onOpenChange={setOpen} open={open}>
      <Popover.Trigger
        aria-label={
          selected ? `${label}: ${selected.number} ${selected.name}` : `Choose an ${label.toLowerCase()}`
        }
        className={cn(
          "flex h-10 w-full items-center gap-2 rounded-sm border border-border bg-surface px-3",
          "text-left transition-colors duration-1 ease-standard hover:border-border-strong",
          className,
        )}
      >
        {selected ? (
          <>
            <span className="reference-numeric shrink-0 text-caption text-text-tertiary">
              {selected.number}
            </span>
            <span className="min-w-0 flex-1 truncate text-body">{selected.name}</span>
            <NormalBadge normal={selected.normalBalance} />
          </>
        ) : (
          <span className="flex-1 text-body text-text-tertiary">Choose an account</span>
        )}
        <ChevronDownIcon aria-hidden="true" className="size-4 shrink-0 text-text-tertiary" />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner align="start" className="z-dropdown" sideOffset={8}>
          <Popover.Popup
            className="w-[var(--anchor-width)] min-w-[360px] 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 accounts"
                autoFocus
                className="reference-numeric h-10 flex-1 bg-transparent text-body outline-none"
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Account number or name"
                value={query}
              />
            </div>
            <div className="max-h-[320px] overflow-y-auto py-1 scrollbar-thin">
              {grouped.map(([group, list]) => (
                <div key={group}>
                  <p className="px-3 py-1 text-caption capitalize text-text-tertiary">{group}</p>
                  {list.map((a) => (
                    <button
                      className={cn(
                        "flex w-full items-center gap-2 px-3 py-2 text-left",
                        "transition-colors duration-1 ease-standard",
                        a.isPostable ? "hover:bg-surface-hover" : "cursor-not-allowed text-text-disabled",
                        a.id === value && "bg-surface-selected",
                      )}
                      disabled={!a.isPostable}
                      key={a.id}
                      onClick={() => {
                        onValueChange(a);
                        setOpen(false);
                      }}
                      style={{ paddingLeft: 12 + (a.parentId ? 16 : 0) }}
                      title={
                        a.isPostable
                          ? `Maps to ${a.statementMapping}`
                          : "Rollup account — entries cannot post here"
                      }
                      type="button"
                    >
                      <span className="reference-numeric w-12 shrink-0 text-caption text-text-tertiary">
                        {a.number}
                      </span>
                      <span className="min-w-0 flex-1 truncate text-body">
                        {a.name}
                        {a.isContra ? (
                          <span className="ml-1 text-caption text-text-tertiary">(contra)</span>
                        ) : null}
                        {a.status === "inactive" ? (
                          <span className="ml-1 text-caption text-text-tertiary">· inactive</span>
                        ) : null}
                      </span>
                      {a.isPostable ? (
                        <NormalBadge normal={a.normalBalance} />
                      ) : (
                        <span className="flex items-center gap-1 text-caption text-text-tertiary">
                          <LockClosedIcon aria-hidden="true" className="size-3" />
                          Rollup
                        </span>
                      )}
                    </button>
                  ))}
                </div>
              ))}
              {filtered.length === 0 ? (
                <p className="px-3 py-6 text-center text-body text-text-secondary">
                  No account matches “{query}”.
                </p>
              ) : null}
            </div>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

function NormalBadge({ normal }: { normal: "debit" | "credit" }) {
  return (
    <span className="relative shrink-0 rounded-xs bg-surface-sunken px-1.5 py-0.5 text-caption text-text-secondary">
      <span aria-hidden="true">{normal === "debit" ? "Dr" : "Cr"}</span>
      <span className="sr-only select-none">normal balance {normal}</span>
    </span>
  );
}