Secret

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { ComponentProps, ReactNode } from "react";
import "./secret.css";

export type SecretProps = Omit<ComponentProps<"div">, "children" | "onCopy"> & {
  /** The full secret. It is in the DOM and in props; masking is visual only. */
  value: string;
  /** Visible label, which also names the group. */
  label: ReactNode;
  /** Characters kept visible at the start while masked. */
  visibleStart?: number;
  /** Characters kept visible at the end while masked. */
  visibleEnd?: number;
  /** Seconds before a revealed value masks itself again. 0 keeps it revealed until toggled. */
  revealFor?: number;
  /** Called after the value reaches the clipboard. */
  onCopy?: () => void;
  /** Help text under the control. */
  hint?: ReactNode;
};

/** Fixed, so the mask never hints at the secret's length. */
const BULLETS = "•".repeat(8);
const COPIED_MS = 1600;

type CopyState = "idle" | "copied" | "failed";

function present(node: ReactNode): boolean {
  return node != null && node !== false && node !== "";
}

export function Secret({
  value,
  label,
  visibleStart = 4,
  visibleEnd = 4,
  revealFor = 0,
  onCopy,
  hint,
  className,
  ...rest
}: SecretProps) {
  const id = useId();
  const labelId = `${id}-label`;
  const hintId = `${id}-hint`;
  const controlRef = useRef<HTMLDivElement>(null);
  const [revealed, setRevealed] = useState(false);
  const [left, setLeft] = useState(0);
  const [copy, setCopy] = useState<CopyState>("idle");
  const [announce, setAnnounce] = useState("");

  // Auto re-mask: counts down whole seconds, then hides and says so.
  useEffect(() => {
    if (!revealed || revealFor <= 0) return;
    setLeft(Math.ceil(revealFor));
    const started = performance.now();
    const tick = window.setInterval(() => {
      const remaining = Math.ceil(revealFor - (performance.now() - started) / 1000);
      if (remaining <= 0) {
        setRevealed(false);
        setAnnounce("Hidden again");
      } else {
        setLeft(remaining);
      }
    }, 250);
    return () => window.clearInterval(tick);
  }, [revealed, revealFor]);

  // The copied or failed state returns to idle on its own.
  useEffect(() => {
    if (copy === "idle") return;
    const t = window.setTimeout(() => {
      setCopy("idle");
      // Cleared so the next copy is announced again.
      setAnnounce((a) => (a === "Copied" || a === "Copy failed" ? "" : a));
    }, COPIED_MS);
    return () => window.clearTimeout(t);
  }, [copy]);

  function toggle() {
    setAnnounce("");
    setLeft(Math.ceil(revealFor));
    setRevealed((r) => !r);
  }

  /** Last resort for browsers without the async clipboard: a throwaway textarea in this root. */
  function legacyCopy(text: string) {
    const root = controlRef.current;
    if (!root) return false;
    const active = document.activeElement;
    const area = document.createElement("textarea");
    area.value = text;
    area.setAttribute("readonly", "");
    area.setAttribute("aria-hidden", "true");
    area.style.position = "fixed";
    area.style.inset = "0 auto auto 0";
    area.style.opacity = "0";
    area.style.pointerEvents = "none";
    root.appendChild(area);
    area.select();
    let ok = false;
    try {
      ok = document.execCommand("copy");
    } catch {
      ok = false;
    }
    root.removeChild(area);
    if (active instanceof HTMLElement) active.focus();
    return ok;
  }

  async function handleCopy() {
    let ok = false;
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(value);
        ok = true;
      }
    } catch {
      ok = false;
    }
    if (!ok) ok = legacyCopy(value);
    setCopy(ok ? "copied" : "failed");
    setAnnounce(ok ? "Copied" : "Copy failed");
    if (ok) onCopy?.();
  }

  const showEnds = value.length > visibleStart + visibleEnd;
  const start = showEnds ? value.slice(0, visibleStart) : "";
  const end = showEnds && visibleEnd > 0 ? value.slice(-visibleEnd) : "";
  const hiddenText = end ? `Hidden value ending in ${end}` : "Hidden value";
  const copyLabel = copy === "copied" ? "Copied" : copy === "failed" ? "Copy failed" : "Copy value";

  return (
    <div
      {...rest}
      className={["eq-secret", className].filter(Boolean).join(" ")}
      data-state={revealed ? "revealed" : "masked"}
    >
      <span className="eq-secret-label" id={labelId}>
        {label}
      </span>
      <div
        ref={controlRef}
        className="eq-secret-control"
        role="group"
        aria-labelledby={labelId}
        aria-describedby={present(hint) ? hintId : undefined}
      >
        {revealed ? (
          <span key="shown" className="eq-secret-value">{value}</span>
        ) : (
          <span key="masked" className="eq-secret-value">
            <span aria-hidden="true">
              {start}
              <span className="eq-secret-mask">{BULLETS}</span>
              {end}
            </span>
            <span className="eq-secret-sr">{hiddenText}</span>
          </span>
        )}
        {revealed && revealFor > 0 && (
          <span className="eq-secret-timer" aria-hidden="true">
            {left}s
          </span>
        )}
        <button
          type="button"
          className="eq-secret-button"
          data-action="reveal"
          aria-pressed={revealed}
          aria-label="Show value"
          onClick={toggle}
        >
          {revealed ? (
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M2 2l12 12M6.6 3.7A6.6 6.6 0 0 1 8 3.5c3.6 0 6 4.5 6 4.5a11 11 0 0 1-1.7 2.2M4.2 4.9A11 11 0 0 0 2 8s2.4 4.5 6 4.5a6 6 0 0 0 2.6-.6M6.6 6.6a2 2 0 0 0 2.8 2.8" />
            </svg>
          ) : (
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M2 8s2.4-4.5 6-4.5S14 8 14 8s-2.4 4.5-6 4.5S2 8 2 8Z" />
              <circle cx="8" cy="8" r="2" />
            </svg>
          )}
        </button>
        <button
          type="button"
          className="eq-secret-button"
          data-action="copy"
          data-state={copy}
          aria-label="Copy value"
          title={copyLabel}
          onClick={handleCopy}
        >
          {copy === "copied" ? (
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M3.5 8.5l3 3 6-7" pathLength={1} />
            </svg>
          ) : copy === "failed" ? (
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M8 4.5v4M8 11.2v.1" />
              <circle cx="8" cy="8" r="6" />
            </svg>
          ) : (
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="5.5" y="5.5" width="8" height="8" rx="1.5" />
              <path d="M10.5 3.5v-.5A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v5A1.5 1.5 0 0 0 4 9.5h.5" />
            </svg>
          )}
        </button>
      </div>
      {present(hint) && (
        <p className="eq-secret-hint" id={hintId}>
          {hint}
        </p>
      )}
      <span className="eq-secret-sr" role="status">
        {announce}
      </span>
    </div>
  );
}