import React, { useState, useEffect } 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";
import { gymsApi, type Gym } from "@/api/gyms";
import { useTheme } from "../../contexts/ThemeContext";
import { Input } from "../../components/Input";
import { MinimalButton } from "../../components/MinimalButton";
import { MinimalCard } from "../../components/MinimalCard";
import log from "../../utils/logger";

export default function OnboardingScreen() {
  const { user } = useUser();
  const { getToken } = useAuth();
  const router = useRouter();
  const { colors, typography } = useTheme();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [gyms, setGyms] = useState<Gym[]>([]);
  const [gymsLoading, setGymsLoading] = useState<boolean>(false);
  const [selectedGymId, setSelectedGymId] = useState<string | null>(null);

  useEffect(() => {
    const loadGyms = async () => {
      try {
        setGymsLoading(true);
        const token = await getToken();
        const data = await gymsApi.getGyms(token);
        setGyms(data);
      } catch (e) {
        log.error("Failed to fetch gyms", e);
      } finally {
        setGymsLoading(false);
      }
    };
    loadGyms();
  }, []);
  const [fitnessProfile, setFitnessProfile] = useState({
    height: "",
    weight: "",
    age: "",
    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 ||
        !fitnessProfile.age
      ) {
        Alert.alert("Error", "Please enter your height, weight, and age");
        return;
      }

      const token = await getToken();
      if (!token) {
        throw new Error("Authentication token not available");
      }

      // If gym was selected or cleared, patch user's gym selection first
      // selectedGymId: string gym id, or null to proceed without gym
      try {
        await gymsApi.updateUserGym(selectedGymId, token);
      } catch (e) {
        log.warn("Failed to update gym selection", { gymId: selectedGymId });
      }

      const fitnessData = {
        userId: user.id,
        height: fitnessProfile.height
          ? parseFloat(fitnessProfile.height)
          : undefined,
        weight: fitnessProfile.weight
          ? parseFloat(fitnessProfile.weight)
          : undefined,
        age: fitnessProfile.age ? parseInt(fitnessProfile.age, 10) : undefined,
        fitnessGoals: fitnessProfile.goals ? [fitnessProfile.goals] : [],
        medicalConditions: fitnessProfile.medicalConditions || undefined,
        allergies: fitnessProfile.dietaryRestrictions || undefined,
      };

      await fitnessProfileApi.createFitnessProfile(fitnessData, token);
      router.replace("/(tabs)");
    } catch (error) {
      log.error("Failed to create 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 });
  };

  // Calculate progress based on filled fields
  const calculateProgress = () => {
    const fields = [
      fitnessProfile.height,
      fitnessProfile.weight,
      fitnessProfile.age,
      fitnessProfile.goals,
      fitnessProfile.medicalConditions || "n/a", // Optional fields count as filled
      fitnessProfile.dietaryRestrictions || "n/a",
    ];
    const filledFields = fields.filter(
      (field) => field && field.trim() !== "",
    ).length;
    return Math.round((filledFields / fields.length) * 100);
  };

  const progress = calculateProgress();

  return (
    <ScrollView
      style={[styles.container, { backgroundColor: colors.background }]}
    >
      <Text
        style={[typography.h2, { color: colors.textPrimary }, styles.title]}
      >
        Set Up Your Fitness Profile
      </Text>
      <Text
        style={[
          typography.body,
          { color: colors.textSecondary },
          styles.subtitle,
        ]}
      >
        Help us personalize your fitness journey
      </Text>

      {/* Progress indicator */}
      <View style={styles.progressContainer}>
        <View
          style={[
            styles.progressBarBackground,
            { backgroundColor: colors.borderLight },
          ]}
        >
          <View
            style={[
              styles.progressBarFill,
              { width: `${progress}%`, backgroundColor: colors.primary },
            ]}
          />
        </View>
        <Text
          style={[
            typography.caption,
            { color: colors.textTertiary },
            styles.progressText,
          ]}
        >
          {progress}% Complete
        </Text>
      </View>

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

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

        <Input
          label="Age"
          value={fitnessProfile.age}
          onChangeText={(value) =>
            setFitnessProfile({ ...fitnessProfile, age: value })
          }
          keyboardType="numeric"
          placeholder="Enter your age"
        />

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

        <Text
          style={[typography.h4, { color: colors.textPrimary }, styles.label]}
        >
          Fitness Level
        </Text>
        <View style={styles.buttonGroup}>
          {["beginner", "intermediate", "advanced"].map((level) => (
            <TouchableOpacity
              key={level}
              style={[
                styles.segmentButton,
                {
                  backgroundColor:
                    fitnessProfile.fitnessLevel === level
                      ? colors.primary
                      : colors.surface,
                  borderColor: colors.border,
                },
              ]}
              onPress={() => handleLevelSelect(level)}
            >
              <Text
                style={[
                  typography.caption,
                  {
                    color:
                      fitnessProfile.fitnessLevel === level
                        ? colors.white
                        : colors.textSecondary,
                    textTransform: "capitalize",
                  },
                ]}
              >
                {level}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

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

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

        <Text
          style={[typography.h4, { color: colors.textPrimary }, styles.label]}
        >
          Preferred Workout Time
        </Text>
        <View style={styles.buttonGroup}>
          {["morning", "afternoon", "evening"].map((time) => (
            <TouchableOpacity
              key={time}
              style={[
                styles.segmentButton,
                {
                  backgroundColor:
                    fitnessProfile.preferredWorkoutTime === time
                      ? colors.primary
                      : colors.surface,
                  borderColor: colors.border,
                },
              ]}
              onPress={() => handleTimeSelect(time)}
            >
              <Text
                style={[
                  typography.caption,
                  {
                    color:
                      fitnessProfile.preferredWorkoutTime === time
                        ? colors.white
                        : colors.textSecondary,
                    textTransform: "capitalize",
                  },
                ]}
              >
                {time}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

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

        <Text
          style={[typography.h4, { color: colors.textPrimary }, styles.label]}
        >
          Select a Gym
        </Text>
        {gymsLoading ? (
          <ActivityIndicator />
        ) : (
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            style={{ marginBottom: 16 }}
          >
            <View style={{ flexDirection: "row" }}>
              <TouchableOpacity
                style={[
                  styles.segmentButton,
                  {
                    backgroundColor:
                      selectedGymId === null ? colors.primary : colors.surface,
                    borderColor: colors.border,
                  },
                ]}
                onPress={() => setSelectedGymId(null)}
              >
                <Text
                  style={[
                    typography.caption,
                    {
                      color:
                        selectedGymId === null
                          ? colors.white
                          : colors.textSecondary,
                    },
                  ]}
                >
                  Proceed without gym
                </Text>
              </TouchableOpacity>
              {gyms.map((gym) => (
                <TouchableOpacity
                  key={gym.id}
                  style={[
                    styles.segmentButton,
                    {
                      backgroundColor:
                        selectedGymId === gym.id
                          ? colors.primary
                          : colors.surface,
                      borderColor: colors.border,
                    },
                  ]}
                  onPress={() => setSelectedGymId(gym.id)}
                >
                  <Text
                    style={[
                      typography.caption,
                      {
                        color:
                          selectedGymId === gym.id
                            ? colors.white
                            : colors.textSecondary,
                      },
                    ]}
                  >
                    {gym.name}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          </ScrollView>
        )}

        <MinimalButton
          title="Complete Setup"
          onPress={handleSubmit}
          loading={isSubmitting}
          disabled={isSubmitting}
          fullWidth
          size="lg"
        />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    textAlign: "center",
    marginTop: 40,
    marginBottom: 8,
  },
  subtitle: {
    textAlign: "center",
    marginBottom: 32,
  },
  form: {
    padding: 20,
  },
  label: {
    marginBottom: 8,
  },
  textArea: {
    minHeight: 80,
    textAlignVertical: "top",
    marginBottom: 16,
  },
  buttonGroup: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
    marginBottom: 16,
  },
  segmentButton: {
    minWidth: 100,
    padding: 10,
    borderRadius: 10,
    borderWidth: 1,
    alignItems: "center",
  },
  progressContainer: {
    paddingHorizontal: 20,
    marginBottom: 16,
  },
  progressBarBackground: {
    height: 8,
    borderRadius: 4,
    overflow: "hidden",
    marginBottom: 8,
  },
  progressBarFill: {
    height: "100%",
    borderRadius: 4,
  },
  progressText: { textAlign: "center" },
});