import { forwardRef, useState, type InputHTMLAttributes, type ReactNode } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Eye, EyeOff, Check, X } from 'lucide-react';
import { cn } from '@/lib/cn';

interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
  label: string;
  error?: string;
  success?: boolean;
  icon?: ReactNode;
  rightIcon?: ReactNode;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, success, icon, rightIcon, type, className, ...props }, ref) => {
    const [focused, setFocused] = useState(false);
    const [showPassword, setShowPassword] = useState(false);
    const hasValue = props.value !== undefined ? String(props.value).length > 0 : false;
    const isFloating = focused || hasValue;
    const isPassword = type === 'password';
    const inputType = isPassword ? (showPassword ? 'text' : 'password') : type;

    return (
      <div className={cn('relative group', className)}>
        <div className="relative">
          {icon && (
            <div
              className={cn(
                'absolute left-4 top-1/2 -translate-y-1/2 transition-colors duration-200 pointer-events-none z-10',
                error
                  ? 'text-red-400'
                  : focused
                    ? 'text-[#ff6b2c]'
                    : 'text-[#5a5a72]'
              )}
            >
              {icon}
            </div>
          )}
          <input
            ref={ref}
            type={inputType}
            className={cn(
              'w-full rounded-xl text-[#f0f0f5] text-sm font-medium',
              'bg-[#0d0d14] border-2',
              'transition-all duration-200 outline-none',
              'placeholder-transparent',
              icon ? 'pl-12 pr-4 pt-5 pb-2' : 'px-4 pt-5 pb-2',
              error
                ? 'border-red-500/50 focus:border-red-400 focus:shadow-[0_0_0_3px_rgba(239,68,68,0.1),0_0_30px_rgba(239,68,68,0.06)]'
                : success
                  ? 'border-emerald-500/50 focus:border-emerald-400 focus:shadow-[0_0_0_3px_rgba(16,185,129,0.1)]'
                  : 'border-[#1e1e30] focus:border-[#ff6b2c] focus:shadow-[0_0_0_3px_rgba(255,107,44,0.1),0_0_30px_rgba(255,107,44,0.05)]',
              'hover:border-[#2a2a40]',
              focused && !error && !success && 'hover:border-[#ff6b2c]',
            )}
            placeholder={label}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            {...props}
          />
          <label
            className={cn(
              'absolute transition-all duration-200 pointer-events-none select-none',
              icon ? 'left-12' : 'left-4',
              isFloating
                ? 'top-1.5 text-[10px] font-semibold tracking-[0.08em] uppercase'
                : 'top-1/2 -translate-y-1/2 text-sm',
              error
                ? 'text-red-400'
                : focused
                  ? 'text-[#ff6b2c]'
                  : 'text-[#5a5a72]'
            )}
          >
            {label}
          </label>
          <div className="absolute right-3.5 top-1/2 -translate-y-1/2 flex items-center gap-1.5 z-10">
            {isPassword && (
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="p-1 text-[#5a5a72] hover:text-[#f0f0f5] transition-colors rounded-md"
                tabIndex={-1}
              >
                {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
              </button>
            )}
            {success && !error && (
              <motion.div
                initial={{ scale: 0, rotate: -90 }}
                animate={{ scale: 1, rotate: 0 }}
                transition={{ type: 'spring', stiffness: 500, damping: 15 }}
              >
                <Check className="w-4 h-4 text-emerald-500" />
              </motion.div>
            )}
            {error && (
              <motion.div
                initial={{ scale: 0, rotate: 90 }}
                animate={{ scale: 1, rotate: 0 }}
                transition={{ type: 'spring', stiffness: 500, damping: 15 }}
              >
                <X className="w-4 h-4 text-red-400" />
              </motion.div>
            )}
            {rightIcon}
          </div>
        </div>
        <AnimatePresence>
          {error && (
            <motion.p
              initial={{ opacity: 0, y: -4, height: 0 }}
              animate={{ opacity: 1, y: 0, height: 'auto' }}
              exit={{ opacity: 0, y: -4, height: 0 }}
              transition={{ duration: 0.15 }}
              className="text-red-400 text-xs mt-2 pl-1 font-medium"
            >
              {error}
            </motion.p>
          )}
        </AnimatePresence>
      </div>
    );
  }
);

Input.displayName = 'Input';
