/**
 * filekorolheader: 密码输入组件 - 支持显示/隐藏密码功能
 * 功能：密码输入、显示/隐藏切换、表单验证
 * 路径：/central-config/tenant/user-management/components/PasswordInput
 * 规范：遵循crop-x-new/docs/开发项目规范.md，使用shadcn语义化样式，支持暗色主题
 */
'use client';

import { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Eye, EyeOff } from 'lucide-react';
import { cn } from '@/lib/utils';

interface PasswordInputProps {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  required?: boolean;
  error?: string;
  disabled?: boolean;
}

export function PasswordInput({
  id,
  label,
  value,
  onChange,
  placeholder = "请输入密码",
  required = false,
  error,
  disabled = false,
}: PasswordInputProps) {
  const [showPassword, setShowPassword] = useState(false);

  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  return (
    <div className="space-y-2">
      <Label htmlFor={id}>
        {label}
        {required && <span className="text-red-500 ml-1">*</span>}
      </Label>
      <div className="relative">
        <Input
          id={id}
          type={showPassword ? 'text' : 'password'}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          disabled={disabled}
          className={cn(
            error && 'border-red-500',
            'pr-10' // 为眼睛图标预留空间
          )}
        />
        <button
          type="button"
          onClick={togglePasswordVisibility}
          disabled={disabled}
          className={cn(
            'absolute right-3 top-1/2 transform -translate-y-1/2',
            'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200',
            'focus:outline-none',
            disabled && 'opacity-50 cursor-not-allowed'
          )}
          tabIndex={-1} // 防止Tab键聚焦到眼睛图标
        >
          {showPassword ? (
            <EyeOff className="h-4 w-4" />
          ) : (
            <Eye className="h-4 w-4" />
          )}
        </button>
      </div>
      {error && (
        <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
      )}
    </div>
  );
}