Reference

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { CheckIcon, DocumentDuplicateIcon } from "@/components/ledger/icons";
import { Tooltip } from "@/components/ledger/tooltip";

export interface ReferenceProps extends React.ComponentPropsWithoutRef<"span"> {
  copyable?: boolean;
  label?: string;
  /** Truncate in the middle; the tail is the discriminating part. */
  truncate?: boolean;
  value: string;
}

/**
 * Transaction and account IDs — the strings humans transcribe into other
 * systems. `zero` slashes the 0 and `ss02` separates 1 / l / I, so nobody
 * mistypes an IBAN. Copy takes the raw value.
 */
export const Reference = React.forwardRef<HTMLSpanElement, ReferenceProps>(
  ({ className, value, truncate = true, copyable = true, label = "Reference", ...props }, ref) => {
    const [copied, setCopied] = React.useState(false);
    const shown = truncate && value.length > 18 ? `${value.slice(0, 8)}…${value.slice(-4)}` : value;

    const copy = React.useCallback(() => {
      navigator.clipboard?.writeText(value).then(
        () => {
          setCopied(true);
          setTimeout(() => setCopied(false), 1600);
        },
        () => setCopied(false),
      );
    }, [value]);

    return (
      <span className={cn("inline-flex items-center gap-1", className)} ref={ref} {...props}>
        <Tooltip content={shown === value ? null : value}>
          <span className="reference-numeric text-caption text-text-secondary">{shown}</span>
        </Tooltip>
        {copyable ? (
          <button
            aria-label={copied ? `${label} copied` : `Copy ${label.toLowerCase()} ${value}`}
            className={cn(
              "press grid size-6 place-items-center rounded-xs text-text-tertiary",
              "hover:bg-surface-hover",
            )}
            onClick={copy}
            type="button"
          >
            {copied ? (
              <CheckIcon aria-hidden="true" className="size-3 text-positive" />
            ) : (
              <DocumentDuplicateIcon aria-hidden="true" className="size-3" />
            )}
          </button>
        ) : null}
      </span>
    );
  },
);
Reference.displayName = "Reference";

/** Account numbers show last 4 only; the mask is aria-hidden. */
export function MaskedAccount({ last4, className }: { last4: string; className?: string }) {
  return (
    <span className={cn("reference-numeric relative text-caption text-text-secondary", className)}>
      <span aria-hidden="true">•••• {last4}</span>
      <span className="sr-only select-none">account ending {last4}</span>
    </span>
  );
}