Copy field

"use client";

import * as React from "react";
import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

type CopyFieldProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** The text shown and copied. */
  value: string;
  /** Optional label above the field. */
  label?: string;
  /** Mask the value with dots until revealed. */
  secret?: boolean;
  /** Accessible name for the copy button. */
  copyLabel?: string;
  /** Accessible name for the reveal toggle while hidden. */
  revealLabel?: string;
  /** How long the check mark stays, in ms. */
  timeout?: number;
};

/**
 * A read-only value in a muted, mono field with a copy button on the right.
 * Secrets stay masked until revealed; copying always writes the full value.
 */
export function CopyField({
  value,
  label,
  secret = false,
  copyLabel = "Copy",
  revealLabel = "Show value",
  timeout = 2000,
  className,
  ...props
}: CopyFieldProps) {
  const id = React.useId();
  const [shown, setShown] = React.useState(!secret);
  const [copied, setCopied] = React.useState(false);
  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);

  React.useEffect(() => () => clearTimeout(timer.current), []);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(value);
      setCopied(true);
      clearTimeout(timer.current);
      timer.current = setTimeout(() => setCopied(false), timeout);
    } catch {
      // Clipboard can be blocked (insecure context, permissions). The value is still visible or revealable.
    }
  };

  const CopyIconState = copied ? CheckIcon : CopyIcon;

  return (
    <div data-slot="copy-field" className={cn("flex w-full min-w-0 flex-col gap-1.5", className)} {...props}>
      {label ? (
        <label htmlFor={id} className="text-sm font-medium text-foreground">
          {label}
        </label>
      ) : null}
      <div className="flex h-8 min-w-0 items-center gap-0.5 rounded-md border bg-muted pr-0.5 transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50">
        <Input
          id={id}
          readOnly
          type={shown ? "text" : "password"}
          value={value}
          aria-label={label ? undefined : "Value to copy"}
          onFocus={(e) => e.currentTarget.select()}
          className="h-full flex-1 rounded-none border-0 bg-transparent px-2.5 font-mono text-sm text-foreground shadow-none focus-visible:border-transparent focus-visible:ring-0 md:text-sm dark:bg-transparent"
        />
        {secret && (
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-pressed={shown}
            aria-label={shown ? "Hide value" : revealLabel}
            onClick={() => setShown((s) => !s)}
            className="shrink-0 text-foreground/70 hover:text-foreground"
          >
            {shown ? <EyeOffIcon aria-hidden="true" /> : <EyeIcon aria-hidden="true" />}
          </Button>
        )}
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={copied ? "Copied" : copyLabel}
          data-copied={copied || undefined}
          onClick={copy}
          className="shrink-0 text-foreground/70 transition-colors hover:text-foreground"
        >
          <CopyIconState aria-hidden="true" />
        </Button>
        <span className="sr-only" aria-live="polite">
          {copied ? "Copied" : ""}
        </span>
      </div>
    </div>
  );
}