import React, { useEffect, useState, useRef } from 'react';

import {

    StyleSheet,

    Text,

    View,

    Image,

    ScrollView,

    TouchableOpacity,

    Alert,

} from 'react-native';

export default function HomeScreen() {

    const [eldersData, setEldersData] = useState([]);

    const previousActivityRef = useRef({}); // Track previous activity states

    useEffect(() => {

        // Function to fetch elder data

        const fetchEldersData = () => {

            fetch('http://192.168.10.7:5000/get_elders') // Replace with your local IP

                .then((response) => response.json())

                .then((data) => {

                    // Check for activity change to 'Shuffling'

                    data.forEach((elder) => {

                        const prevActivity =

                            previousActivityRef.current[elder.id];

                        if (

                            prevActivity &&

                            prevActivity !== 'Shuffling' &&

                            elder.activity === 'Shuffling'

                        ) {

                            Alert.alert(

                                'Alert',

                                `${elder.name} has started shuffling.`

                            );

                        }

                        // Update previous activity state

                        previousActivityRef.current[elder.id] = elder.activity;

                    });

                    setEldersData(data);

                })

                .catch((error) =>

                    console.error('Error fetching elders data:', error)

                );

        };

        // Fetch data immediately

        fetchEldersData();

        // Set up interval to fetch data every second

        const intervalId = setInterval(fetchEldersData, 1000); // 1000ms = 1s

        // Clear interval on component unmount

        return () => clearInterval(intervalId);

    }, []);

    const handleRemove = (id) => {

        const apiUrl = `http://192.168.10.7:5000/remove_elder/${id}`;

        fetch(apiUrl, { method: 'DELETE' })

            .then((response) => {

                if (!response.ok) {

                    throw new Error('Failed to remove elder.');

                }

                return response.json();

            })

            .then((data) => {

                if (data.message) {

                    setEldersData(

                        eldersData.filter((elder) => elder.id !== id)

                    );

                    Alert.alert('Success', data.message);

                } else {

                    Alert.alert('Error', 'Failed to remove elder.');

                }

            })

            .catch((error) => {

                Alert.alert('Server Error', error.message);

            });

    };

    const renderActivityIcon = (activity) => {

        switch (activity) {

            case 'Walking':

                return (

                    <Image

                        source={require('./assets/walking.png')}

                        style={styles.icon}

                    />

                );

            case 'Shuffling':

                return (

                    <Image

                        source={require('./assets/shuffling.png')}

                        style={styles.icon}

                    />

                );

            case 'Stairs (asce)':

                return (

                    <Image

                        source={require('./assets/stairs_ascending.png')}

                        style={styles.icon}

                    />

                );

            case 'Stairs (desc)':

                return (

                    <Image

                        source={require('./assets/stairs_descending.png')}

                        style={styles.icon}

                    />

                );

            case 'Standing':

                return (

                    <Image

                        source={require('./assets/standing.png')}

                        style={styles.icon}

                    />

                );

            case 'Sitting':

                return (

                    <Image

                        source={require('./assets/sitting.png')}

                        style={styles.icon}

                    />

                );

            case 'Lying':

                return (

                    <Image

                        source={require('./assets/lying.png')}

                        style={styles.icon}

                    />

                );

            default:

                return null;

        }

    };

    return (

        <View style={styles.container}>

            <View style={styles.header}>

                <Image

                    source={require('./assets/logo.png')} // Replace with your logo path

                    style={styles.logo}

                />

                <Text style={styles.appName}>ElderCare+</Text>

                <Text style={styles.slogan}>Caring for Every Step</Text>

            </View>

            <View style={styles.content}>

                <ScrollView contentContainerStyle={styles.scrollContainer}>

                    {eldersData.map((elder) => (

                        <View

                            key={elder.id}

                            style={[

                                styles.tile,

                                elder.activity === 'Shuffling' &&

                                    styles.shufflingTile,

                            ]}>

                            <Text style={styles.elderName}>{elder.name}</Text>

                            {renderActivityIcon(elder.activity)}

                            <View style={styles.activityContainer}>

                                <Text style={styles.activityText}>

                                    {elder.activity}

                                </Text>

                            </View>

                            <TouchableOpacity

                                style={styles.removeButton}

                                onPress={() => handleRemove(elder.id)} // Handle removal

                            >

                                <Image

                                    source={require('./assets/remove.png')}

                                    style={styles.icon}

                                />

                            </TouchableOpacity>

                        </View>

                    ))}

                </ScrollView>

            </View>

        </View>

    );

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

        backgroundColor: '#F2F4F9',

    },

    header: {

        flex: 0.3, // Occupies 30% of the screen height

        justifyContent: 'center',

        alignItems: 'center',

        backgroundColor: '#2D328C',

        padding: 20,

        borderBottomRightRadius: 30,

        borderBottomLeftRadius: 30,

    },

    logo: {

        width: 100,

        height: 100,

        resizeMode: 'contain',

    },

    appName: {

        fontSize: 24,

        color: '#fff',

        fontWeight: 'bold',

        marginTop: 10,

    },

    slogan: {

        fontSize: 16,

        color: '#fff',

        marginTop: 5,

    },

    content: {

        flex: 0.7,

        padding: 20,

    },

    scrollContainer: {

        flexGrow: 1,

        justifyContent: 'flex-start',

    },

    tile: {

        backgroundColor: '#fff',

        borderRadius: 15,

        padding: 20,

        marginBottom: 20,

        flexDirection: 'row',

        alignItems: 'center',

        shadowColor: '#000',

        shadowOffset: { width: 0, height: 4 },

        shadowOpacity: 0.1,

        shadowRadius: 5,

        elevation: 5,

        borderWidth: 1,

        borderColor: '#ddd',

    },

    shufflingTile: {

        borderColor: '#FF1B08', // Red color for shuffling

    },

    elderName: {

        flex: 1,

        fontSize: 16,

        color: '#000',

        marginRight: 10, // Add margin to the right of the elder name

    },

    activityContainer: {

        flexDirection: 'row',

        alignItems: 'center',

        width: '40%',

        marginLeft: 5,

    },

    activityText: {

        fontSize: 16,

        color: '#555',

        marginLeft: 5,

    },

    removeButton: {

        padding: 5,

    },

    icon: {

        width: 24,

        height: 24,

        resizeMode: 'contain',

    },

});