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

interface DietInputCardProps {
  cardId: string;
  dietTextInputs: Record<string, string>;
  onDietTextInputChange: (cardId: string, value: string) => void;
  onSubmitDietText: (cardId: string) => void;
  onBackToDietOptions: (cardId: string) => void;
  onShowDietPhotoActionSheet: (cardId: string) => void;
}

const DietInputCard: React.FC<DietInputCardProps> = ({
  cardId,
  dietTextInputs,
  onDietTextInputChange,
  onSubmitDietText,
  onBackToDietOptions,
  onShowDietPhotoActionSheet
}) => {
  const colorScheme = useColorScheme();
  const theme = Colors[colorScheme ?? 'light'];

  return (
    <View style={[styles.bubble, { backgroundColor: theme.surface }]}>
      <View style={styles.dietInputHeader}>
        <TouchableOpacity
          style={styles.dietBackBtn}
          onPress={() => onBackToDietOptions(cardId)}
        >
          <Ionicons name="arrow-back" size={16} color={theme.text} />
        </TouchableOpacity>
        <Text style={[styles.dietInputTitle, { color: theme.text }]}>记录饮食</Text>
        <TouchableOpacity
          style={[styles.photoBtn, { backgroundColor: `${theme.primary}20` }]}
          onPress={() => onShowDietPhotoActionSheet(cardId)}
        >
          <Ionicons name="camera" size={16} color={theme.primary} />
        </TouchableOpacity>
      </View>

      <TextInput
        style={[styles.dietTextInput, {
          color: theme.text,
          borderColor: theme.border,
          backgroundColor: theme.background
        }]}
        placeholder="描述你吃了什么，比如：早餐吃了一个苹果、一杯牛奶..."
        placeholderTextColor={theme.textMuted}
        value={dietTextInputs[cardId] || ''}
        onChangeText={(text) => onDietTextInputChange(cardId, text)}
        multiline
        textAlignVertical="top"
      />

      <TouchableOpacity
        style={[styles.dietSubmitBtn, { backgroundColor: theme.primary }]}
        onPress={() => onSubmitDietText(cardId)}
      >
        <Text style={[styles.submitButtonText, { color: theme.onPrimary }]}>提交</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  bubble: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 16,
    maxWidth: '85%',
    alignSelf: 'flex-start',
    gap: 12,
    minWidth: 300
  },
  dietInputHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  dietBackBtn: {
    width: 28,
    height: 28,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.06)',
  },
  dietInputTitle: {
    fontSize: 16,
    fontWeight: '600',
    flex: 1,
    textAlign: 'center',
  },
  photoBtn: {
    width: 28,
    height: 28,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dietTextInput: {
    minHeight: 80,
    borderWidth: 1,
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 15,
    textAlignVertical: 'top',
  },
  dietSubmitBtn: {
    height: 40,
    paddingHorizontal: 16,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'flex-end',
  },
  submitButtonText: {
    fontSize: 14,
    fontWeight: '600',
  },
});

export default DietInputCard;