import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  TextInput,
  TextInputProps,
  StyleSheet,
  TouchableOpacity,
  Animated,
} from 'react-native';
import { COLORS, RADIUS, SPACING, FONT_SIZE, FONT } from '../../theme';
import { useTheme } from '../../theme';

interface InputProps extends TextInputProps {
  label?: string;
  error?: string;
  hint?: string;
  rightIcon?: React.ReactNode;
}

export function Input({ label, error, hint, rightIcon, style, onFocus, onBlur, ...props }: InputProps) {
  const { theme } = useTheme();
  const [focused, setFocused] = useState(false);
  const borderAnim = useRef(new Animated.Value(0)).current;

  const handleFocus = (e: any) => {
    setFocused(true);
    Animated.timing(borderAnim, { toValue: 1, duration: 180, useNativeDriver: false }).start();
    onFocus?.(e);
  };

  const handleBlur = (e: any) => {
    setFocused(false);
    Animated.timing(borderAnim, { toValue: 0, duration: 180, useNativeDriver: false }).start();
    onBlur?.(e);
  };

  const borderColor = borderAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [error ? COLORS.error : theme.border, error ? COLORS.error : COLORS.primary],
  });

  const borderWidth = borderAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [1.5, 2],
  });

  return (
    <View style={styles.wrapper}>
      {label ? (
        <Text style={[styles.label, { color: focused ? COLORS.primary : theme.textSecondary }]}>
          {label}
        </Text>
      ) : null}
      <Animated.View
        style={[
          styles.container,
          { backgroundColor: theme.inputBg, borderColor, borderWidth },
        ]}>
        <TextInput
          style={[styles.input, { color: theme.text }, style]}
          placeholderTextColor={theme.placeholder}
          onFocus={handleFocus}
          onBlur={handleBlur}
          {...props}
        />
        {rightIcon ? <View style={styles.rightIcon}>{rightIcon}</View> : null}
      </Animated.View>
      {error ? (
        <Text style={styles.error}>{error}</Text>
      ) : hint ? (
        <Text style={[styles.hint, { color: theme.textMuted }]}>{hint}</Text>
      ) : null}
    </View>
  );
}

export function SecureInput({ showToggle = true, ...props }: InputProps & { showToggle?: boolean }) {
  const [visible, setVisible] = useState(false);
  const { theme } = useTheme();

  return (
    <Input
      {...props}
      secureTextEntry={!visible}
      rightIcon={
        showToggle ? (
          <TouchableOpacity onPress={() => setVisible(v => !v)} style={styles.toggleBtn}>
            <Text style={[styles.toggleText, { color: COLORS.primary }]}>
              {visible ? 'Hide' : 'Show'}
            </Text>
          </TouchableOpacity>
        ) : undefined
      }
    />
  );
}

const styles = StyleSheet.create({
  wrapper: { marginBottom: SPACING.md },
  label: {
    fontSize: FONT_SIZE.sm,
    fontWeight: FONT.medium as any,
    marginBottom: SPACING.xs,
    letterSpacing: 0.1,
  },
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: RADIUS.md,
    paddingHorizontal: SPACING.md,
    minHeight: 50,
    overflow: 'hidden',
  },
  input: {
    flex: 1,
    fontSize: FONT_SIZE.md,
    paddingVertical: SPACING.sm,
  },
  rightIcon: { marginLeft: SPACING.xs },
  error: {
    fontSize: FONT_SIZE.xs,
    color: COLORS.error,
    marginTop: SPACING.xs,
    fontWeight: FONT.medium as any,
  },
  hint: { fontSize: FONT_SIZE.xs, marginTop: SPACING.xs },
  toggleBtn: { padding: SPACING.xs },
  toggleText: { fontSize: FONT_SIZE.sm, fontWeight: FONT.semibold as any },
});
