import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Icon } from '../../Atoms/Icon/Icon';

export const PasswordInput = ({
  label,
  placeholder,
  value,
  onChange,
  error,
  required = false,
  hideRequiredAsterisk = false,
  disabled = false,
  variant,
  themeColor,
  className = '',
  inputClassName = '',
  labelClassName = '',
  labelStyle,
  style: nativeInputStyle,
  clearPlaceholderOnFocus = false,
  focusBorderOnFocus = false,
  focusBorderColor = '#38656D',
  onFocus,
  onBlur,
  type: _ignoredType,
  ...props
}) => {
  const { t } = useTranslation();
  const [showPassword, setShowPassword] = useState(false);
  const [isFocused, setIsFocused] = useState(false);
  const isHexaLogin = variant === 'hexa-login';

  const handleFocus = (event) => {
    setIsFocused(true);
    if (typeof onFocus === 'function') onFocus(event);
  };

  const handleBlur = (event) => {
    setIsFocused(false);
    if (typeof onBlur === 'function') onBlur(event);
  };

  const focusClasses = focusBorderOnFocus
    ? 'focus:outline-none focus:ring-0 focus:ring-transparent'
    : 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';

  const baseInputClasses = isHexaLogin
    ? `w-full px-3 py-2 pr-10 border rounded-lg ${focusClasses} text-sm text-gray-900`
    : `w-full px-3 py-2 pr-10 border rounded-lg ${focusClasses} disabled:bg-gray-100 disabled:cursor-not-allowed`;

  const resolvedInputClasses = `
    ${baseInputClasses}
    ${isHexaLogin ? '' : (error ? 'border-red-500' : 'border-gray-300')}
    ${inputClassName}
  `.trim().replace(/\s+/g, ' ');

  return (
    <div className={`anima-passwordfield w-full ${className}`}>
      {label && (
        <label
          className={labelClassName || 'block text-sm font-medium text-gray-700 mb-1'}
          style={{
            ...(labelStyle || {}),
            ...(themeColor ? { color: themeColor } : {}),
          }}
        >
          {label}
          {required && !hideRequiredAsterisk && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}

      <div className="relative w-full">
        <input
          type={showPassword ? 'text' : 'password'}
          placeholder={clearPlaceholderOnFocus && isFocused ? '' : placeholder}
          disabled={disabled}
          value={value}
          onChange={onChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
          className={`${resolvedInputClasses} ${isHexaLogin ? 'anima-passwordfield__input' : ''}`}
          style={{
            ...(nativeInputStyle || {}),
            ...(focusBorderOnFocus && isFocused && !error
              ? {
                  borderWidth: '2px',
                  borderStyle: 'solid',
                  borderColor: focusBorderColor,
                }
              : {}),
            ...(themeColor
              ? {
                  color: themeColor,
                  borderColor: error ? undefined : themeColor,
                }
              : {}),
          }}
          {...props}
        />

        <button
          type="button"
          tabIndex={-1}
          onClick={() => setShowPassword((prev) => !prev)}
          className="anima-passwordfield__toggle"
          aria-label={showPassword ? t('common.hidePassword') : t('common.showPassword')}
          style={{
            position: 'absolute',
            right: '12px',
            top: '50%',
            transform: 'translateY(-50%)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: 0,
            margin: 0,
            border: 'none',
            background: 'transparent',
            cursor: 'pointer',
            color: themeColor || 'inherit',
          }}
        >
          <Icon
            name={showPassword ? 'EyeSlashIcon' : 'EyeIcon'}
            variant="24-outline"
            size={18}
          />
        </button>
      </div>

      {error && !isHexaLogin && (
        <p className="mt-1 text-sm text-red-600">{error}</p>
      )}
    </div>
  );
};

export default PasswordInput;


