ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 `RoutineCreationScreen`.

This error is located at:
    in RCTView (created by View)

 ERROR  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 `RoutineCreationScreen`.

This error is located at:
    in RCTView (created by View)

 ERROR  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 RoutineCreationScreen.js:128.
    in RoutineCreationScreen (created by SceneView)
 ERROR  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 RoutineCreationScreen.js:95.
    in RoutineCreationScreen (created by SceneView)
    in StaticContainer

// screens/Routines/RoutineCreationScreen.js

import React, { useState, useContext } from 'react';
import { View, StyleSheet, ScrollView, Alert } from 'react-native';
import { Text, TextInput, Button } from 'react-native-paper';
import { useTheme } from 'react-native-paper';
import { AuthContext } from '../../context/AuthContext';
import axios from 'axios';
import DropDown from 'react-native-paper-dropdown'; // Correct import

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

  const [name, setName] = useState('');
  const [goal, setGoal] = useState('');
  const [duration, setDuration] = useState(''); // in weeks
  const [frequency, setFrequency] = useState(''); // days per week
  const [workoutTypes, setWorkoutTypes] = useState([]);
  const [showWorkoutTypesDropDown, setShowWorkoutTypesDropDown] = useState(false);
  const [selectedWorkoutType, setSelectedWorkoutType] = useState('');
  const [selectedWorkoutTypeList, setSelectedWorkoutTypeList] = useState([]);
  const [selectedWorkoutTypes, setSelectedWorkoutTypes] = useState([]);
  const [selectedExercises, setSelectedExercises] = useState([]);
  const [notes, setNotes] = useState('');
  const [progression, setProgression] = useState('');
  const [loading, setLoading] = useState(false);
  const [showGoalDropdown, setShowGoalDropdown] = useState(false);

  const workoutGoals = [
    { label: 'Strength Building', value: 'Strength Building' },
    { label: 'Weight Loss', value: 'Weight Loss' },
    { label: 'Endurance', value: 'Endurance' },
    // Add more goals as needed
  ];

  const workoutTypesOptions = [
    { label: 'Strength Training', value: 'Strength Training' },
    { label: 'Cardio', value: 'Cardio' },
    { label: 'Flexibility', value: 'Flexibility' },
    { label: 'HIIT', value: 'HIIT' },
    // Add more types as needed
  ];

  const handleWorkoutTypeSelect = (value) => {
    if (!selectedWorkoutTypeList.includes(value)) {
      setSelectedWorkoutTypeList([...selectedWorkoutTypeList, value]);
    }
  };

  const handleCreateRoutine = async () => {
    // Basic validation
    if (!name || !goal || !duration || !frequency || selectedWorkoutTypeList.length === 0 || selectedExercises.length === 0) {
      Alert.alert('Error', 'Please fill in all required fields and select exercises.');
      return;
    }

    setLoading(true);

    try {
      const response = await axios.post('/api/routines', {
        userId: user.id,
        name,
        goal,
        duration: parseInt(duration),
        frequency: parseInt(frequency),
        workoutTypes: selectedWorkoutTypeList,
        exercises: selectedExercises,
        notes,
        progression,
      });

      Alert.alert('Success', 'Routine created successfully!');
      navigation.navigate('RoutineSelection');
    } catch (error) {
      console.error('Error creating routine:', error);
      Alert.alert('Error', 'Failed to create routine.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScrollView style={[styles.container, { backgroundColor: theme.colors.background }]}>
      <Text style={[styles.label, { color: theme.colors.text }]}>Routine Name</Text>
      <TextInput
        placeholder="Enter routine name"
        value={name}
        onChangeText={setName}
        style={styles.input}
        accessibilityLabel="Routine Name"
      />

      <Text style={[styles.label, { color: theme.colors.text }]}>Choose Goal</Text>
      <DropDown
        label={'Select Goal'}
        mode={'outlined'}
        visible={showGoalDropdown}
        showDropDown={() => setShowGoalDropdown(true)}
        onDismiss={() => setShowGoalDropdown(false)}
        value={goal}
        setValue={setGoal}
        list={workoutGoals}
        accessibilityLabel="Choose Goal Dropdown"
      />

      <Text style={[styles.label, { color: theme.colors.text }]}>Duration (weeks)</Text>
      <TextInput
        placeholder="e.g., 6"
        value={duration}
        onChangeText={setDuration}
        keyboardType="numeric"
        style={styles.input}
        accessibilityLabel="Duration in weeks"
      />

      <Text style={[styles.label, { color: theme.colors.text }]}>Frequency (days/week)</Text>
      <TextInput
        placeholder="e.g., 4"
        value={frequency}
        onChangeText={setFrequency}
        keyboardType="numeric"
        style={styles.input}
        accessibilityLabel="Frequency in days per week"
      />

      <Text style={[styles.label, { color: theme.colors.text }]}>Workout Types</Text>
      <DropDown
        label={'Select Workout Type'}
        mode={'outlined'}
        visible={showWorkoutTypesDropDown}
        showDropDown={() => setShowWorkoutTypesDropDown(true)}
        onDismiss={() => setShowWorkoutTypesDropDown(false)}
        value={selectedWorkoutType}
        setValue={handleWorkoutTypeSelect}
        list={workoutTypesOptions}
        accessibilityLabel="Workout Types Dropdown"
      />
      {/* Display selected workout types */}
      <View style={styles.selectedList}>
        {selectedWorkoutTypeList.map((type, index) => (
          <Text key={index} style={{ color: theme.colors.text }}>
            • {type}
          </Text>
        ))}
      </View>

      <Button
        mode="outlined"
        onPress={() => Alert.alert('Exercise Selection', 'Exercise selection feature is coming soon!')}
        style={styles.button}
        accessibilityLabel="Select Exercises"
      >
        Select Exercises
      </Button>

      <Text style={[styles.label, { color: theme.colors.text }]}>Notes</Text>
      <TextInput
        placeholder="Add any notes or tips"
        value={notes}
        onChangeText={setNotes}
        style={styles.input}
        multiline
        numberOfLines={3}
        accessibilityLabel="Notes"
      />

      <Text style={[styles.label, { color: theme.colors.text }]}>Progression</Text>
      <TextInput
        placeholder="e.g., Increase weights by 5% each week"
        value={progression}
        onChangeText={setProgression}
        style={styles.input}
        multiline
        numberOfLines={2}
        accessibilityLabel="Progression Steps"
      />

      <Button
        mode="contained"
        onPress={handleCreateRoutine}
        loading={loading}
        disabled={loading}
        style={styles.submitButton}
        accessibilityLabel="Create Routine"
      >
        Create Routine
      </Button>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  label: {
    marginTop: 10,
    fontSize: 16,
  },
  input: {
    marginTop: 5,
  },
  button: {
    marginTop: 15,
  },
  submitButton: {
    marginTop: 20,
  },
  selectedList: {
    marginTop: 5,
  },
});

export default RoutineCreationScreen;