// screens/HomeScreen.js

import React, { useContext, useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  Dimensions,
} from 'react-native';
import { AuthContext } from '../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useTheme, ProgressBar, Button } from 'react-native-paper';
import { Swipeable } from 'react-native-gesture-handler';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import CarouselCard from '../Components/CarouselCard';
// Import specific Carousel Cards if created
// import CalorieTrackerCard from '../components/CalorieTrackerCard';
// import MacroNutrientsCard from '../components/MacroNutrientsCard';
// import StepsTrackerCard from '../components/StepsTrackerCard';
// import ExerciseTrackerCard from '../components/ExerciseTrackerCard';

const { width: screenWidth } = Dimensions.get('window');

const HomeScreen = ({ navigation }) => {
  const { user } = useContext(AuthContext);
  const theme = useTheme();

  // Example data; replace with real data sources
  const [caloriesConsumed, setCaloriesConsumed] = useState(1500);
  const dailyCalorieGoal = 2000;

  const [steps, setSteps] = useState(7500);
  const dailyStepGoal = 10000;

  const [exercises, setExercises] = useState([
    { id: '1', name: 'Push Ups', duration: '30 mins' },
    { id: '2', name: 'Running', duration: '45 mins' },
  ]);

  const [friends, setFriends] = useState([
    { id: '1', name: 'Alice', progress: 60 },
    { id: '2', name: 'Bob', progress: 80 },
  ]);

  // State for Carousel Pagination
  const [activeSlide, setActiveSlide] = useState(0);

  const menuItems = [
    {
      title: 'Exercises',
      icon: 'run',
      onPress: () => navigation.navigate('Exercises'),
    },
    {
      title: 'Progress',
      icon: 'chart-line',
      onPress: () => navigation.navigate('Progress'),
    },
    {
      title: 'Body Analysis',
      icon: 'human-male-height',
      onPress: () => navigation.navigate('BodyAnalysis'),
    },
    {
      title: 'Nutrition',
      icon: 'food-apple',
      onPress: () => navigation.navigate('Nutrition'),
    },
    {
      title: 'Resources',
      icon: 'book-open-page-variant',
      onPress: () => navigation.navigate('Resources'),
    },
    {
      title: 'Settings',
      icon: 'cog',
      onPress: () => navigation.navigate('Settings'),
    },
    // **New Menu Items**
    {
      title: 'Community',
      icon: 'account-group', // Choose an appropriate icon
      onPress: () => navigation.navigate('Community'),
    },
    {
      title: 'Avatar',
      icon: 'account-circle', // Choose an appropriate icon
      onPress: () => navigation.navigate('Avatar'),
    },
  ];

  // Data for the carousel
  const carouselItems = [
    {
      title: 'Calorie Tracker',
      iconName: 'fire',
      content: (
        <>
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Consumed: {caloriesConsumed} kcal
          </Text>
          <ProgressBar
            progress={caloriesConsumed / dailyCalorieGoal}
            color={theme.colors.primary}
            style={styles.progressBar}
          />
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Remaining: {dailyCalorieGoal - caloriesConsumed} kcal
          </Text>
        </>
      ),
      buttonTitle: 'Add Food',
      onPress: () => navigation.navigate('Nutrition'),
      icon: 'fire',
    },
    {
      title: 'Macro Nutrients',
      iconName: 'nutrition',
      content: (
        <>
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Protein: 120g
          </Text>
          <ProgressBar
            progress={120 / 200} // Example: 200g/day goal
            color="#8BC34A"
            style={styles.progressBar}
          />
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Carbs: 250g
          </Text>
          <ProgressBar
            progress={250 / 300} // Example: 300g/day goal
            color="#03A9F4"
            style={styles.progressBar}
          />
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Fat: 70g
          </Text>
          <ProgressBar
            progress={70 / 100} // Example: 100g/day goal
            color="#FF9800"
            style={styles.progressBar}
          />
        </>
      ),
      buttonTitle: null,
      onPress: null,
      icon: 'nutrition',
    },
    {
      title: 'Steps Tracker',
      iconName: 'walk',
      content: (
        <>
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Steps Taken: {steps}
          </Text>
          <ProgressBar
            progress={steps / dailyStepGoal}
            color={theme.colors.primary}
            style={styles.progressBar}
          />
          <Text style={[styles.cardText, { color: theme.colors.text }]}>
            Steps Remaining: {dailyStepGoal - steps}
          </Text>
        </>
      ),
      buttonTitle: 'View Steps',
      onPress: () => navigation.navigate('Steps'),
      icon: 'walk',
    },
    {
      title: 'Exercise Tracker',
      iconName: 'dumbbell',
      content: (
        <>
          {exercises.map((exercise) => (
            <View key={exercise.id} style={styles.exerciseItem}>
              <Text style={[styles.cardText, { color: theme.colors.text }]}>
                {exercise.name} - {exercise.duration}
              </Text>
            </View>
          ))}
        </>
      ),
      buttonTitle: 'Add Exercise',
      onPress: () => navigation.navigate('Exercises'),
      icon: 'dumbbell',
    },
  ];

  const renderCarouselItem = ({ item, index }) => (
    <CarouselCard
      key={index}
      title={item.title}
      iconName={item.iconName}
      buttonTitle={item.buttonTitle}
      onPress={item.onPress}
    >
      {item.content}
    </CarouselCard>
  );

  const carouselLayout = {
    sliderWidth: screenWidth,
    itemWidth: screenWidth * 0.8,
    // You can adjust these based on your design preferences
  };

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.colors.background }]}>
      <ScrollView contentContainerStyle={styles.container}>
        {/* Welcome Message */}
        {user && (
          <Text style={[styles.title, { color: theme.colors.text }]}>
            Welcome, {user.name}!
          </Text>
        )}
        {!user && (
          <Text style={[styles.title, { color: theme.colors.text }]}>
            Welcome!
          </Text>
        )}

        {/* Carousel Section */}
        <View style={styles.carouselContainer}>
          <Carousel
            data={carouselItems}
            renderItem={renderCarouselItem}
            sliderWidth={carouselLayout.sliderWidth}
            itemWidth={carouselLayout.itemWidth}
            loop={true}
            autoplay={false}
            inactiveSlideScale={0.94}
            inactiveSlideOpacity={0.7}
            onSnapToItem={(index) => setActiveSlide(index)}
            containerCustomStyle={styles.carousel}
            contentContainerCustomStyle={styles.carouselContent}
            slideStyle={styles.slideStyle}
          />
          <Pagination
            dotsLength={carouselItems.length}
            activeDotIndex={activeSlide}
            containerStyle={styles.paginationContainer}
            dotStyle={styles.paginationDot}
            inactiveDotOpacity={0.4}
            inactiveDotScale={0.6}
          />
        </View>

        {/* Friends Overview Card */}
        <Card style={[styles.card, { backgroundColor: theme.colors.surface, marginTop: 10 }]}>
          <Card.Title
            title="Friends"
            left={(props) => <Icon {...props} name="account-group" size={30} color={theme.colors.primary} />}
          />
          <Card.Content>
            {friends.map((friend) => (
              <View key={friend.id} style={styles.friendItem}>
                <Text style={[styles.cardText, { color: theme.colors.text }]}>
                  {friend.name}
                </Text>
                <ProgressBar
                  progress={friend.progress / 100}
                  color="#6200EE"
                  style={styles.progressBar}
                />
                <Text style={[styles.cardText, { color: theme.colors.text }]}>
                  Progress: {friend.progress}%
                </Text>
              </View>
            ))}
          </Card.Content>
          <Card.Actions>
            <Button onPress={() => navigation.navigate('Friends')}>View Friends</Button>
          </Card.Actions>
        </Card>

        {/* Menu Items */}
        <View style={styles.menuContainer}>
          {menuItems.map((item, index) => (
            <TouchableOpacity
              key={index}
              style={[
                styles.menuItem,
                { backgroundColor: theme.colors.surface },
              ]}
              onPress={item.onPress}
              accessibilityLabel={`Navigate to ${item.title}`}
              accessibilityRole="button"
            >
              <Icon
                name={item.icon}
                size={30}
                color={theme.colors.primary}
              />
              <Text
                style={[
                  styles.menuText,
                  { color: theme.colors.text },
                ]}
              >
                {item.title}
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flexGrow: 1,
    padding: 20,
    paddingBottom: 40,
    // backgroundColor is handled by SafeAreaView
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
    // color is handled dynamically
  },
  carouselContainer: {
    height: 350, // Adjust based on card height
    marginBottom: 20,
  },
  carousel: {
    // Optional: Customize carousel container
  },
  carouselContent: {
    // Optional: Customize carousel content
  },
  slideStyle: {
    // Optional: Customize each slide
  },
  paginationContainer: {
    paddingVertical: 8,
  },
  paginationDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    marginHorizontal: 8,
    backgroundColor: '#4F8EF7', // Customize based on theme
  },
  card: {
    borderRadius: 10,
    elevation: 3, // For Android shadow
    shadowColor: '#000', // For iOS shadow
    shadowOffset: { width: 0, height: 2 }, // For iOS shadow
    shadowOpacity: 0.1, // For iOS shadow
    shadowRadius: 5, // For iOS shadow
  },
  cardText: {
    fontSize: 16,
    marginBottom: 5,
    // color is handled dynamically
  },
  progressBar: {
    height: 10,
    borderRadius: 5,
    marginVertical: 10,
  },
  swipeableLeft: {
    backgroundColor: '#4CAF50',
    justifyContent: 'center',
    flex: 1,
  },
  swipeText: {
    color: '#fff',
    fontWeight: 'bold',
    paddingHorizontal: 20,
  },
  exerciseItem: {
    marginBottom: 10,
  },
  friendItem: {
    marginBottom: 15,
  },
  menuContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginTop: 30,
  },
  menuItem: {
    width: '45%',
    borderRadius: 10,
    padding: 20,
    marginBottom: 20,
    alignItems: 'center',
    justifyContent: 'center',
    // Shadow for iOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    // Elevation for Android
    elevation: 3,
  },
  menuText: {
    marginTop: 10,
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
    // color is handled dynamically
  },
});

export default HomeScreen;

 ERROR  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:24.
    in ThemeProvider (created by App)
    in AuthProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Context.Consumer`.