import { memo, useState } from 'react'
import { Eye, EyeOff } from 'lucide-react'
import i18n from '@/i18n'
import { Input } from '@/components/ui/input'

interface PasswordInputProps extends Omit<React.ComponentProps<typeof Input>, 'type'> {
  /** 明文切换按钮（密钥类字段默认开启） */
  toggleable?: boolean
}

/**
 * 密码/密钥输入框 — 带明文切换。
 * 供 Hosts（SSH 密码/密钥口令）、Storage（secretKey）等敏感字段复用。
 */
export const PasswordInput = memo(function PasswordInput({
  toggleable = true,
  className,
  ...props
}: PasswordInputProps) {
  const [visible, setVisible] = useState(false)
  return (
    <div className="relative">
      <Input type={visible ? 'text' : 'password'} className={`${className ?? ''} pr-10`} {...props} />
      {toggleable && (
        <button
          type="button"
          tabIndex={-1}
          aria-label={visible ? i18n.t('password.hide') : i18n.t('password.show')}
          onClick={() => setVisible((prev) => !prev)}
          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-slate-600"
        >
          {visible ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
        </button>
      )}
    </div>
  )
})

export default PasswordInput