"use client";

import { CopyButton } from "@aur-ui/ui/components/copy-button";
import { cn } from "@aur-ui/ui/lib/utils";
import { EyeIcon, EyeOffIcon } from "lucide-react";
import { useState } from "react";

/**
 * Read-only secret display (API keys, tokens) — masked by default with the
 * real tail kept visible for recognition, an eye toggle to reveal, and a
 * copy affordance that always copies the full value. Mono + slashed-zero
 * comes from the global mono treatment.
 */
export function SecretField({
  value,
  revealed: revealedProp,
  defaultRevealed = false,
  onRevealedChange,
  /** Trailing characters left readable while masked. 0 masks everything. */
  visibleChars = 4,
  revealLabel = "Reveal",
  hideLabel = "Hide",
  copyLabel = "Copy",
  className,
}: {
  value: string;
  revealed?: boolean;
  defaultRevealed?: boolean;
  onRevealedChange?: (revealed: boolean) => void;
  visibleChars?: number;
  revealLabel?: string;
  hideLabel?: string;
  copyLabel?: string;
  className?: string;
}) {
  const [uncontrolled, setUncontrolled] = useState(defaultRevealed);
  const revealed = revealedProp ?? uncontrolled;
  const setRevealed = (next: boolean) => {
    if (revealedProp === undefined) setUncontrolled(next);
    onRevealedChange?.(next);
  };

  const tail = visibleChars > 0 ? value.slice(-visibleChars) : "";
  const masked = `••••••••••••${tail}`;

  return (
    <span
      data-slot="secret-field"
      className={cn(
        "inline-flex h-9 max-w-full items-center gap-1 rounded-control bg-ink-wash pr-1 pl-3",
        className,
      )}
    >
      <span className="min-w-0 truncate font-mono text-sm text-ink-900 select-all">
        {revealed ? value : masked}
      </span>
      <button
        type="button"
        aria-label={revealed ? hideLabel : revealLabel}
        aria-pressed={revealed}
        onClick={() => setRevealed(!revealed)}
        className="ml-1 inline-flex size-7 shrink-0 items-center justify-center rounded-control text-ink-400 transition-colors hover:bg-ink-wash hover:text-ink-900"
      >
        {revealed ? (
          <EyeOffIcon className="size-3.5" />
        ) : (
          <EyeIcon className="size-3.5" />
        )}
      </button>
      <CopyButton value={value} ariaLabel={copyLabel} className="shrink-0" />
    </span>
  );
}