/**
 * Input 输入框组件
 * 支持标签、错误提示、图标、多行输入等
 */

import React, { useMemo, useState } from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  ViewStyle,
  TextStyle,
} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { borderRadius, spacing, fontSizes, useAppColors, type AppColors } from '../../theme';
import Text from './Text';

interface InputProps {
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  label?: string;
  error?: string;
  secureTextEntry?: boolean;
  multiline?: boolean;
  numberOfLines?: number;
  leftIcon?: string;
  rightIcon?: string;
  onRightIconPress?: () => void;
  editable?: boolean;
  style?: ViewStyle;
  inputStyle?: TextStyle;
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
  autoCorrect?: boolean;
}

function createInputStyles(colors: AppColors) {
  return StyleSheet.create({
    wrapper: {
      width: '100%',
    },
    label: {
      marginBottom: spacing.xs,
    },
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.background.paper,
      borderWidth: 1,
      borderRadius: borderRadius.md,
      paddingHorizontal: spacing.md,
      borderColor: colors.divider,
    },
    input: {
      flex: 1,
      fontSize: fontSizes.md,
      color: colors.text.primary,
      paddingVertical: spacing.md,
      minHeight: 44,
    },
    multilineInput: {
      textAlignVertical: 'top',
      minHeight: 100,
    },
    leftIcon: {
      marginRight: spacing.sm,
    },
    rightIcon: {
      marginLeft: spacing.sm,
    },
    error: {
      marginTop: spacing.xs,
    },
  });
}

const Input: React.FC<InputProps> = ({
  value,
  onChangeText,
  placeholder,
  label,
  error,
  secureTextEntry = false,
  multiline = false,
  numberOfLines = 1,
  leftIcon,
  rightIcon,
  onRightIconPress,
  editable = true,
  style,
  inputStyle,
  autoCapitalize = 'sentences',
  keyboardType = 'default',
  autoCorrect = true,
}) => {
  const colors = useAppColors();
  const styles = useMemo(() => createInputStyles(colors), [colors]);
  const [isFocused, setIsFocused] = useState(false);

  const getBorderColor = () => {
    if (error) return colors.error.main;
    if (isFocused) return colors.primary.main;
    return colors.divider;
  };

  const containerStyle = [
    styles.container,
    { borderColor: getBorderColor() },
    multiline && { minHeight: 100 },
    style,
  ];

  return (
    <View style={styles.wrapper}>
      {label && (
        <Text variant="label" color={colors.text.secondary} style={styles.label}>
          {label}
        </Text>
      )}
      <View style={containerStyle}>
        {leftIcon && (
          <MaterialCommunityIcons
            name={leftIcon as any}
            size={20}
            color={colors.text.secondary}
            style={styles.leftIcon}
          />
        )}
        <TextInput
          style={[styles.input, multiline && styles.multilineInput, inputStyle]}
          value={value}
          onChangeText={onChangeText}
          placeholder={placeholder}
          placeholderTextColor={colors.text.hint}
          secureTextEntry={secureTextEntry}
          multiline={multiline}
          numberOfLines={numberOfLines}
          editable={editable}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          autoCapitalize={autoCapitalize}
          keyboardType={keyboardType}
          autoCorrect={autoCorrect}
          cursorColor={colors.primary.main}
          selectionColor={`${colors.primary.main}40`}
        />
        {rightIcon && (
          <TouchableOpacity onPress={onRightIconPress} disabled={!onRightIconPress}>
            <MaterialCommunityIcons
              name={rightIcon as any}
              size={20}
              color={colors.text.secondary}
              style={styles.rightIcon}
            />
          </TouchableOpacity>
        )}
      </View>
      {error && (
        <Text variant="caption" color={colors.error.main} style={styles.error}>
          {error}
        </Text>
      )}
    </View>
  );
};

export default Input;
