// screens/HomeScreen.js

import React, { useContext, useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  Dimensions,
} from 'react-native';
import { AuthContext } from '../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; // Ensure Icon is correctly imported
import { useTheme, ProgressBar, Button, Card } from 'react-native-paper';
import Carousel from 'react-native-reanimated-carousel';
import CarouselCard from '../Components/CarouselCard';
import { useNavigation } from '@react-navigation/native';
// Removed PropTypes import since it's not used directly here

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

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

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

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

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

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

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

  // Updated Data for the carousel excluding Settings and Resources
  const carouselItems = [
    {
      title: 'Calorie Tracker',
      iconName: 'fire',
      content: (
        <View>
          <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>
        </View>
      ),
      buttonTitle: 'Add Food',
      onPress: () => navigation.navigate('Nutrition'), // Ensure 'Nutrition' is registered
    },
    {
      title: 'Macro Nutrients',
      iconName: 'food',
      content: (
        <View>
          <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}
          />
        </View>
      ),
      // Set buttonTitle and onPress to undefined instead of null
      buttonTitle: undefined,
      onPress: undefined,
    },
    {
      title: 'Steps Tracker',
      iconName: 'walk',
      content: (
        <View>
          <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>
        </View>
      ),
      buttonTitle: 'View Steps',
      onPress: () => navigation.navigate('Steps'), // Ensure 'Steps' is registered
    },
    {
      title: 'Exercise Tracker',
      iconName: 'dumbbell',
      content: (
        <View>
          {exercises.map((exercise) => (
            <View key={exercise.id} style={styles.exerciseItem}>
              <Text style={[styles.cardText, { color: theme.colors.text }]}>
                {exercise.name} - {exercise.duration}
              </Text>
            </View>
          ))}
        </View>
      ),
      buttonTitle: 'Add Exercise',
      onPress: () => navigation.navigate('Exercises'), // Ensure 'Exercises' is registered
    },
    // Removed Settings and Resources from the carousel
  ];

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

  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>
        ) : (
          <Text style={[styles.title, { color: theme.colors.text }]}>
            Welcome!
          </Text>
        )}

        {/* Carousel Section */}
        <View style={styles.carouselContainer}>
          <Carousel
            width={screenWidth * 0.9} // Width of the carousel
            height={400} // Height of the carousel
            data={carouselItems}
            scrollAnimationDuration={1000}
            onSnapToItem={(index) => setActiveSlide(index)}
            renderItem={renderCarouselItem}
            mode="parallax" // Optional: choose the carousel mode
            modeConfig={{
              parallaxScrollingScale: 0.9,
              parallaxScrollingOffset: 50,
            }}
            loop={false} // Optional: enable or disable looping
          />
          {/* Custom Pagination */}
          <View style={styles.paginationContainer}>
            {carouselItems.map((_, index) => (
              <View
                key={index}
                style={[
                  styles.paginationDot,
                  activeSlide === index && { backgroundColor: theme.colors.primary },
                ]}
              />
            ))}
          </View>
        </View>

        {/* Buttons for Settings, Resources, Friends, and Community */}
        <View style={styles.buttonContainer}>
          <Button
            mode="contained"
            icon="cog"
            onPress={() => {
              console.log('Navigating to Settings');
              navigation.navigate('Settings');
            }}
            style={styles.actionButton}
          >
            <Text style={styles.buttonText}>Settings</Text>
          </Button>
          <Button
            mode="contained"
            icon="book-open-page-variant"
            onPress={() => {
              console.log('Navigating to Resources');
              navigation.navigate('Resources');
            }}
            style={styles.actionButton}
          >
            <Text style={styles.buttonText}>Resources</Text>
          </Button>
          <Button
            mode="contained"
            icon="account-group"
            onPress={() => {
              console.log('Navigating to Friends');
              navigation.navigate('Friends');
            }}
            style={styles.actionButton}
          >
            <Text style={styles.buttonText}>Friends</Text>
          </Button>
          <Button
            mode="contained"
            icon="account-supervisor"
            onPress={() => {
              console.log('Navigating to Community');
              navigation.navigate('Community');
            }}
            style={styles.actionButton}
          >
            <Text style={styles.buttonText}>Community</Text>
          </Button>
        </View>

        {/* Friends Overview Card */}
        <Card style={[styles.card, { backgroundColor: theme.colors.surface, marginTop: 10 }]}>
          <Card.Title
            title="Friends"
            titleStyle={styles.cardTitle}
            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={theme.colors.primary}
                  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')}>
              <Text style={styles.buttonText}>View Friends</Text>
            </Button>
          </Card.Actions>
        </Card>

        {/* Optional: Additional Features or Content */}
        {/* You can add more sections here if needed */}
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flexGrow: 1,
    padding: 20,
    paddingBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  carouselContainer: {
    height: 450, // Adjusted to accommodate carousel items and pagination
    marginBottom: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  paginationContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 10,
  },
  paginationDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: '#C4C4C4',
    marginHorizontal: 4,
  },
  buttonContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap', // Allow wrapping to the next line if necessary
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  actionButton: {
    width: '48%', // Adjusted to fit two buttons per row
    marginVertical: 5,
  },
  buttonText: {
    color: '#fff',
    fontWeight: '600',
  },
  card: {
    borderRadius: 10,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    padding: 10,
  },
  cardTitle: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  cardText: {
    fontSize: 16,
    marginBottom: 5,
  },
  progressBar: {
    height: 10,
    borderRadius: 5,
    marginVertical: 10,
  },
  exerciseItem: {
    marginBottom: 10,
  },
  friendItem: {
    marginBottom: 15,
  },
});

export default HomeScreen;

update the carosel to be faster less boxy like myfitnesspal move the dots soo its closer to the carousel cards change the view friends button style to match the other buttons