PayeeSelect

"use client";

import { Popover } from "@base-ui-components/react/popover";
import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { EntityMark } from "@/components/ledger/entity-mark";
import { ChevronDownIcon, MagnifyingGlassIcon, PlusIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { MaskedAccount } from "@/components/ledger/reference";

export type Payee = {
  id: string;
  name: string;
  last4: string;
  reference?: string;
  lastPaid?: { amount: MoneyValue; date: Date };
};

export interface PayeeSelectProps {
  className?: string;
  onCreate?: (name: string) => void;
  onValueChange: (id: string) => void;
  payees: Payee[];
  value: string | null;
}

/**
 * Last-paid amount and date inline — the single most useful piece of context
 * when choosing a recipient. The new-payee flow is inline, not a route.
 */
export function PayeeSelect({ payees, value, onValueChange, onCreate, className }: PayeeSelectProps) {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const selected = payees.find((p) => p.id === value);

  const filtered = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return payees;
    return payees.filter((p) =>
      [p.name, p.last4, p.reference ?? ""].some((f) => f.toLowerCase().includes(q)),
    );
  }, [payees, query]);

  return (
    <Popover.Root onOpenChange={setOpen} open={open}>
      <Popover.Trigger
        aria-label={selected ? `Recipient: ${selected.name}` : "Choose a recipient"}
        className={cn(
          "flex h-12 w-full items-center gap-3 rounded-md border border-border bg-surface px-3",
          "text-left transition-colors duration-1 ease-standard hover:border-border-strong",
          className,
        )}
      >
        {selected ? (
          <>
            <EntityMark category="company" name={selected.name} size={24} />
            <span className="min-w-0 flex-1">
              <span className="block truncate text-body">{selected.name}</span>
            </span>
            <MaskedAccount last4={selected.last4} />
          </>
        ) : (
          <span className="flex-1 text-body text-text-tertiary">Choose a recipient</span>
        )}
        <ChevronDownIcon aria-hidden="true" className="size-4 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-[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 recipients"
                autoFocus
                className="h-10 flex-1 bg-transparent text-body outline-none placeholder:text-text-disabled"
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search name, account or reference"
                value={query}
              />
            </div>
            <div className="max-h-[320px] overflow-y-auto py-1 scrollbar-thin">
              {filtered.map((p) => (
                <button
                  className={cn(
                    "flex w-full items-center gap-3 px-3 py-2 text-left",
                    "transition-colors duration-1 ease-standard hover:bg-surface-hover",
                    p.id === value && "bg-surface-selected",
                  )}
                  key={p.id}
                  onClick={() => {
                    onValueChange(p.id);
                    setOpen(false);
                  }}
                  type="button"
                >
                  <EntityMark category="company" name={p.name} size={32} />
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-body">{p.name}</span>
                    <MaskedAccount last4={p.last4} />
                  </span>
                  {p.lastPaid ? (
                    <span className="text-right">
                      <Money size="xs" tone="secondary" value={p.lastPaid.amount} />
                      <span className="block text-caption text-text-tertiary">
                        {formatDate(p.lastPaid.date)}
                      </span>
                    </span>
                  ) : null}
                </button>
              ))}
              {filtered.length === 0 && onCreate ? (
                <button
                  className="flex w-full items-center gap-2 px-3 py-3 text-left text-body text-accent hover:bg-surface-hover"
                  onClick={() => {
                    onCreate(query);
                    setOpen(false);
                  }}
                  type="button"
                >
                  <PlusIcon aria-hidden="true" className="size-4" />
                  Add “{query}” as a new recipient
                </button>
              ) : null}
            </div>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}