import { forwardRef, InputHTMLAttributes } from 'react';
import { AlertCircle, CheckCircle } from 'lucide-react';

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    error?: string;
    success?: boolean;
    helperText?: string;
}

const Input = forwardRef<HTMLInputElement, InputProps>(
    ({ className, label, error, success, helperText, id, ...props }, ref) => {
        const inputId = id || label?.toLowerCase().replace(/\s+/g, '-');

        return (
            <div className="w-full">
                {label && (
                    <label
                        htmlFor={inputId}
                        className="mb-2 block text-sm font-medium text-slate-700"
                    >
                        {label}
                        {props.required && <span className="text-rose-500 ml-1">*</span>}
                    </label>
                )}
                <div className="relative">
                    <input
                        id={inputId}
                        ref={ref}
                        className={`
                            flex h-11 w-full rounded-lg border px-3 py-2 text-sm transition-colors
                            placeholder:text-slate-400
                            focus:outline-none focus:ring-2 focus:ring-offset-1
                            disabled:cursor-not-allowed disabled:opacity-50
                            ${error
                                ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/20'
                                : success
                                    ? 'border-emerald-300 focus:border-emerald-500 focus:ring-emerald-500/20'
                                    : 'border-slate-200 focus:border-brand focus:ring-brand/20'}
                            ${className || ''}
                        `}
                        aria-invalid={error ? true : false}
                        aria-describedby={
                            error
                                ? `${inputId}-error`
                                : helperText
                                    ? `${inputId}-helper`
                                    : undefined
                        }
                        {...props}
                    />
                    {(error || success) && (
                        <div className="absolute right-3 top-1/2 -translate-y-1/2">
                            {error && <AlertCircle className="h-5 w-5 text-rose-500" />}
                            {success && !error && (
                                <CheckCircle className="h-5 w-5 text-emerald-500" />
                            )}
                        </div>
                    )}
                </div>
                {error && (
                    <p id={`${inputId}-error`} className="mt-1.5 text-sm text-rose-600 flex items-center gap-1">
                        {error}
                    </p>
                )}
                {helperText && !error && (
                    <p id={`${inputId}-helper`} className="mt-1.5 text-sm text-slate-500">
                        {helperText}
                    </p>
                )}
            </div>
        );
    }
);

Input.displayName = 'Input';

export { Input };