import React from "react";
import {
  ScrollView,
  StyleSheet,
  Dimensions,
  Image,
  TouchableOpacity,
  Linking,
} from "react-native";
import { Block, Text, theme } from "galio-framework";
import { useSafeArea } from "react-native-safe-area-context";
import { Box, HStack, VStack, Icon, Pressable, Spinner } from "native-base";
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import Images from "../constants/Images";
import { DrawerItem as DrawerCustomItem } from "../components/index";
import { useAuth } from "../src/contexts/AuthContext";

const { width } = Dimensions.get("screen");

// 金色主题色
const GOLD_PRIMARY = '#D4AF37';

// 用户卡片组件
const UserCard = ({ navigation }) => {
  const { user, isLoggedIn, isLoading, subscription, logout } = useAuth();

  const handleLoginPress = () => {
    navigation.closeDrawer();
    // 使用 getParent 获取根导航器来导航到 Login
    navigation.getParent()?.navigate("Login");
  };

  const handleLogoutPress = async () => {
    await logout();
  };

  // 获取订阅显示文本
  const getSubscriptionText = () => {
    if (!subscription || !subscription.is_active) {
      return "免费用户";
    }
    const typeMap = { pro: "Pro 会员", max: "Max 会员" };
    return typeMap[subscription.type] || "免费用户";
  };

  if (isLoading) {
    return (
      <Box px={4} py={4} mb={2}>
        <HStack alignItems="center" space={3}>
          <Spinner size="sm" color="primary.500" />
          <Text color="#8898AA" style={{ fontFamily: "open-sans-regular" }}>
            加载中...
          </Text>
        </HStack>
      </Box>
    );
  }

  if (!isLoggedIn) {
    return (
      <Pressable onPress={handleLoginPress}>
        <Box
          mx={3}
          mb={3}
          p={4}
          bg="rgba(124, 58, 237, 0.1)"
          borderWidth={1}
          borderColor="rgba(124, 58, 237, 0.3)"
          borderRadius={12}
        >
          <HStack alignItems="center" space={3}>
            <Box
              w={10}
              h={10}
              bg="rgba(124, 58, 237, 0.2)"
              borderRadius={20}
              alignItems="center"
              justifyContent="center"
            >
              <Icon as={Ionicons} name="person-outline" size="md" color="#7C3AED" />
            </Box>
            <VStack flex={1}>
              <Text
                color="#333"
                style={{ fontFamily: "open-sans-bold", fontSize: 14 }}
              >
                登录/注册
              </Text>
              <Text
                color="#8898AA"
                style={{ fontFamily: "open-sans-regular", fontSize: 12 }}
              >
                登录解锁更多功能
              </Text>
            </VStack>
            <Icon as={Ionicons} name="chevron-forward" size="sm" color="#8898AA" />
          </HStack>
        </Box>
      </Pressable>
    );
  }

  // 已登录状态
  return (
    <Box mx={3} mb={3} p={4} bg="#F8F9FE" borderRadius={12}>
      <HStack alignItems="center" space={3}>
        <Box
          w={10}
          h={10}
          bg="#7C3AED"
          borderRadius={20}
          alignItems="center"
          justifyContent="center"
        >
          <Text style={{ color: "white", fontFamily: "open-sans-bold", fontSize: 16 }}>
            {(user?.username || user?.nickname || "U").charAt(0).toUpperCase()}
          </Text>
        </Box>
        <VStack flex={1}>
          <Text
            color="#333"
            style={{ fontFamily: "open-sans-bold", fontSize: 14 }}
          >
            {user?.nickname || user?.username || "用户"}
          </Text>
          <HStack alignItems="center" space={1}>
            <Box
              px={1.5}
              py={0.5}
              bg={subscription?.is_active ? "rgba(16, 185, 129, 0.1)" : "rgba(100, 116, 139, 0.1)"}
              borderRadius={4}
            >
              <Text
                style={{
                  fontFamily: "open-sans-regular",
                  fontSize: 10,
                  color: subscription?.is_active ? "#10B981" : "#64748B",
                }}
              >
                {getSubscriptionText()}
              </Text>
            </Box>
          </HStack>
        </VStack>
        <Pressable onPress={handleLogoutPress}>
          <Icon as={Ionicons} name="log-out-outline" size="sm" color="#F43F5E" />
        </Pressable>
      </HStack>
    </Box>
  );
};

function CustomDrawerContent({
  drawerPosition,
  navigation,
  profile,
  focused,
  state,
  ...rest
}) {
  const insets = useSafeArea();
  const screens = [
    { title: "事件中心", navigateTo: "EventsDrawer" },
    { title: "市场热点", navigateTo: "MarketDrawer" },
    { title: "Home", navigateTo: "HomeDrawer" },
    { title: "Profile", navigateTo: "ProfileDrawer" },
    { title: "Account", navigateTo: "AccountDrawer" },
    { title: "Elements", navigateTo: "ElementsDrawer" },
    { title: "Articles", navigateTo: "ArticlesDrawer" },
    { title: "Settings", navigateTo: "SettingsDrawer" },
  ];
  return (
    <Block
      style={styles.container}
      forceInset={{ top: "always", horizontal: "never" }}
    >
      {/* 品牌头部 - 黑金主题 */}
      <Box bg="#000" px={4} py={5} style={{ paddingTop: insets.top + 16 }}>
        <HStack alignItems="center" space={3}>
          <Image
            source={Images.Logo}
            style={{ width: 40, height: 40, borderRadius: 10 }}
            resizeMode="contain"
          />
          <VStack>
            <Text style={{ color: GOLD_PRIMARY, fontFamily: "open-sans-bold", fontSize: 18 }}>
              价值前沿
            </Text>
            <Text style={{ color: "rgba(212, 175, 55, 0.6)", fontFamily: "open-sans-regular", fontSize: 11 }}>
              VALUE FRONTIER
            </Text>
          </VStack>
        </HStack>
      </Box>
      <Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
        <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
          {/* 用户卡片 */}
          <Box mt={3}>
            <UserCard navigation={navigation} />
          </Box>

          {screens.map((item, index) => {
            return (
              <DrawerCustomItem
                title={item?.title}
                key={index}
                navigation={navigation}
                focused={state.index === index ? true : false}
                navigateTo={item?.navigateTo}
              />
            );
          })}
          <Block
            flex
            style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
          >
            <Block
              style={{
                borderColor: "rgba(0,0,0,0.2)",
                width: "100%",
                borderWidth: StyleSheet.hairlineWidth,
              }}
            />
            <Text
              color="#8898AA"
              style={{
                marginTop: 16,
                marginLeft: 8,
                fontFamily: "open-sans-regular",
              }}
            >
              DOCUMENTATION
            </Text>
          </Block>
          <DrawerCustomItem title="Getting Started" navigation={navigation} />
        </ScrollView>
      </Block>
    </Block>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    paddingHorizontal: 28,
    paddingBottom: theme.SIZES.BASE,
    paddingTop: theme.SIZES.BASE * 3,
    justifyContent: "center",
  },
});

export default CustomDrawerContent;