fitaiProto/apps/mobile/src/app/(auth)/onboarding.tsx

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Alert,
  ActivityIndicator,
} from "react-native";
import { useUser, useAuth } from "@clerk/clerk-expo";
import { useRouter } from "expo-router";
import { fitnessProfileApi } from "@/api/fitnessProfile";

export default function OnboardingScreen() {
  const { user } = useUser();
  const { getToken } = useAuth();
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [fitnessProfile, setFitnessProfile] = useState({
    height: "",
    weight: "",
    goals: "",
    fitnessLevel: "beginner",
    medicalConditions: "",
    dietaryRestrictions: "",
    preferredWorkoutTime: "morning",
    workoutFrequency: "3",
  });

  const handleSubmit = async () => {
    if (!user?.id) return;

    try {
      setIsSubmitting(true);

      // Validate required fields
      if (!fitnessProfile.height || !fitnessProfile.weight) {
        Alert.alert("Error", "Please enter your height and weight");
        return;
      }

      const fitnessData = {
        clientId: user.id,
        height: parseFloat(fitnessProfile.height),
        weight: parseFloat(fitnessProfile.weight),
        goals: fitnessProfile.goals || undefined,
        fitnessLevel: fitnessProfile.fitnessLevel as
          | "beginner"
          | "intermediate"
          | "advanced",
        medicalConditions: fitnessProfile.medicalConditions || undefined,
        dietaryRestrictions: fitnessProfile.dietaryRestrictions || undefined,
        preferredWorkoutTime: fitnessProfile.preferredWorkoutTime as
          | "morning"
          | "afternoon"
          | "evening",
        workoutFrequency: parseInt(fitnessProfile.workoutFrequency) || 3,
      };

      const token = await getToken();
      if (!token) {
        throw new Error("Authentication token not available");
      }
      await fitnessProfileApi.createFitnessProfile(fitnessData, token);
      router.replace("/(tabs)");
    } catch (error) {
      console.error("Error creating fitness profile:", error);
      Alert.alert(
        "Error",
        "Failed to create fitness profile. Please try again.",
      );
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleLevelSelect = (level: string) => {
    setFitnessProfile({ ...fitnessProfile, fitnessLevel: level });
  };

  const handleTimeSelect = (time: string) => {
    setFitnessProfile({ ...fitnessProfile, preferredWorkoutTime: time });
  };

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Set Up Your Fitness Profile</Text>
      <Text style={styles.subtitle}>
        Help us personalize your fitness journey
      </Text>

      <View style={styles.form}>
        <Text style={styles.label}>Height (cm)</Text>
        <TextInput
          style={styles.input}
          value={fitnessProfile.height}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, height: value })
          }
          keyboardType="numeric"
          placeholder="Enter height in cm"
        />

        <Text style={styles.label}>Weight (kg)</Text>
        <TextInput
          style={styles.input}
          value={fitnessProfile.weight}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, weight: value })
          }
          keyboardType="numeric"
          placeholder="Enter weight in kg"
        />

        <Text style={styles.label}>Fitness Goals</Text>
        <TextInput
          style={[styles.input, styles.textArea]}
          value={fitnessProfile.goals}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, goals: value })
          }
          multiline
          numberOfLines={3}
          placeholder="What are your fitness goals?"
        />

        <Text style={styles.label}>Fitness Level</Text>
        <View style={styles.buttonGroup}>
          {["beginner", "intermediate", "advanced"].map((level) => (
            <TouchableOpacity
              key={level}
              style={[
                styles.levelButton,
                fitnessProfile.fitnessLevel === level && styles.selectedButton,
              ]}
              onPress={() => handleLevelSelect(level)}
            >
              <Text
                style={[
                  styles.levelButtonText,
                  fitnessProfile.fitnessLevel === level &&
                    styles.selectedButtonText,
                ]}
              >
                {level.charAt(0).toUpperCase() + level.slice(1)}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        <Text style={styles.label}>Medical Conditions</Text>
        <TextInput
          style={[styles.input, styles.textArea]}
          value={fitnessProfile.medicalConditions}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, medicalConditions: value })
          }
          multiline
          numberOfLines={3}
          placeholder="Any medical conditions we should know about?"
        />

        <Text style={styles.label}>Dietary Restrictions</Text>
        <TextInput
          style={[styles.input, styles.textArea]}
          value={fitnessProfile.dietaryRestrictions}
          onChangeText={(value) =>
            setFitnessProfile({
              ...fitnessProfile,
              dietaryRestrictions: value,
            })
          }
          multiline
          numberOfLines={3}
          placeholder="Any dietary restrictions?"
        />

        <Text style={styles.label}>Preferred Workout Time</Text>
        <View style={styles.buttonGroup}>
          {["morning", "afternoon", "evening"].map((time) => (
            <TouchableOpacity
              key={time}
              style={[
                styles.timeButton,
                fitnessProfile.preferredWorkoutTime === time &&
                  styles.selectedButton,
              ]}
              onPress={() => handleTimeSelect(time)}
            >
              <Text
                style={[
                  styles.timeButtonText,
                  fitnessProfile.preferredWorkoutTime === time &&
                    styles.selectedButtonText,
                ]}
              >
                {time.charAt(0).toUpperCase() + time.slice(1)}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        <Text style={styles.label}>Workouts per Week</Text>
        <TextInput
          style={styles.input}
          value={fitnessProfile.workoutFrequency}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, workoutFrequency: value })
          }
          keyboardType="numeric"
          placeholder="Number of workouts per week"
        />

        <TouchableOpacity
          style={styles.submitButton}
          onPress={handleSubmit}
          disabled={isSubmitting}
        >
          {isSubmitting ? (
            <ActivityIndicator color="white" />
          ) : (
            <Text style={styles.submitButtonText}>Complete Setup</Text>
          )}
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
    marginTop: 40,
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: "#666",
    textAlign: "center",
    marginBottom: 32,
  },
  form: {
    padding: 20,
  },
  label: {
    fontSize: 14,
    fontWeight: "600",
    color: "#374151",
    marginBottom: 4,
  },
  input: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 8,
    padding: 12,
    marginBottom: 16,
    backgroundColor: "white",
  },
  textArea: {
    height: 80,
    textAlignVertical: "top",
  },
  buttonGroup: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 16,
  },
  levelButton: {
    flex: 1,
    backgroundColor: "#f3f4f6",
    padding: 10,
    borderRadius: 8,
    marginHorizontal: 4,
    alignItems: "center",
  },
  timeButton: {
    flex: 1,
    backgroundColor: "#f3f4f6",
    padding: 10,
    borderRadius: 8,
    marginHorizontal: 4,
    alignItems: "center",
  },
  selectedButton: {
    backgroundColor: "#3b82f6",
  },
  levelButtonText: {
    color: "#374151",
    fontSize: 14,
    fontWeight: "500",
  },
  timeButtonText: {
    color: "#374151",
    fontSize: 14,
    fontWeight: "500",
  },
  selectedButtonText: {
    color: "white",
  },
  submitButton: {
    backgroundColor: "#3b82f6",
    padding: 16,
    borderRadius: 8,
    alignItems: "center",
    marginTop: 24,
  },
  submitButtonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
});