import { InputHTMLAttributes, TextareaHTMLAttributes, forwardRef } from 'react';

interface BaseInputProps {
    label?: string;
    error?: string;
    helperText?: string;
}

interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, BaseInputProps {
    type?: 'text' | 'email' | 'password' | 'number' | 'url' | 'textarea' | 'datetime-local' | 'date' | 'time';
}

interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, BaseInputProps {
    type?: 'textarea';
}

type CombinedInputProps = InputProps | TextareaProps;

const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, CombinedInputProps>(
    ({ label, error, helperText, className = '', type = 'text', ...props }, ref) => {
        const inputClasses = `
            block w-full rounded-lg border px-4 py-3 text-sm
            transition-all duration-200
            placeholder:text-gray-400
            focus:outline-none focus:ring-2 focus:ring-offset-0
            dark:placeholder:text-gray-500
            ${
                error
                    ? 'border-red-300 bg-red-50 text-red-900 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:bg-red-900/20 dark:text-red-200'
                    : 'border-gray-300 bg-white text-gray-900 shadow-sm focus:border-[#d4af37] focus:ring-[#d4af37]/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-[#b8941f] dark:focus:ring-[#b8941f]/20'
            }
            ${className}
        `;

        if (type === 'textarea') {
            const textareaProps = props as TextareaProps;
            return (
                <div className="w-full">
                    {label && (
                        <label
                            htmlFor={textareaProps.id}
                            className="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                        >
                            {label}
                            {textareaProps.required && <span className="ml-1 text-red-500">*</span>}
                        </label>
                    )}
                    <div className="relative">
                        <textarea
                            ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
                            className={`${inputClasses} min-h-[100px] resize-y`}
                            {...(textareaProps as TextareaHTMLAttributes<HTMLTextAreaElement>)}
                        />
                    </div>
                    {error && (
                        <p className="mt-2 flex items-center gap-1 text-sm font-medium text-red-600 dark:text-red-400">
                            <svg
                                className="h-4 w-4"
                                fill="none"
                                viewBox="0 0 24 24"
                                strokeWidth="2"
                                stroke="currentColor"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
                                />
                            </svg>
                            {error}
                        </p>
                    )}
                    {helperText && !error && (
                        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">{helperText}</p>
                    )}
                </div>
            );
        }

        const inputProps = props as InputHTMLAttributes<HTMLInputElement>;
        return (
            <div className="w-full">
                {label && (
                    <label
                        htmlFor={inputProps.id}
                        className="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                    >
                        {label}
                        {inputProps.required && <span className="ml-1 text-red-500">*</span>}
                    </label>
                )}
                <div className="relative">
                    <input
                        ref={ref as React.ForwardedRef<HTMLInputElement>}
                        type={type}
                        className={inputClasses}
                        {...inputProps}
                    />
                </div>
                {error && (
                    <p className="mt-2 flex items-center gap-1 text-sm font-medium text-red-600 dark:text-red-400">
                        <svg
                            className="h-4 w-4"
                            fill="none"
                            viewBox="0 0 24 24"
                            strokeWidth="2"
                            stroke="currentColor"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
                            />
                        </svg>
                        {error}
                    </p>
                )}
                {helperText && !error && (
                    <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">{helperText}</p>
                )}
            </div>
        );
    }
);

Input.displayName = 'Input';

export default Input;

