import React, { useRef, useEffect } from 'react';
import { View, TextInput, Pressable, Text, StyleSheet, Animated } from 'react-native';
import { colors, fonts, spacing, borderRadius } from '../utils/theme';

export default function HabitInput({ value, onChangeText, onDelete, index, autoFocus }) {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(-10)).current;

  useEffect(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
      Animated.timing(slideAnim, { toValue: 0, duration: 300, useNativeDriver: true }),
    ]).start();
  }, []);

  return (
    <Animated.View style={[styles.container, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
      <View style={styles.indexBadge}>
        <Text style={styles.indexText}>{index + 1}</Text>
      </View>
      <TextInput
        style={styles.input}
        value={value}
        onChangeText={onChangeText}
        placeholder={`Habit ${index + 1}`}
        placeholderTextColor={colors.textMuted}
        selectionColor={colors.primary}
        autoFocus={autoFocus}
      />
      <Pressable style={styles.deleteBtn} onPress={onDelete} hitSlop={8}>
        <Text style={styles.deleteIcon}>✕</Text>
      </Pressable>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.surface,
    borderRadius: borderRadius.md,
    borderWidth: 1,
    borderColor: colors.border,
    marginBottom: spacing.sm,
    overflow: 'hidden',
  },
  indexBadge: {
    width: 32,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: spacing.md,
    backgroundColor: 'rgba(108, 99, 255, 0.08)',
  },
  indexText: {
    color: colors.primary,
    fontSize: fonts.sizes.sm,
    fontWeight: fonts.weights.bold,
  },
  input: {
    flex: 1,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.md,
    color: colors.text,
    fontSize: fonts.sizes.md,
  },
  deleteBtn: {
    width: 40,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: spacing.md,
  },
  deleteIcon: {
    color: colors.textMuted,
    fontSize: 14,
  },
});
