i want to be able to remove items there should be a red line on the right side that allows you to remove items
// screens/NutritionScreen.js

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Modal,
  TextInput,
  Alert,
} from 'react-native';
import { useTheme, Button } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; // Ensure this is installed

const NutritionScreen = () => {
  const theme = useTheme(); // Access the current theme

  // State to manage food items
  const [foodItems, setFoodItems] = useState([
    {
      id: '1',
      name: 'Apple',
      calories: 95,
      protein: 0.5,
      carbs: 25,
      fat: 0.3,
      icon: 'food-apple',
    },
    {
      id: '2',
      name: 'Banana',
      calories: 105,
      protein: 1.3,
      carbs: 27,
      fat: 0.4,
      icon: 'food-croissant',
    },
    {
      id: '3',
      name: 'Grilled Chicken Breast',
      calories: 165,
      protein: 31,
      carbs: 0,
      fat: 3.6,
      icon: 'food-steak',
    },
    // Add more initial food items as needed
  ]);

  // State for modal visibility and new food entry
  const [modalVisible, setModalVisible] = useState(false);
  const [newFood, setNewFood] = useState({
    name: '',
    calories: '',
    protein: '',
    carbs: '',
    fat: '',
    icon: 'food',
  });

  // Calculate total nutrients
  const totals = foodItems.reduce(
    (acc, item) => {
      acc.calories += parseFloat(item.calories) || 0;
      acc.protein += parseFloat(item.protein) || 0;
      acc.carbs += parseFloat(item.carbs) || 0;
      acc.fat += parseFloat(item.fat) || 0;
      return acc;
    },
    { calories: 0, protein: 0, carbs: 0, fat: 0 }
  );

  // Handle adding new food item
  const addFoodItem = () => {
    if (
      !newFood.name ||
      !newFood.calories ||
      !newFood.protein ||
      !newFood.carbs ||
      !newFood.fat
    ) {
      Alert.alert('Error', 'Please fill in all fields.');
      return;
    }

    const newItem = {
      id: (foodItems.length + 1).toString(),
      name: newFood.name,
      calories: parseFloat(newFood.calories),
      protein: parseFloat(newFood.protein),
      carbs: parseFloat(newFood.carbs),
      fat: parseFloat(newFood.fat),
      icon: newFood.icon,
    };

    setFoodItems([...foodItems, newItem]);
    setNewFood({
      name: '',
      calories: '',
      protein: '',
      carbs: '',
      fat: '',
      icon: 'food',
    });
    setModalVisible(false);
  };

  // Render each food item
  const renderItem = ({ item }) => (
    <View
      style={[
        styles.itemContainer,
        { borderColor: theme.colors.border, backgroundColor: theme.colors.surface },
      ]}
    >
      <Icon name={item.icon} size={30} color={theme.colors.primary} />
      <View style={styles.foodInfo}>
        <Text style={[styles.foodName, { color: theme.colors.text }]}>
          {item.name}
        </Text>
        <Text style={[styles.nutrients, { color: theme.colors.text }]}>
          Calories: {item.calories} | Protein: {item.protein}g | Carbs: {item.carbs}g | Fat: {item.fat}g
        </Text>
      </View>
    </View>
  );

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
      {/* Total Nutrients Summary */}
      <View
        style={[
          styles.summaryContainer,
          { borderColor: theme.colors.border, backgroundColor: theme.colors.surface },
        ]}
      >
        <Text style={[styles.summaryText, { color: theme.colors.text }]}>
          Total Calories: {totals.calories} kcal
        </Text>
        <Text style={[styles.summaryText, { color: theme.colors.text }]}>
          Protein: {totals.protein}g | Carbs: {totals.carbs}g | Fat: {totals.fat}g
        </Text>
      </View>

      {/* Food Items List */}
      <FlatList
        data={foodItems}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        contentContainerStyle={styles.list}
        ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
      />

      {/* Add Food Button */}
      <TouchableOpacity
        style={[styles.addButton, { backgroundColor: theme.colors.primary }]}
        onPress={() => setModalVisible(true)}
        accessibilityLabel="Add a new food item"
        accessibilityRole="button"
      >
        <Icon name="plus" size={20} color="#fff" />
        <Text style={styles.addButtonText}>Add Food</Text>
      </TouchableOpacity>

      {/* Add Food Modal */}
      <Modal
        visible={modalVisible}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View
            style={[
              styles.modalContainer,
              { backgroundColor: theme.colors.background },
            ]}
          >
            <Text style={[styles.modalTitle, { color: theme.colors.text }]}>
              Add New Food
            </Text>
            <TextInput
              style={[
                styles.input,
                {
                  borderColor: theme.colors.border,
                  color: theme.colors.text,
                },
              ]}
              placeholder="Food Name"
              placeholderTextColor={theme.colors.placeholder}
              value={newFood.name}
              onChangeText={(text) => setNewFood({ ...newFood, name: text })}
            />
            <TextInput
              style={[
                styles.input,
                {
                  borderColor: theme.colors.border,
                  color: theme.colors.text,
                },
              ]}
              placeholder="Calories"
              placeholderTextColor={theme.colors.placeholder}
              keyboardType="numeric"
              value={newFood.calories}
              onChangeText={(text) => setNewFood({ ...newFood, calories: text })}
            />
            <TextInput
              style={[
                styles.input,
                {
                  borderColor: theme.colors.border,
                  color: theme.colors.text,
                },
              ]}
              placeholder="Protein (g)"
              placeholderTextColor={theme.colors.placeholder}
              keyboardType="numeric"
              value={newFood.protein}
              onChangeText={(text) => setNewFood({ ...newFood, protein: text })}
            />
            <TextInput
              style={[
                styles.input,
                {
                  borderColor: theme.colors.border,
                  color: theme.colors.text,
                },
              ]}
              placeholder="Carbs (g)"
              placeholderTextColor={theme.colors.placeholder}
              keyboardType="numeric"
              value={newFood.carbs}
              onChangeText={(text) => setNewFood({ ...newFood, carbs: text })}
            />
            <TextInput
              style={[
                styles.input,
                {
                  borderColor: theme.colors.border,
                  color: theme.colors.text,
                },
              ]}
              placeholder="Fat (g)"
              placeholderTextColor={theme.colors.placeholder}
              keyboardType="numeric"
              value={newFood.fat}
              onChangeText={(text) => setNewFood({ ...newFood, fat: text })}
            />
            {/* Icon selection can be enhanced with a picker */}
            <TextInput
              style={[
                styles.input,
                {
                  borderColor: theme.colors.border,
                  color: theme.colors.text,
                },
              ]}
              placeholder="Icon Name (e.g., food-apple)"
              placeholderTextColor={theme.colors.placeholder}
              value={newFood.icon}
              onChangeText={(text) => setNewFood({ ...newFood, icon: text })}
            />
            <View style={styles.modalButtons}>
              <Button mode="contained" onPress={addFoodItem}>
                Add
              </Button>
              <Button
                mode="outlined"
                onPress={() => setModalVisible(false)}
                style={{ marginLeft: 10 }}
              >
                Cancel
              </Button>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    // backgroundColor handled by theming
  },
  summaryContainer: {
    padding: 15,
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 15,
    // borderColor and backgroundColor handled dynamically
  },
  summaryText: {
    fontSize: 16,
    fontWeight: '600',
  },
  list: {
    paddingBottom: 20,
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderWidth: 1,
    borderRadius: 8,
    // borderColor and backgroundColor handled dynamically
  },
  foodInfo: {
    marginLeft: 15,
    flex: 1,
  },
  foodName: {
    fontSize: 18,
    fontWeight: 'bold',
    // color handled dynamically
  },
  nutrients: {
    marginTop: 5,
    fontSize: 14,
    // color handled dynamically
  },
  addButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 15,
    borderRadius: 8,
    position: 'absolute',
    bottom: 20,
    left: 20,
    right: 20,
    // backgroundColor handled dynamically
  },
  addButtonText: {
    color: '#fff',
    marginLeft: 10,
    fontSize: 16,
    fontWeight: '600',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    width: '90%',
    padding: 20,
    borderRadius: 8,
    // backgroundColor handled dynamically
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15,
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderRadius: 6,
    padding: 10,
    marginBottom: 10,
    fontSize: 16,
    // borderColor and color handled dynamically
  },
  modalButtons: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 10,
  },
});

export default NutritionScreen;