import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  Alert,
  ScrollView,
  ActivityIndicator,
} from "react-native";
import { useUser, useClerk, useAuth } from "@clerk/clerk-expo";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useState, useEffect } from "react";
import { useTheme } from "../../contexts/ThemeContext";
import { MinimalCard } from "../../components/MinimalCard";
import { ListItem } from "../../components/ListItem";
import { MinimalButton } from "../../components/MinimalButton";
import { Badge } from "../../components/Badge";
import { IconContainer } from "../../components/IconContainer";
import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
import log from "../../utils/logger";

export default function ProfileScreen() {
  const { user } = useUser();
  const { signOut } = useClerk();
  const router = useRouter();
  const { colors, typography, theme: activeTheme, setTheme } = useTheme();
  const { getToken } = useAuth();

  const [gyms, setGyms] = useState<
    Array<{ id: string; name: string; location?: string }>
  >([]);
  const [gymsLoading, setGymsLoading] = useState(false);
  const [selectedGymId, setSelectedGymId] = useState<string | null>(null);
  const [currentGymId, setCurrentGymId] = useState<string | null>(null);
  const [currentGymName, setCurrentGymName] = useState<string | null>(null);

  useEffect(() => {
    const gid =
      ((user?.publicMetadata as any)?.gymId as string | undefined) ?? null;
    setCurrentGymId(gid ?? null);
    if (gid && gyms.length > 0) {
      const g = gyms.find((x) => x.id === gid);
      setCurrentGymName(g?.name ?? null);
      if (selectedGymId === null) setSelectedGymId(gid);
    }
  }, [user?.publicMetadata, gyms]);

  useEffect(() => {
    loadGyms();
  }, []);

  const loadGyms = async () => {
    try {
      setGymsLoading(true);
      const token = await getToken();
      const url = `${API_BASE_URL}${API_ENDPOINTS.GYMS}`;
      log.debug("Loading gyms", { url });
      const res = await fetch(url, {
        headers: token ? { Authorization: `Bearer ${token}` } : undefined,
      });
      const contentType = res.headers.get("content-type") || "";
      if (!res.ok) {
        const text = await res.text().catch(() => "");
        log.error(
          "Failed to fetch gyms - non-OK response",
          new Error(text.slice(0, 200)),
          { status: res.status },
        );
        setGyms([]);
        return;
      }
      if (!contentType.includes("application/json")) {
        const text = await res.text().catch(() => "");
        log.error(
          "Failed to fetch gyms - expected JSON",
          new Error(text.slice(0, 200)),
          { contentType },
        );
        setGyms([]);
        return;
      }
      let data: any = null;
      try {
        data = await res.json();
      } catch (e) {
        const text = await res.text().catch(() => "");
        log.error("Failed to parse gyms JSON", e, {
          bodyPreview: text?.slice(0, 200),
        });
        setGyms([]);
        return;
      }
      const list = Array.isArray(data) ? data : [];
      setGyms(list);
      const gid =
        currentGymId ??
        ((user?.publicMetadata as any)?.gymId as string | undefined) ??
        null;
      if (gid) {
        const g = list.find((x: any) => x.id === gid);
        setCurrentGymId(gid);
        setCurrentGymName(g?.name ?? null);
        if (selectedGymId === null) setSelectedGymId(gid);
      }
    } catch (err) {
      log.error("Failed to fetch gyms", err);
      setGyms([]);
    } finally {
      setGymsLoading(false);
    }
  };

  const handleApplyGym = async () => {
    try {
      const token = await getToken();
      const url = `${API_BASE_URL}${API_ENDPOINTS.USERS}/gym`;
      log.debug("Updating gym selection", { url, gymId: selectedGymId });
      const res = await fetch(url, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
          ...(token ? { Authorization: `Bearer ${token}` } : {}),
        },
        body: JSON.stringify({ gymId: selectedGymId }),
      });
      const contentType = res.headers.get("content-type") || "";
      if (!res.ok) {
        const text = await res.text().catch(() => "");
        log.error(
          "Failed to update gym selection - non-OK response",
          new Error(text.slice(0, 200)),
          { status: res.status },
        );
        Alert.alert("Error", "Failed to update gym selection");
        return;
      }
      if (contentType.includes("application/json")) {
        try {
          const data = await res.json();
          log.debug("Gym selection updated", { data });
        } catch (e) {
          const text = await res.text().catch(() => "");
          log.error("Failed to parse update response JSON", e, {
            bodyPreview: text?.slice(0, 200),
          });
        }
      }
      setCurrentGymId(selectedGymId);
      setCurrentGymName(
        selectedGymId
          ? (gyms.find((g) => g.id === selectedGymId)?.name ?? null)
          : null,
      );
      try {
        await (user as any)?.reload?.();
      } catch (e) {
        log.debug("Failed to reload user after gym update", { error: e });
      }
      Alert.alert(
        "Success",
        selectedGymId ? "Gym selected successfully" : "Proceeding without gym",
      );
    } catch (err) {
      log.error("Failed to update gym selection", err);
      Alert.alert("Error", "Failed to update gym selection");
    }
  };

  const handleSignOut = async () => {
    try {
      await signOut();
    } catch (err) {
      log.error("Failed to sign out", err);
    }
  };

  const confirmSignOut = () => {
    Alert.alert("Sign Out", "Are you sure you want to sign out?", [
      { text: "Cancel", style: "cancel" },
      { text: "Sign Out", style: "destructive", onPress: handleSignOut },
    ]);
  };

  const handleThemeChange = () => {
    Alert.alert("Choose Theme", "Select your preferred theme", [
      {
        text: "Light",
        onPress: () => setTheme("light"),
      },
      {
        text: "Dark",
        onPress: () => setTheme("dark"),
      },
      {
        text: "System",
        onPress: () => setTheme("system"),
      },
      { text: "Cancel", style: "cancel" },
    ]);
  };

  const getThemeLabel = () => {
    if (activeTheme === "light") return "Light";
    if (activeTheme === "dark") return "Dark";
    return "System";
  };

  return (
    <ScrollView
      style={[styles.container, { backgroundColor: colors.background }]}
      contentContainerStyle={styles.content}
    >
      {/* Header Card */}
      <MinimalCard variant="elevated" style={styles.profileCard}>
        <View style={styles.avatarContainer}>
          {user?.imageUrl ? (
            <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
          ) : (
            <View
              style={[
                styles.placeholderAvatar,
                { backgroundColor: colors.primary },
              ]}
            >
              <Ionicons name="person" size={40} color={colors.white} />
            </View>
          )}
        </View>
        <Text
          style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]}
        >
          {user?.fullName || "User"}
        </Text>
        <Text
          style={[
            typography.body,
            { color: colors.textSecondary, marginTop: 4 },
          ]}
        >
          {user?.primaryEmailAddress?.emailAddress}
        </Text>
        <Badge
          label="Premium Member"
          variant="primary"
          style={{ marginTop: 12 }}
        />
      </MinimalCard>

      {/* Theme Settings */}
      <View style={styles.section}>
        <Text
          style={[
            typography.h3,
            { color: colors.textPrimary, marginBottom: 12 },
          ]}
        >
          Appearance
        </Text>
        <MinimalCard variant="default">
          <ListItem
            title="Theme"
            subtitle={`Current: ${getThemeLabel()}`}
            leftIcon={
              <IconContainer
                variant="colored"
                backgroundColor={`${colors.accent}20`}
              >
                <Ionicons
                  name="color-palette"
                  size={20}
                  color={colors.accent}
                />
              </IconContainer>
            }
            rightElement={
              <Ionicons
                name="chevron-forward"
                size={20}
                color={colors.textTertiary}
              />
            }
            onPress={handleThemeChange}
          />
        </MinimalCard>
      </View>

      {/* Account Settings */}
      <View style={styles.section}>
        <Text
          style={[
            typography.h3,
            { color: colors.textPrimary, marginBottom: 12 },
          ]}
        >
          Account
        </Text>
        <MinimalCard variant="default">
          <ListItem
            title="Personal Details"
            leftIcon={
              <IconContainer
                variant="colored"
                backgroundColor={`${colors.primary}20`}
              >
                <Ionicons
                  name="person-outline"
                  size={20}
                  color={colors.primary}
                />
              </IconContainer>
            }
            rightElement={
              <Ionicons
                name="chevron-forward"
                size={20}
                color={colors.textTertiary}
              />
            }
            onPress={() => router.push("/personal-details")}
          />
          <View style={[styles.divider, { backgroundColor: colors.border }]} />
          <ListItem
            title="Fitness Profile"
            leftIcon={
              <IconContainer
                variant="colored"
                backgroundColor={`${colors.success}20`}
              >
                <Ionicons
                  name="fitness-outline"
                  size={20}
                  color={colors.success}
                />
              </IconContainer>
            }
            rightElement={
              <Ionicons
                name="chevron-forward"
                size={20}
                color={colors.textTertiary}
              />
            }
            onPress={() => router.push("/fitness-profile")}
          />
          <View style={[styles.divider, { backgroundColor: colors.border }]} />
          <ListItem
            title="Notifications"
            leftIcon={
              <IconContainer
                variant="colored"
                backgroundColor={`${colors.warning}20`}
              >
                <Ionicons
                  name="notifications-outline"
                  size={20}
                  color={colors.warning}
                />
              </IconContainer>
            }
            rightElement={
              <Ionicons
                name="chevron-forward"
                size={20}
                color={colors.textTertiary}
              />
            }
          />
        </MinimalCard>
      </View>

      {/* Gym Selection */}
      <View style={styles.section}>
        <View style={styles.sectionHeader}>
          <Text style={[typography.h3, { color: colors.textPrimary }]}>
            Gym Selection
          </Text>
          <TouchableOpacity onPress={loadGyms}>
            <Text
              style={[
                typography.body,
                { color: colors.primary, fontWeight: "600" },
              ]}
            >
              Refresh
            </Text>
          </TouchableOpacity>
        </View>
        <MinimalCard variant="default">
          {currentGymName && (
            <View style={styles.currentGym}>
              <Text
                style={[typography.caption, { color: colors.textTertiary }]}
              >
                Current Gym
              </Text>
              <Text
                style={[
                  typography.h3,
                  { color: colors.textPrimary, marginTop: 4 },
                ]}
              >
                {currentGymName}
              </Text>
            </View>
          )}

          {gymsLoading ? (
            <View style={styles.loadingContainer}>
              <ActivityIndicator color={colors.primary} />
            </View>
          ) : (
            <>
              <ScrollView
                horizontal
                showsHorizontalScrollIndicator={false}
                style={styles.gymScroll}
                contentContainerStyle={styles.gymScrollContent}
              >
                <TouchableOpacity
                  style={[
                    styles.gymChip,
                    {
                      backgroundColor:
                        selectedGymId === null
                          ? `${colors.primary}20`
                          : colors.surfaceElevated,
                      borderColor:
                        selectedGymId === null ? colors.primary : colors.border,
                    },
                  ]}
                  onPress={() => setSelectedGymId(null)}
                >
                  <Text
                    style={[
                      typography.body,
                      {
                        color:
                          selectedGymId === null
                            ? colors.primary
                            : colors.textSecondary,
                        fontWeight: selectedGymId === null ? "600" : "400",
                      },
                    ]}
                  >
                    No Gym
                  </Text>
                </TouchableOpacity>
                {gyms.map((gym) => (
                  <TouchableOpacity
                    key={gym.id}
                    style={[
                      styles.gymChip,
                      {
                        backgroundColor:
                          selectedGymId === gym.id
                            ? `${colors.primary}20`
                            : colors.surfaceElevated,
                        borderColor:
                          selectedGymId === gym.id
                            ? colors.primary
                            : colors.border,
                      },
                    ]}
                    onPress={() => setSelectedGymId(gym.id)}
                  >
                    <Text
                      style={[
                        typography.body,
                        {
                          color:
                            selectedGymId === gym.id
                              ? colors.primary
                              : colors.textSecondary,
                          fontWeight: selectedGymId === gym.id ? "600" : "400",
                        },
                      ]}
                    >
                      {gym.name}
                    </Text>
                  </TouchableOpacity>
                ))}
              </ScrollView>
              <MinimalButton
                title="Apply Selection"
                onPress={handleApplyGym}
                variant="primary"
                style={{ marginTop: 16 }}
              />
            </>
          )}
        </MinimalCard>
      </View>

      {/* Support */}
      <View style={styles.section}>
        <Text
          style={[
            typography.h3,
            { color: colors.textPrimary, marginBottom: 12 },
          ]}
        >
          Support
        </Text>
        <MinimalCard variant="default">
          <ListItem
            title="Help Center"
            leftIcon={
              <IconContainer
                variant="colored"
                backgroundColor={`${colors.info}20`}
              >
                <Ionicons
                  name="help-circle-outline"
                  size={20}
                  color={colors.info}
                />
              </IconContainer>
            }
            rightElement={
              <Ionicons
                name="chevron-forward"
                size={20}
                color={colors.textTertiary}
              />
            }
          />
          <View style={[styles.divider, { backgroundColor: colors.border }]} />
          <ListItem
            title="Privacy & Security"
            leftIcon={
              <IconContainer variant="subtle">
                <Ionicons
                  name="shield-checkmark-outline"
                  size={20}
                  color={colors.textSecondary}
                />
              </IconContainer>
            }
            rightElement={
              <Ionicons
                name="chevron-forward"
                size={20}
                color={colors.textTertiary}
              />
            }
          />
        </MinimalCard>
      </View>

      {/* Sign Out */}
      <View style={styles.section}>
        <MinimalButton
          title="Sign Out"
          onPress={confirmSignOut}
          variant="danger"
          size="lg"
        />
      </View>

      <Text
        style={[
          typography.caption,
          {
            color: colors.textTertiary,
            textAlign: "center",
            marginBottom: 100,
          },
        ]}
      >
        Version 1.0.0
      </Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 24,
    paddingTop: 60,
  },
  profileCard: {
    alignItems: "center",
    paddingVertical: 32,
    marginBottom: 24,
  },
  avatarContainer: {
    position: "relative",
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
  },
  placeholderAvatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    justifyContent: "center",
    alignItems: "center",
  },
  section: {
    marginBottom: 24,
  },
  sectionHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  divider: {
    height: 1,
    marginLeft: 52,
  },
  currentGym: {
    marginBottom: 16,
    paddingBottom: 16,
    borderBottomWidth: 1,
    borderBottomColor: "rgba(0, 0, 0, 0.05)",
  },
  loadingContainer: {
    paddingVertical: 20,
    alignItems: "center",
  },
  gymScroll: {
    marginHorizontal: -16,
  },
  gymScrollContent: {
    paddingHorizontal: 16,
    gap: 8,
  },
  gymChip: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 20,
    borderWidth: 1.5,
    marginRight: 8,
  },
});