Separate Code and Styles make sure its dynamic this is for an expo mobile project.
// frontend/screens/Routines/RoutineCreationScreen.js
import React, { useState, useContext } from 'react';
import { View, StyleSheet, ScrollView, Alert } from 'react-native';
import {
  Text,
  Button,
  ProgressBar,
  Chip,
  useTheme,
  TextInput,
  Checkbox,
} from 'react-native-paper';
import { AuthContext } from '../../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import RNPickerSelect from 'react-native-picker-select';

const STEPS = {
  FITNESS_GOALS: 0,
  SCHEDULE: 1,
  EXERCISES: 2,
  REST_RECOVERY: 3,
  REVIEW: 4,
};

const RoutineCreationScreen = ({ navigation }) => {
  const theme = useTheme();
  const { user } = useContext(AuthContext);
  const [currentStep, setCurrentStep] = useState(STEPS.FITNESS_GOALS);
  const [routineData, setRoutineData] = useState({
    goal: '',
    customGoal: '',
    schedule: {
      frequency: '',
      duration: '',
      preferredDays: [],
      timeOfDay: '',
      intensity: '',
    },
    exercises: [],
    rest: {
      restDays: [],
      cooldownRoutine: [],
      restBetweenSets: '',
    },
    routineName: '',
  });

  const fitnessGoals = [
    { label: 'Build Muscle', value: 'muscle', icon: 'dumbbell' },
    { label: 'Lose Weight', value: 'weight', icon: 'scale' },
    { label: 'Increase Flexibility', value: 'flexibility', icon: 'yoga' },
    { label: 'Improve Endurance', value: 'endurance', icon: 'run' },
    { label: 'Toning', value: 'toning', icon: 'human' },
    { label: 'General Fitness', value: 'general', icon: 'heart-pulse' },
    { label: 'Custom Goal', value: 'custom', icon: 'pencil' },
  ];

  const renderStepContent = () => {
    switch (currentStep) {
      case STEPS.FITNESS_GOALS:
        return renderFitnessGoalsStep();

      case STEPS.SCHEDULE:
        return renderScheduleStep();

      case STEPS.EXERCISES:
        return renderExercisesStep();

      case STEPS.REST_RECOVERY:
        return renderRestRecoveryStep();

      case STEPS.REVIEW:
        return renderReviewStep();

      default:
        return null;
    }
  };

  const renderFitnessGoalsStep = () => (
    <View>
      <Text style={styles.stepTitle}>Select Your Fitness Goals</Text>
      <View style={styles.goalsContainer}>
        {fitnessGoals.map((goal) => (
          <Chip
            key={goal.value}
            onPress={() => updateRoutineData('goal', goal.value)}
            selected={routineData.goal === goal.value}
            style={styles.goalChip}
            icon={() => (
              <Icon
                name={goal.icon}
                size={20}
                color={routineData.goal === goal.value ? '#fff' : theme.colors.primary}
              />
            )}
          >
            {goal.label}
          </Chip>
        ))}
      </View>
      {routineData.goal === 'custom' && (
        <TextInput
          label="Custom Goal"
          value={routineData.customGoal}
          onChangeText={(text) => updateRoutineData('customGoal', text)}
          style={styles.input}
          mode="outlined"
          placeholder="Enter your custom goal"
        />
      )}
    </View>
  );

  const renderScheduleStep = () => (
    <View>
      <Text style={styles.stepTitle}>Choose Your Workout Schedule</Text>

      <Text style={styles.inputLabel}>Workout Frequency</Text>
      <RNPickerSelect
        onValueChange={(value) => updateSchedule('frequency', value)}
        items={[
          { label: '1 day per week', value: '1' },
          { label: '2 days per week', value: '2' },
          { label: '3 days per week', value: '3' },
          { label: '4 days per week', value: '4' },
          { label: '5 days per week', value: '5' },
          { label: '6 days per week', value: '6' },
          { label: '7 days per week', value: '7' },
        ]}
        placeholder={{ label: 'Select workout frequency', value: null }}
        value={routineData.schedule.frequency}
        style={pickerSelectStyles}
      />

      <Text style={styles.inputLabel}>Workout Duration</Text>
      <RNPickerSelect
        onValueChange={(value) => updateSchedule('duration', value)}
        items={[
          { label: '30 minutes', value: '30' },
          { label: '45 minutes', value: '45' },
          { label: '60 minutes', value: '60' },
          { label: '90 minutes', value: '90' },
        ]}
        placeholder={{ label: 'Select workout duration', value: null }}
        value={routineData.schedule.duration}
        style={pickerSelectStyles}
      />

      <Text style={styles.inputLabel}>Preferred Days</Text>
      <View style={styles.daysContainer}>
        {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) => (
          <Chip
            key={day}
            onPress={() => togglePreferredDay(day)}
            selected={routineData.schedule.preferredDays.includes(day)}
            style={styles.dayChip}
          >
            {day}
          </Chip>
        ))}
      </View>

      <Text style={styles.inputLabel}>Time of Day</Text>
      <RNPickerSelect
        onValueChange={(value) => updateSchedule('timeOfDay', value)}
        items={[
          { label: 'Morning', value: 'morning' },
          { label: 'Afternoon', value: 'afternoon' },
          { label: 'Evening', value: 'evening' },
        ]}
        placeholder={{ label: 'Select time of day', value: null }}
        value={routineData.schedule.timeOfDay}
        style={pickerSelectStyles}
      />

      <Text style={styles.inputLabel}>Intensity</Text>
      <RNPickerSelect
        onValueChange={(value) => updateSchedule('intensity', value)}
        items={[
          { label: 'Low', value: 'low' },
          { label: 'Medium', value: 'medium' },
          { label: 'High', value: 'high' },
        ]}
        placeholder={{ label: 'Select intensity level', value: null }}
        value={routineData.schedule.intensity}
        style={pickerSelectStyles}
      />
    </View>
  );

  const renderExercisesStep = () => (
    <View>
      <Text style={styles.stepTitle}>Select Your Exercises</Text>
      {/* Placeholder for exercise selection UI */}
      <Text>
        Implement exercise selection here. You can include search functionality,
        categories, and selection of multiple exercises.
      </Text>
    </View>
  );

  const renderRestRecoveryStep = () => (
    <View>
      <Text style={styles.stepTitle}>Configure Rest & Recovery</Text>

      <Text style={styles.inputLabel}>Rest Days</Text>
      <View style={styles.daysContainer}>
        {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) => (
          <Chip
            key={day}
            onPress={() => toggleRestDay(day)}
            selected={routineData.rest.restDays.includes(day)}
            style={styles.dayChip}
          >
            {day}
          </Chip>
        ))}
      </View>

      <Text style={styles.inputLabel}>Cooldown Routine</Text>
      {/* Placeholder for cooldown routine selection */}
      <Text>
        Implement cooldown routine selection here. You can include predefined cooldowns or allow users to create their own.
      </Text>

      <Text style={styles.inputLabel}>Rest Between Sets (seconds)</Text>
      <TextInput
        label="Rest Between Sets"
        value={routineData.rest.restBetweenSets}
        onChangeText={(text) => updateRest('restBetweenSets', text)}
        style={styles.input}
        mode="outlined"
        keyboardType="numeric"
        placeholder="e.g., 30"
      />
    </View>
  );

  const renderReviewStep = () => (
    <View>
      <Text style={styles.stepTitle}>Review Your Routine</Text>
      <Card style={styles.reviewCard}>
        <Card.Title title="Routine Name" />
        <Card.Content>
          <Text>{routineData.routineName || 'N/A'}</Text>
        </Card.Content>
      </Card>

      <Card style={styles.reviewCard}>
        <Card.Title title="Fitness Goal" />
        <Card.Content>
          <Text>
            {routineData.goal === 'custom'
              ? routineData.customGoal
              : fitnessGoals.find((goal) => goal.value === routineData.goal)?.label || 'N/A'}
          </Text>
        </Card.Content>
      </Card>

      <Card style={styles.reviewCard}>
        <Card.Title title="Schedule" />
        <Card.Content>
          <Text>Frequency: {routineData.schedule.frequency} days/week</Text>
          <Text>Duration: {routineData.schedule.duration} minutes</Text>
          <Text>Preferred Days: {routineData.schedule.preferredDays.join(', ') || 'N/A'}</Text>
          <Text>Time of Day: {capitalizeFirstLetter(routineData.schedule.timeOfDay) || 'N/A'}</Text>
          <Text>Intensity: {capitalizeFirstLetter(routineData.schedule.intensity) || 'N/A'}</Text>
        </Card.Content>
      </Card>

      {/* Add Cards for Exercises and Rest & Recovery as they are implemented */}
    </View>
  );

  // Helper Function to Capitalize
  const capitalizeFirstLetter = (string) => {
    if (!string) return '';
    return string.charAt(0).toUpperCase() + string.slice(1);
  };

  // Update routine data
  const updateRoutineData = (field, value) => {
    setRoutineData((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  // Update schedule data
  const updateSchedule = (field, value) => {
    setRoutineData((prev) => ({
      ...prev,
      schedule: {
        ...prev.schedule,
        [field]: value,
      },
    }));
  };

  // Update rest data
  const updateRest = (field, value) => {
    setRoutineData((prev) => ({
      ...prev,
      rest: {
        ...prev.rest,
        [field]: value,
      },
    }));
  };

  // Toggle preferred workout days
  const togglePreferredDay = (day) => {
    setRoutineData((prev) => {
      const currentDays = prev.schedule.preferredDays;
      const updatedDays = currentDays.includes(day)
        ? currentDays.filter((d) => d !== day)
        : [...currentDays, day];

      return {
        ...prev,
        schedule: {
          ...prev.schedule,
          preferredDays: updatedDays,
        },
      };
    });
  };

  // Toggle rest days
  const toggleRestDay = (day) => {
    setRoutineData((prev) => {
      const currentDays = prev.rest.restDays;
      const updatedDays = currentDays.includes(day)
        ? currentDays.filter((d) => d !== day)
        : [...currentDays, day];

      return {
        ...prev,
        rest: {
          ...prev.rest,
          restDays: updatedDays,
        },
      };
    });
  };

  // Handle Next Button Press
  const handleNext = () => {
    if (!validateCurrentStep()) return;

    if (currentStep < STEPS.REVIEW) {
      setCurrentStep(currentStep + 1);
    } else {
      // Handle routine creation logic here
      Alert.alert('Success', 'Routine created successfully!');
      navigation.goBack();
    }
  };

  // Handle Back Button Press
  const handleBack = () => {
    if (currentStep > STEPS.FITNESS_GOALS) {
      setCurrentStep(currentStep - 1);
    } else {
      navigation.goBack();
    }
  };

  // Validate Current Step
  const validateCurrentStep = () => {
    switch (currentStep) {
      case STEPS.FITNESS_GOALS:
        if (!routineData.goal) {
          Alert.alert('Validation Error', 'Please select a fitness goal.');
          return false;
        }
        if (routineData.goal === 'custom' && !routineData.customGoal.trim()) {
          Alert.alert('Validation Error', 'Please enter your custom goal.');
          return false;
        }
        return true;

      case STEPS.SCHEDULE:
        const { frequency, duration, preferredDays, timeOfDay, intensity } = routineData.schedule;
        if (!frequency || !duration || preferredDays.length === 0 || !timeOfDay || !intensity) {
          Alert.alert('Validation Error', 'Please complete all schedule fields.');
          return false;
        }
        return true;

      case STEPS.EXERCISES:
        if (routineData.exercises.length === 0) {
          Alert.alert('Validation Error', 'Please select at least one exercise.');
          return false;
        }
        return true;

      case STEPS.REST_RECOVERY:
        const { restDays, restBetweenSets } = routineData.rest;
        if (restDays.length === 0 || !restBetweenSets) {
          Alert.alert('Validation Error', 'Please complete all rest & recovery fields.');
          return false;
        }
        return true;

      case STEPS.REVIEW:
        if (!routineData.routineName.trim()) {
          Alert.alert('Validation Error', 'Please provide a name for your routine.');
          return false;
        }
        return true;

      default:
        return true;
    }
  };

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
      <ProgressBar
        progress={(currentStep + 1) / Object.keys(STEPS).length}
        color={theme.colors.primary}
        style={styles.progressBar}
      />

      {renderStepContent()}

      <View style={styles.navigationContainer}>
        <Button mode="outlined" onPress={handleBack} style={styles.navButton}>
          {currentStep === STEPS.FITNESS_GOALS ? 'Cancel' : 'Back'}
        </Button>
        <Button mode="contained" onPress={handleNext} style={styles.navButton}>
          {currentStep === STEPS.REVIEW ? 'Create Routine' : 'Next'}
        </Button>
      </View>
    </ScrollView>
  );
};

// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  contentContainer: {
    padding: 16,
  },
  progressBar: {
    height: 8,
    borderRadius: 4,
    marginBottom: 24,
  },
  stepTitle: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 16,
  },
  goalsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  goalChip: {
    margin: 4,
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 20,
    backgroundColor: '#f0f0f0',
  },
  inputLabel: {
    fontSize: 16,
    marginTop: 16,
    marginBottom: 8,
    fontWeight: '500',
  },
  input: {
    marginBottom: 16,
  },
  daysContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  dayChip: {
    margin: 4,
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 20,
    backgroundColor: '#f0f0f0',
  },
  navigationContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 32,
  },
  navButton: {
    flex: 1,
    marginHorizontal: 4,
  },
  reviewCard: {
    marginVertical: 8,
  },
});

// Picker Styles
const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30,
    backgroundColor: '#fff',
    marginBottom: 16,
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: '#ccc',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30,
    backgroundColor: '#fff',
    marginBottom: 16,
  },
});

export default RoutineCreationScreen;