"use client";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

export function SecretInput(props: {
  id: string;
  label?: string;
  value: string;
  onChange: (value: string) => void;
  secretSet?: boolean;
  /**
   * Non-reversible preview of the saved secret (first 3 + last 2 chars, middle
   * masked). When present and the secret is set, it is shown as the placeholder
   * so an operator can confirm the stored value. The field stays empty — typing
   * replaces the secret, leaving it blank keeps the saved value.
   */
  maskedHint?: string;
  placeholderWhenSet?: string;
  placeholderWhenUnset?: string;
  helperText?: string;
  /**
   * Keep freshly typed text readable instead of dotting it out. Used for
   * account identifiers (publishable keys, client IDs, wallet IDs) — the saved
   * value is still masked, but an operator can proofread what they paste.
   */
  revealTyped?: boolean;
}) {
  const placeholder = props.secretSet
    ? props.maskedHint || props.placeholderWhenSet
    : props.placeholderWhenUnset;

  return (
    <div className="space-y-2">
      {props.label ? <Label htmlFor={props.id}>{props.label}</Label> : null}
      <Input
        id={props.id}
        type="text"
        value={props.value}
        onChange={(e) => props.onChange(e.target.value)}
        placeholder={placeholder}
        autoComplete="off"
        autoCorrect="off"
        autoCapitalize="none"
        spellCheck={false}
        data-1p-ignore="true"
        data-lpignore="true"
        data-form-type="other"
        className={cn(
          props.value && !props.revealTyped && "[-webkit-text-security:disc]",
        )}
      />
      {props.helperText ? (
        <p className="text-xs text-muted-foreground">{props.helperText}</p>
      ) : null}
    </div>
  );
}