"use client";

import { useState } from "react";
import { Eye, EyeOff, Copy, Check } from "lucide-react";

interface TokenInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  helperText?: React.ReactNode;
  /** Show a "Configured" badge next to the label */
  configured?: boolean;
  /** Disable input + buttons (e.g. when an alternative auth method is active) */
  disabled?: boolean;
}

export function TokenInput({
  label,
  value,
  onChange,
  placeholder,
  helperText,
  configured,
  disabled,
}: TokenInputProps) {
  const [visible, setVisible] = useState(false);
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    if (!value) return;
    await navigator.clipboard.writeText(value);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="space-y-1.5">
      <label className="flex items-center gap-2 text-sm font-medium text-subtext1">
        {label}
        {configured && (
          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-green/10 text-green">
            <Check size={10} />
            Set
          </span>
        )}
      </label>
      <div className={`flex gap-2 ${disabled ? "opacity-40 pointer-events-none" : ""}`}>
        <div className="relative flex-1">
          <input
            type={visible ? "text" : "password"}
            value={value}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
            disabled={disabled}
            className="w-full rounded-lg border border-surface1 bg-surface0 px-3 py-2 text-sm text-text placeholder:text-overlay0 focus:outline-none focus:border-mauve focus:ring-1 focus:ring-mauve/30 font-mono disabled:cursor-not-allowed"
          />
          <button
            type="button"
            onClick={() => setVisible(!visible)}
            disabled={disabled}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-overlay0 hover:text-text transition-colors"
          >
            {visible ? <EyeOff size={14} /> : <Eye size={14} />}
          </button>
        </div>
        <button
          type="button"
          onClick={handleCopy}
          disabled={!value || disabled}
          className="px-2.5 rounded-lg border border-surface1 bg-surface0 text-overlay0 hover:text-text hover:border-surface2 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
        >
          {copied ? <Check size={14} className="text-green" /> : <Copy size={14} />}
        </button>
      </div>
      {helperText && <p className="text-xs text-overlay0">{helperText}</p>}
    </div>
  );
}
