"use client";

import { Copy } from "lucide-react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

/** 长单号/流水号：单行截断；点击复制全文，悬停可看全文 */
export function WalletCellMonoId({
  value,
  empty = "—",
  copyHint,
}: {
  value: string | null | undefined;
  empty?: string;
  /** 用于 toast / 无障碍：如「流水号」「主站流水号」 */
  copyHint?: string;
}): React.ReactElement {
  const { t } = useTranslation("wallet");
  if (value == null || value === "") {
    return <span className="text-muted-foreground">{empty}</span>;
  }

  const copy = async (e: React.MouseEvent): Promise<void> => {
    e.stopPropagation();
    try {
      await navigator.clipboard.writeText(value);
      toast.success(
        copyHint
          ? t("copySuccess", { label: copyHint })
          : t("copySuccess", { label: "" }).trim(),
      );
    } catch {
      toast.error(t("copyFailed"));
    }
  };

  return (
    <button
      type="button"
      className="group inline-flex min-w-0 w-full max-w-full items-center gap-1 rounded-md border border-transparent px-0.5 py-0.5 text-left font-mono text-xs transition-colors hover:border-border hover:bg-muted/60"
      title={value}
      aria-label={copyHint ?? t("copyTxnNo")}
      onClick={(e) => void copy(e)}
    >
      <span className="min-w-0 flex-1 truncate">{value}</span>
      <Copy
        className="size-3.5 shrink-0 text-muted-foreground opacity-60 group-hover:opacity-100"
        aria-hidden
      />
    </button>
  );
}