/**
 * AuthInput Component
 * @description Reusable input field for authentication forms.
 * Features semi-transparent background, white text, and password visibility toggle.
 * Follows AgenticIQ Enterprise Coding Guidelines v1.0
 */

import { forwardRef, useState, type InputHTMLAttributes } from 'react';

/**
 * Props for AuthInput component
 */
interface AuthInputProps extends InputHTMLAttributes<HTMLInputElement> {
    /** Label text for the input */
    label: string;
    /** Whether the field is required */
    isRequired?: boolean;
    /** Error message to display */
    error?: string;
    /** Additional container classes */
    containerClassName?: string;
}

/**
 * Eye closed icon for password visibility toggle
 * @returns {JSX.Element} Eye closed SVG icon
 */
function EyeClosedIcon(): JSX.Element {
    return (
        <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M2.5 2.5L17.5 17.5M8.82 8.82a1.667 1.667 0 002.36 2.36M7.5 14.167A7.5 7.5 0 0110 13.75c2.917 0 5.5 1.25 7.5 3.75a10.833 10.833 0 00-2.358-2.358M12.5 5.833A7.5 7.5 0 0110 6.25C7.083 6.25 4.5 7.5 2.5 10a10.833 10.833 0 002.358 2.358"
                stroke="rgba(255,255,255,0.5)"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </svg>
    );
}

/**
 * Eye open icon for password visibility toggle
 * @returns {JSX.Element} Eye open SVG icon
 */
function EyeOpenIcon(): JSX.Element {
    return (
        <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M10 4.167c-4.167 0-7.5 3.333-7.5 5.833s3.333 5.833 7.5 5.833 7.5-3.333 7.5-5.833-3.333-5.833-7.5-5.833z"
                stroke="rgba(255,255,255,0.5)"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
            <path
                d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"
                stroke="rgba(255,255,255,0.5)"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </svg>
    );
}

/**
 * AuthInput component
 * @description Styled input field with label, required indicator, and password toggle.
 * Semi-transparent background with white text for dark gradient cards.
 * @param {AuthInputProps} props - Component props
 * @returns {JSX.Element} AuthInput element
 */
export const AuthInput = forwardRef<HTMLInputElement, AuthInputProps>(
    function AuthInput(
        {
            label,
            isRequired = false,
            error,
            containerClassName = '',
            type = 'text',
            placeholder,
            ...inputProps
        },
        ref
    ): JSX.Element {
        const [showPassword, setShowPassword] = useState(false);
        const isPasswordType = type === 'password';
        const inputType = isPasswordType && showPassword ? 'text' : type;

        const togglePasswordVisibility = (): void => {
            setShowPassword((prev) => !prev);
        };

        return (
            <div className={`flex flex-col gap-1.5 w-full ${containerClassName}`}>
                {/* Label */}
                <label className="text-sm font-medium leading-5 text-white">
                    {label}
                    {isRequired && <span className="text-[#ff3434] ml-0.5">*</span>}
                </label>

                {/* Input Container */}
                <div
                    className={`
                        flex items-center gap-2
                        w-full px-4 py-2.5
                        bg-[rgba(255,255,255,0.15)]
                        border border-[rgba(255,255,255,0.05)]
                        rounded-xl
                        shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]
                        overflow-hidden
                        focus-within:border-[rgba(255,255,255,0.3)]
                        transition-colors duration-200
                        ${error ? 'border-[#ff3434]' : ''}
                        min-w-0
                    `}
                >
                    <input
                        ref={ref}
                        type={inputType}
                        className="
                            flex-1 min-w-0
                            bg-transparent
                            text-base font-medium leading-6
                            text-white
                            placeholder:text-[rgba(255,255,255,0.5)]
                            outline-none
                            border-none
                        "
                        placeholder={placeholder}
                        {...inputProps}
                    />

                    {/* Password Toggle Icon */}
                    {isPasswordType && (
                        <button
                            type="button"
                            onClick={togglePasswordVisibility}
                            className="flex-shrink-0 cursor-pointer hover:opacity-80 transition-opacity"
                            aria-label={showPassword ? 'Hide password' : 'Show password'}
                        >
                            {showPassword ? <EyeOpenIcon /> : <EyeClosedIcon />}
                        </button>
                    )}
                </div>

                {/* Error Message */}
                {error && (
                    <p className="text-sm text-[#ff3434] mt-1">{error}</p>
                )}
            </div>
        );
    }
);

