import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import React from 'react';
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';

interface WeightInputCardProps {
  cardId: string;
  weightInputs: Record<string, string>;
  onWeightInputChange: (cardId: string, value: string) => void;
  onSaveWeight: (cardId: string) => void;
}

const WeightInputCard: React.FC<WeightInputCardProps> = ({
  cardId,
  weightInputs,
  onWeightInputChange,
  onSaveWeight
}) => {
  const colorScheme = useColorScheme();
  const theme = Colors[colorScheme ?? 'light'];

  return (
    <View style={[styles.bubble, { backgroundColor: theme.surface }]}>
      <View style={styles.weightRow}>
        <TextInput
          style={[styles.weightInput, { color: theme.text, borderColor: theme.border }]}
          placeholder="输入体重"
          placeholderTextColor={theme.textMuted}
          value={weightInputs[cardId] || ''}
          onChangeText={(text) => onWeightInputChange(cardId, text)}
          keyboardType="numeric"
        />
        <Text style={[styles.weightUnit, { color: theme.text }]}>kg</Text>
        <TouchableOpacity
          style={[styles.weightSaveBtn, { backgroundColor: theme.primary }]}
          onPress={() => onSaveWeight(cardId)}
        >
          <Text style={[styles.saveButtonText, { color: theme.onPrimary }]}>保存</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  bubble: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 16,
    maxWidth: '85%',
    alignSelf: 'flex-start',
    minWidth: 250
  },
  weightRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  weightInput: {
    flex: 1,
    height: 36,
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10,
    backgroundColor: 'rgba(255,255,255,0.9)',
  },
  weightUnit: {
    fontWeight: '700',
  },
  weightSaveBtn: {
    height: 36,
    paddingHorizontal: 12,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  saveButtonText: {
    fontSize: 14,
    fontWeight: '600',
  },
});

export default WeightInputCard;