CurrencySelect

"use client";

import { Popover } from "@base-ui-components/react/popover";
import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { CURRENCY_FLAGS } from "@/components/ledger/currency-badge";
import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@/components/ledger/icons";

export type CurrencyOption = { code: string; name: string; symbol: string };

export const COMMON_CURRENCIES: CurrencyOption[] = [
  { code: "USD", name: "US Dollar", symbol: "$" },
  { code: "EUR", name: "Euro", symbol: "€" },
  { code: "GBP", name: "British Pound", symbol: "£" },
  { code: "JPY", name: "Japanese Yen", symbol: "¥" },
  { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
  { code: "CAD", name: "Canadian Dollar", symbol: "$" },
  { code: "AUD", name: "Australian Dollar", symbol: "$" },
  { code: "SEK", name: "Swedish Krona", symbol: "kr" },
  { code: "NOK", name: "Norwegian Krone", symbol: "kr" },
  { code: "DKK", name: "Danish Krone", symbol: "kr" },
  { code: "SGD", name: "Singapore Dollar", symbol: "$" },
  { code: "HKD", name: "Hong Kong Dollar", symbol: "$" },
  { code: "MXN", name: "Mexican Peso", symbol: "$" },
  { code: "BRL", name: "Brazilian Real", symbol: "R$" },
  { code: "INR", name: "Indian Rupee", symbol: "₹" },
  { code: "ZAR", name: "South African Rand", symbol: "R" },
  { code: "KWD", name: "Kuwaiti Dinar", symbol: "KD" },
  { code: "PLN", name: "Polish Złoty", symbol: "zł" },
  { code: "CZK", name: "Czech Koruna", symbol: "Kč" },
  { code: "NZD", name: "New Zealand Dollar", symbol: "$" },
];

export interface CurrencySelectProps {
  className?: string;
  label?: string;
  onValueChange: (code: string) => void;
  options?: CurrencyOption[];
  /** Pinned at the top — the shortest path for most users. */
  recents?: string[];
  value: string;
}

/** Searchable by code, name and symbol. The code is always shown. */
export function CurrencySelect({
  value,
  onValueChange,
  recents = [],
  options = COMMON_CURRENCIES,
  className,
  label = "Currency",
}: CurrencySelectProps) {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");

  const filtered = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return options;
    return options.filter(
      (o) =>
        o.code.toLowerCase().includes(q) ||
        o.name.toLowerCase().includes(q) ||
        o.symbol.toLowerCase().includes(q),
    );
  }, [options, query]);

  const recentOptions = recents
    .map((code) => options.find((o) => o.code === code))
    .filter((o): o is CurrencyOption => Boolean(o));

  return (
    <Popover.Root onOpenChange={setOpen} open={open}>
      <Popover.Trigger
        aria-label={`${label}: ${value}`}
        className={cn(
          "inline-flex h-10 items-center gap-2 rounded-sm border border-border bg-surface px-3",
          "text-label font-medium transition-colors duration-1 ease-standard hover:bg-surface-hover",
          className,
        )}
      >
        {CURRENCY_FLAGS[value] ? <span aria-hidden="true">{CURRENCY_FLAGS[value]}</span> : null}
        <span className="reference-numeric">{value}</span>
        <ChevronDownIcon aria-hidden="true" className="size-3.5 text-text-tertiary" />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner align="end" className="z-dropdown" sideOffset={8}>
          <Popover.Popup
            className={cn(
              "w-[280px] overflow-hidden rounded-md border border-border bg-surface-raised shadow-elevation-3",
              "data-[open]:ledger-enter",
            )}
            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 currencies"
                autoFocus
                className="h-10 flex-1 bg-transparent text-body outline-none placeholder:text-text-disabled"
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search currencies"
                value={query}
              />
            </div>
            <div className="max-h-[300px] overflow-y-auto py-1 scrollbar-thin">
              {!query && recentOptions.length > 0 ? (
                <Group label="Recent">
                  {recentOptions.map((o) => (
                    <Option
                      key={`recent-${o.code}`}
                      onSelect={() => {
                        onValueChange(o.code);
                        setOpen(false);
                      }}
                      option={o}
                      selected={o.code === value}
                    />
                  ))}
                </Group>
              ) : null}
              <Group label={query ? "Results" : "All currencies"}>
                {filtered.map((o) => (
                  <Option
                    key={o.code}
                    onSelect={() => {
                      onValueChange(o.code);
                      setOpen(false);
                    }}
                    option={o}
                    selected={o.code === value}
                  />
                ))}
                {filtered.length === 0 ? (
                  <p className="px-3 py-4 text-caption text-text-secondary">No currency matches “{query}”.</p>
                ) : null}
              </Group>
            </div>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

function Group({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="py-1">
      <p className="px-3 pb-1 text-caption text-text-tertiary">{label}</p>
      {children}
    </div>
  );
}

function Option({
  option,
  selected,
  onSelect,
}: {
  option: CurrencyOption;
  selected: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      className={cn(
        "flex w-full items-center gap-2 px-3 py-2 text-left text-body",
        "transition-colors duration-1 ease-standard hover:bg-surface-hover",
        selected && "bg-surface-selected",
      )}
      onClick={onSelect}
      type="button"
    >
      <span aria-hidden="true" className="w-5">
        {CURRENCY_FLAGS[option.code] ?? ""}
      </span>
      <span className="reference-numeric w-10 font-medium">{option.code}</span>
      <span className="flex-1 truncate text-text-secondary">{option.name}</span>
      {selected ? <CheckIcon aria-hidden="true" className="size-4 text-accent" /> : null}
    </button>
  );
}