// screens/NutritionScreen.js


import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Modal,
  TextInput,
  Alert,
  SafeAreaView,
} 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',
  });


  // State for selected items
  const [selectedIds, setSelectedIds] = useState([]);


  // State for search query
  const [searchQuery, setSearchQuery] = useState('');


  // Calculate total nutrients based on filtered items
  const filteredFoodItems = foodItems.filter((item) =>
    item.name.toLowerCase().includes(searchQuery.toLowerCase())
  );


  const totals = filteredFoodItems.reduce(
    (acc, item) => {
      acc.calories += parseFloat(item.calories)
Protein: {item.protein}g
Fat: {item.fat}g
         
       
        {/ Removed DeleteButton from here /}
     
    );
  };


  return (
   
     
        {/ Header Section /}
       
          {/ Search Bar /}
                      style={[
              styles.searchInput,
              {
                borderColor: theme.colors.border,
                backgroundColor: theme.colors.surface,
                color: theme.colors.text,
              },
            ]}
            placeholder="Search food items..."
            placeholderTextColor={theme.colors.placeholder}
            value={searchQuery}
            onChangeText={(text) => setSearchQuery(text)}
            returnKeyType="search"
            accessibilityLabel="Search food items"
          />
          {/ Barcode Button /}
                      style={styles.barcodeButton}
            onPress={handleBarcodeScan}
            accessibilityLabel="Scan barcode"
            accessibilityRole="button"
          >
           
         
       


        {/ Total Nutrients Summary /}
                  style={[
            styles.summaryContainer,
            { borderColor: theme.colors.border, backgroundColor: theme.colors.surface },
          ]}
        >
         
            Total Calories: {totals.calories} kcal
         
         
            Protein: {totals.protein}g
Fat: {totals.fat}g
         
       


        {/ Food Items List /}
                  data={filteredFoodItems}
          keyExtractor={(item) => item.id}
          renderItem={renderItem}
          contentContainerStyle={styles.list}
          ItemSeparatorComponent={() => }
        />


        {/ Add Food Button /}
                  style={[styles.addButton, { backgroundColor: theme.colors.primary }]}
          onPress={() => setModalVisible(true)}
          accessibilityLabel="Add a new food item"
          accessibilityRole="button"
        >
         
          Add Food
       


        {/ Floating Delete Button for Selected Items /}
        {selectedIds.length > 0 && (
                      style={styles.floatingDeleteButton}
            onPress={deleteSelectedItems}
            accessibilityLabel="Delete selected food items"
            accessibilityRole="button"
          >
            Delete Selected
         
        )}


        {/ Add Food Modal /}
                  visible={modalVisible}
          animationType="slide"
          transparent={true}
          onRequestClose={() => setModalVisible(false)}
        >
         
                          style={[
                styles.modalContainer,
                { backgroundColor: theme.colors.background },
              ]}
            >
             
                Add New Food
             
                              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 })}
              />
                              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 })}
              />
                              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 })}
              />
                              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 })}
              />
                              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 /}
                              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 })}
              />
             
                
                  Add
               
                                  mode="outlined"
                  onPress={() => setModalVisible(false)}
                  style={{ marginLeft: 10 }}
                >
                  Cancel
               
             
           
         
       
     
   
  );
};


// Removed DeleteButton Component as per your request


const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flex: 1,
    paddingHorizontal: 20,
    paddingTop: 10, // Adjust as needed for alignment
    paddingBottom: 20,
    // backgroundColor handled by theming
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
  },
  searchInput: {
    flex: 1,
    height: 40,
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10,
    fontSize: 16,
  },
  barcodeButton: {
    marginLeft: 10,
    padding: 8,
    borderRadius: 8,
    backgroundColor: '#F0F0F0', // Light gray background for contrast
    justifyContent: 'center',
    alignItems: 'center',
  },
  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
  },
  selectedItem: {
    backgroundColor: '#D1F2EB', // Light teal background for selection
  },
  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',
  },
  floatingDeleteButton: {
    position: 'absolute',
    bottom: 90,
    right: 20,
    backgroundColor: '#E74C3C',
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 25,
    elevation: 5,
  },
  floatingDeleteButtonText: {
    color: '#fff',
    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;

i want to separate it to different components like searchbar, barcode , Total Calorie card
then update the code