import React from 'react';
import { clsx } from 'clsx';
import { Label } from './Typography';
import { persianToEnglish, formatWithThousands } from '../../utils/numberUtils';

interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    label?: string;
    error?: string;
    helperText?: string;
    inputSize?: 'sm' | 'md' | 'lg';
    icon?: React.ComponentType<{ className?: string }>;
    numeric?: boolean;
    thousandSeparator?: boolean;
}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
    ({ label, error, helperText, inputSize = 'md', className, id, onChange, type, numeric, thousandSeparator, ...props }, ref) => {
        const sizeClasses = {
            sm: 'px-3 py-2 text-sm',
            md: 'px-3 py-3 text-base',
            lg: 'px-4 py-4 text-lg'
        };

        const inputClasses = clsx(
            'w-full border rounded-lg transition-all duration-200 focus:outline-none focus:ring-2',
            sizeClasses[inputSize],
            error
                ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
                : 'border-gray-300 dark:border-gray-600 focus:border-primary-500 focus:ring-primary-500',
            'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100',
            'placeholder-gray-500 dark:placeholder-gray-400',
            className
        );

        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
            let value = e.target.value;
            if ((type === 'number' || numeric) && value) {
                value = persianToEnglish(value);
            }
            if (thousandSeparator) {
                const caret = e.target.selectionStart || 0;
                const prevLength = e.target.value.length;
                value = formatWithThousands(value);
                e.target.value = value;
                const newLength = value.length;
                const delta = newLength - prevLength;
                requestAnimationFrame(() => {
                    try {
                        e.target.setSelectionRange(caret + delta, caret + delta);
                    } catch { }
                });
            } else {
                e.target.value = value;
            }
            onChange?.(e);
        };

        const getInputMode = (): "numeric" | "decimal" | undefined => {
            if (numeric) {
                return type === 'number' ? 'decimal' : 'numeric';
            }
            return undefined;
        };

        const inputProps = {
            ref,
            id,
            type: numeric || thousandSeparator ? 'text' : type,
            inputMode: getInputMode(),
            className: inputClasses,
            onChange: handleChange,
            ...props
        };

        return (
            <div className="space-y-1">
                {label && <Label htmlFor={id}>{label}</Label>}
                <input {...inputProps} />
                {helperText && !error && (
                    <p className="text-xs text-gray-500 dark:text-gray-400">{helperText}</p>
                )}
                {error && (
                    <p className="text-xs text-red-600 dark:text-red-400" role="alert">{error}</p>
                )}
            </div>
        );
    }
); 