'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { ReactNode, useState, useRef, useEffect, forwardRef } from 'react';
import { EyeIcon, EyeSlashIcon, ExclamationCircleIcon, CheckCircleIcon } from '@heroicons/react/24/outline';

interface EnhancedInputProps {
  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
  placeholder?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
  label?: string;
  error?: string;
  success?: string;
  hint?: string;
  disabled?: boolean;
  required?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  className?: string;
  containerClassName?: string;
  autoFocus?: boolean;
  autoComplete?: string;
  name?: string;
  id?: string;
  showPasswordToggle?: boolean;
  showStrengthIndicator?: boolean;
  showCharCount?: boolean;
  maxLength?: number;
  minLength?: number;
  pattern?: string;
  validate?: (value: string) => string | null;
  onValidationChange?: (isValid: boolean) => void;
}

const EnhancedInput = forwardRef<HTMLInputElement, EnhancedInputProps>(({
  type = 'text',
  placeholder,
  value = '',
  onChange,
  onFocus,
  onBlur,
  label,
  error,
  success,
  hint,
  disabled = false,
  required = false,
  leftIcon,
  rightIcon,
  className = '',
  containerClassName = '',
  autoFocus = false,
  autoComplete,
  name,
  id,
  showPasswordToggle = false,
  showStrengthIndicator = false,
  showCharCount = false,
  maxLength,
  minLength,
  pattern,
  validate,
  onValidationChange,
  ...props
}, ref) => {
  const [isFocused, setIsFocused] = useState(false);
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
  const [internalValue, setInternalValue] = useState(value);
  const [validationMessage, setValidationMessage] = useState<string | null>(null);
  const [isValidating, setIsValidating] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // 同步外部值
  useEffect(() => {
    setInternalValue(value);
  }, [value]);

  // 验证逻辑
  useEffect(() => {
    if (validate && internalValue) {
      setIsValidating(true);
      const message = validate(internalValue);
      setValidationMessage(message);
      setIsValidating(false);
      
      if (onValidationChange) {
        onValidationChange(!message);
      }
    }
  }, [internalValue, validate, onValidationChange]);

  // 密码强度计算
  const getPasswordStrength = (password: string) => {
    let strength = 0;
    if (password.length >= 8) strength++;
    if (/[a-z]/.test(password)) strength++;
    if (/[A-Z]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[^A-Za-z0-9]/.test(password)) strength++;
    return strength;
  };

  const passwordStrength = type === 'password' && showStrengthIndicator ? getPasswordStrength(internalValue) : 0;

  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
    setIsFocused(true);
    onFocus?.(e);
  };

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    setIsFocused(false);
    onBlur?.(e);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setInternalValue(newValue);
    onChange?.(e);
  };

  const togglePasswordVisibility = () => {
    setIsPasswordVisible(!isPasswordVisible);
  };

  const getInputType = () => {
    if (type === 'password' && showPasswordToggle) {
      return isPasswordVisible ? 'text' : 'password';
    }
    return type;
  };

  const getBorderColor = () => {
    if (error || validationMessage) return 'border-red-500 focus:border-red-500 focus:ring-red-500';
    if (success || (validationMessage === null && internalValue && validate)) return 'border-green-500 focus:border-green-500 focus:ring-green-500';
    if (isFocused) return 'border-orange-500 focus:border-orange-500 focus:ring-orange-500';
    return 'border-gray-300 dark:border-gray-600 focus:border-orange-500 focus:ring-orange-500';
  };

  const getLabelColor = () => {
    if (error || validationMessage) return 'text-red-600 dark:text-red-400';
    if (success || (validationMessage === null && internalValue && validate)) return 'text-green-600 dark:text-green-400';
    if (isFocused) return 'text-orange-600 dark:text-orange-400';
    return 'text-gray-700 dark:text-gray-300';
  };

  const inputVariants = {
    initial: { scale: 1 },
    focus: { 
      scale: 1.02,
      transition: { duration: 0.2, ease: "easeOut" }
    },
    blur: {
      scale: 1,
      transition: { duration: 0.2, ease: "easeOut" }
    }
  };

  const labelVariants = {
    initial: { y: 0, scale: 1 },
    focus: { 
      y: -20, 
      scale: 0.85,
      transition: { duration: 0.2, ease: "easeOut" }
    },
    blur: {
      y: internalValue ? -20 : 0,
      scale: internalValue ? 0.85 : 1,
      transition: { duration: 0.2, ease: "easeOut" }
    }
  };

  return (
    <motion.div
      ref={containerRef}
      className={`relative ${containerClassName}`}
      initial="initial"
      animate={isFocused ? "focus" : "blur"}
      variants={inputVariants}
    >
      {/* 标签 */}
      {label && (
        <motion.label
          htmlFor={id}
          className={`absolute left-3 z-10 bg-white dark:bg-gray-800 px-1 text-sm font-medium transition-all duration-200 ${
            isFocused || internalValue ? 'text-xs' : 'text-base'
          } ${getLabelColor()}`}
          initial="initial"
          animate={isFocused ? "focus" : "blur"}
          variants={labelVariants}
        >
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </motion.label>
      )}

      {/* 输入框容器 */}
      <motion.div
        className={`relative flex items-center bg-white dark:bg-gray-800 border-2 rounded-lg transition-all duration-200 ${
          getBorderColor()
        } ${disabled ? 'bg-gray-100 dark:bg-gray-700 cursor-not-allowed' : ''}`}
        whileHover={!disabled ? { scale: 1.01 } : {}}
        animate={{
          boxShadow: isFocused ? '0 0 0 3px rgba(249, 115, 22, 0.1)' : '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
        }}
        transition={{ duration: 0.2 }}
      >
        {/* 左侧图标 */}
        {leftIcon && (
          <motion.div
            className="absolute left-3 text-gray-400 dark:text-gray-500"
            initial={{ opacity: 0, x: -10 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.1 }}
          >
            {leftIcon}
          </motion.div>
        )}

        {/* 输入框 */}
        <input
          ref={ref || inputRef}
          type={getInputType()}
          placeholder={!label ? placeholder : ''}
          value={internalValue}
          onChange={handleChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
          disabled={disabled}
          required={required}
          autoFocus={autoFocus}
          autoComplete={autoComplete}
          name={name}
          id={id}
          maxLength={maxLength}
          minLength={minLength}
          pattern={pattern}
          className={`w-full bg-transparent border-0 outline-none focus:ring-0 transition-all duration-200 ${
            leftIcon ? 'pl-10' : 'pl-4'
          } ${
            rightIcon || (type === 'password' && showPasswordToggle) ? 'pr-10' : 'pr-4'
          } ${
            size === 'sm' ? 'py-2 text-sm' : size === 'lg' ? 'py-3 text-lg' : 'py-2.5 text-base'
          } ${className}`}
          {...props}
        />

        {/* 验证状态图标 */}
        <AnimatePresence>
          {isValidating && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              className="absolute right-3 text-orange-500"
            >
              <motion.div
                animate={{ rotate: 360 }}
                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                className="w-4 h-4 border-2 border-orange-500 border-t-transparent rounded-full"
              />
            </motion.div>
          )}
          
          {!isValidating && validationMessage === null && internalValue && validate && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              className="absolute right-3 text-green-500"
            >
              <CheckCircleIcon className="w-5 h-5" />
            </motion.div>
          )}
          
          {(error || validationMessage) && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              className="absolute right-3 text-red-500"
            >
              <ExclamationCircleIcon className="w-5 h-5" />
            </motion.div>
          )}
        </AnimatePresence>

        {/* 右侧图标和密码切换 */}
        <div className="absolute right-3 flex items-center space-x-2">
          {type === 'password' && showPasswordToggle && (
            <motion.button
              type="button"
              onClick={togglePasswordVisibility}
              className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200"
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
            >
              {isPasswordVisible ? <EyeSlashIcon className="w-5 h-5" /> : <EyeIcon className="w-5 h-5" />}
            </motion.button>
          )}
          
          {rightIcon && (
            <motion.div
              initial={{ opacity: 0, x: 10 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.1 }}
            >
              {rightIcon}
            </motion.div>
          )}
        </div>
      </motion.div>

      {/* 密码强度指示器 */}
      {type === 'password' && showStrengthIndicator && internalValue && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          exit={{ opacity: 0, height: 0 }}
          className="mt-2"
        >
          <div className="flex space-x-1">
            {[1, 2, 3, 4, 5].map((level) => (
              <motion.div
                key={level}
                className={`h-1 flex-1 rounded-full transition-all duration-300 ${
                  passwordStrength >= level
                    ? level <= 2
                      ? 'bg-red-500'
                      : level <= 3
                      ? 'bg-yellow-500'
                      : 'bg-green-500'
                    : 'bg-gray-200 dark:bg-gray-700'
                }`}
                initial={{ scaleX: 0 }}
                animate={{ scaleX: passwordStrength >= level ? 1 : 0.3 }}
                transition={{ delay: level * 0.1 }}
              />
            ))}
          </div>
          <motion.p
            className="text-xs mt-1 text-gray-600 dark:text-gray-400"
            initial={{ opacity: 0, y: -5 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
          >
            {passwordStrength <= 2 && '密码强度：弱'}
            {passwordStrength === 3 && '密码强度：中等'}
            {passwordStrength >= 4 && '密码强度：强'}
          </motion.p>
        </motion.div>
      )}

      {/* 字符计数 */}
      {showCharCount && maxLength && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="flex justify-between items-center mt-1"
        >
          <div />
          <motion.span
            className={`text-xs ${
              internalValue.length > maxLength
                ? 'text-red-500'
                : internalValue.length > maxLength * 0.8
                ? 'text-yellow-500'
                : 'text-gray-500'
            }`}
            animate={{
              scale: internalValue.length > maxLength ? 1.1 : 1,
              color: internalValue.length > maxLength ? '#ef4444' : internalValue.length > maxLength * 0.8 ? '#f59e0b' : '#6b7280'
            }}
          >
            {internalValue.length}/{maxLength}
          </motion.span>
        </motion.div>
      )}

      {/* 错误信息 */}
      <AnimatePresence>
        {(error || validationMessage) && (
          <motion.div
            initial={{ opacity: 0, height: 0, y: -10 }}
            animate={{ opacity: 1, height: 'auto', y: 0 }}
            exit={{ opacity: 0, height: 0, y: -10 }}
            className="mt-1 text-sm text-red-600 dark:text-red-400 flex items-center space-x-1"
          >
            <ExclamationCircleIcon className="w-4 h-4 flex-shrink-0" />
            <span>{error || validationMessage}</span>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 成功信息 */}
      <AnimatePresence>
        {success && (
          <motion.div
            initial={{ opacity: 0, height: 0, y: -10 }}
            animate={{ opacity: 1, height: 'auto', y: 0 }}
            exit={{ opacity: 0, height: 0, y: -10 }}
            className="mt-1 text-sm text-green-600 dark:text-green-400 flex items-center space-x-1"
          >
            <CheckCircleIcon className="w-4 h-4 flex-shrink-0" />
            <span>{success}</span>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 提示信息 */}
      <AnimatePresence>
        {hint && !error && !validationMessage && !success && (
          <motion.div
            initial={{ opacity: 0, height: 0, y: -10 }}
            animate={{ opacity: 1, height: 'auto', y: 0 }}
            exit={{ opacity: 0, height: 0, y: -10 }}
            className="mt-1 text-sm text-gray-600 dark:text-gray-400"
          >
            {hint}
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
});

EnhancedInput.displayName = 'EnhancedInput';

export default EnhancedInput;