ERROR  [AxiosError: Request failed with status code 401]
// screens/ProgressScreen.js
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import ProgressInput from '../Components/ProgressInput';
import ProgressChart from '../Components/ProgressChart';

const ProgressScreen = ({ token }) => {
    return (
        <ScrollView contentContainerStyle={styles.container}>
            <ProgressInput token={token} />
            <ProgressChart token={token} />
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: { padding: 20 },
});

export default ProgressScreen;

// components/ProgressInput.js
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet, Alert, ScrollView, Text } from 'react-native';
import axios from 'axios';

const ProgressInput = ({ token }) => {
    const [weight, setWeight] = useState('');
    const [muscleMass, setMuscleMass] = useState('');
    const [fatPercentage, setFatPercentage] = useState('');
    const [chest, setChest] = useState('');
    const [waist, setWaist] = useState('');
    const [hips, setHips] = useState('');

    const submitProgress = async () => {
        if (!weight || !muscleMass || !fatPercentage) {
            Alert.alert('Missing Data', 'Please fill in all required fields.');
            return;
        }

        const payload = {
            weight: parseFloat(weight),
            muscleMass: parseFloat(muscleMass),
            fatPercentage: parseFloat(fatPercentage),
            measurements: {
                chest: chest ? parseFloat(chest) : undefined,
                waist: waist ? parseFloat(waist) : undefined,
                hips: hips ? parseFloat(hips) : undefined,
            }
        };

        try {
            await axios.post('http://10.0.0.203:5000/api/progress', payload, {
                headers: {
                    'Authorization': token,
                    'Content-Type': 'application/json'
                }
            });
            Alert.alert('Success', 'Progress recorded successfully!');
            // Reset form
            setWeight('');
            setMuscleMass('');
            setFatPercentage('');
            setChest('');
            setWaist('');
            setHips('');
        } catch (err) {
            console.error(err);
            Alert.alert('Error', 'Failed to record progress.');
        }
    };

    return (
        <ScrollView contentContainerStyle={styles.container}>
            <Text style={styles.label}>Weight (kg/lbs)</Text>
            <TextInput
                style={styles.input}
                value={weight}
                onChangeText={setWeight}
                keyboardType="numeric"
                placeholder="e.g., 70"
            />

            <Text style={styles.label}>Muscle Mass (kg)</Text>
            <TextInput
                style={styles.input}
                value={muscleMass}
                onChangeText={setMuscleMass}
                keyboardType="numeric"
                placeholder="e.g., 30"
            />

            <Text style={styles.label}>Fat Percentage (%)</Text>
            <TextInput
                style={styles.input}
                value={fatPercentage}
                onChangeText={setFatPercentage}
                keyboardType="numeric"
                placeholder="e.g., 15"
            />

            <Text style={styles.label}>Chest (cm/in)</Text>
            <TextInput
                style={styles.input}
                value={chest}
                onChangeText={setChest}
                keyboardType="numeric"
                placeholder="optional"
            />

            <Text style={styles.label}>Waist (cm/in)</Text>
            <TextInput
                style={styles.input}
                value={waist}
                onChangeText={setWaist}
                keyboardType="numeric"
                placeholder="optional"
            />

            <Text style={styles.label}>Hips (cm/in)</Text>
            <TextInput
                style={styles.input}
                value={hips}
                onChangeText={setHips}
                keyboardType="numeric"
                placeholder="optional"
            />

            <Button title="Submit Progress" onPress={submitProgress} />
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: { padding: 20 },
    input: { borderWidth: 1, borderColor: '#ccc', padding: 10, marginBottom: 15, borderRadius: 5 },
    label: { marginBottom: 5, fontWeight: 'bold' },
});

export default ProgressInput;

// components/ProgressChart.js
import React, { useEffect, useState } from 'react';
import { View, Text, Dimensions, StyleSheet, ActivityIndicator } from 'react-native';
import axios from 'axios';
import { LineChart, BarChart } from 'react-native-chart-kit';

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

const ProgressChart = ({ token }) => {
    const [progressData, setProgressData] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchProgress = async () => {
            try {
                const res = await axios.get('http://10.0.0.203:5000/api/progress', {
                    headers: {
                        'Authorization': token
                    }
                });
                setProgressData(res.data);
            } catch (err) {
                console.error(err);
            } finally {
                setLoading(false);
            }
        };
        fetchProgress();
    }, []);

    if (loading) {
        return <ActivityIndicator size="large" color="#0000ff" />;
    }

    if (progressData.length === 0) {
        return <Text>No progress data available.</Text>;
    }

    // Prepare data for charts
    const labels = progressData.map(entry => new Date(entry.date).toLocaleDateString());
    const weights = progressData.map(entry => entry.weight);
    const muscleMass = progressData.map(entry => entry.muscleMass);
    const fatPercentage = progressData.map(entry => entry.fatPercentage);

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Weight Tracking</Text>
            <LineChart
                data={{
                    labels,
                    datasets: [
                        { data: weights }
                    ]
                }}
                width={screenWidth - 40}
                height={220}
                yAxisSuffix="kg"
                chartConfig={chartConfig}
                bezier
                style={styles.chart}
            />

            <Text style={styles.title}>Muscle Mass</Text>
            <LineChart
                data={{
                    labels,
                    datasets: [
                        { data: muscleMass }
                    ]
                }}
                width={screenWidth - 40}
                height={220}
                yAxisSuffix="kg"
                chartConfig={chartConfig}
                bezier
                style={styles.chart}
            />

            <Text style={styles.title}>Fat Percentage</Text>
            <LineChart
                data={{
                    labels,
                    datasets: [
                        { data: fatPercentage }
                    ]
                }}
                width={screenWidth - 40}
                height={220}
                yAxisSuffix="%"
                chartConfig={chartConfig}
                bezier
                style={styles.chart}
            />
        </View>
    );
};

const chartConfig = {
    backgroundGradientFrom: "#ffffff",
    backgroundGradientTo: "#ffffff",
    decimalPlaces: 1,
    color: (opacity = 1) => `rgba(0, 123, 255, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
    style: { borderRadius: 16 },
    propsForDots: { r: "6", strokeWidth: "2", stroke: "#ffa726" }
};

const styles = StyleSheet.create({
    container: { alignItems: 'center', padding: 20 },
    title: { fontSize: 18, fontWeight: 'bold', marginTop: 20, marginBottom: 10 },
    chart: { borderRadius: 16 },
});

export default ProgressChart;