import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Image as NativeImage,
} from "react-native";
import React, { useState, useEffect, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Icon } from "@rneui/themed";
import { Image } from "expo-image";
import Toast from "react-native-toast-message";
import { get, save } from "../../utils/storeInfo";
import baseRequest from "../../utils/baseRequest";
import { useFocusEffect } from "@react-navigation/native";
import { generateSignature } from "../../utils/crypto";

const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

export default function My({ navigation }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  //获取当前页面数据
  const [data, setData] = useState();
  const [vipPrice, setVipPrice] = useState();
  useEffect(() => {
    const initData = async () => {
      const account = await get("account");
      const account_relation = await get("account_relation");
      setData({ ...account, ...account_relation });
    };
    const getVipPrice = async () => {
      try {
        const apiUrl = process.env.EXPO_PUBLIC_API_URL;
        const base = await baseRequest();
        const signature = await generateSignature({
          ...base,
        });
        const _response = await fetch(
          `${apiUrl}/api/vas/get_membership_product_list?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...base,
            }),
          }
        );
        const _data = await _response.json();
        if (_data.ret === -1) {
          Toast.show({
            type: "error",
            text1: _data.msg,
            topOffset: 60,
          });
          return;
        }
        setVipPrice(_data.data.product.real_price / 100);
      } catch (error) {
        console.error(error);
      }
    };
    initData();
    getVipPrice();
  }, []);

  //每次focus都更新一次数据
  useFocusEffect(
    useCallback(() => {
      const getData = async () => {
        //获取环境变量
        const apiUrl = process.env.EXPO_PUBLIC_API_URL;

        const account = await get("account");
        const base = await baseRequest();
        const signature = await generateSignature({
          ...base,
          mid: account.mid,
        });
        try {
          //获取账号基本信息
          const accountResponse = await fetch(
            `${apiUrl}/api/account/list_by_mid?signature=${signature}`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                ...base,
                mid: account.mid,
              }),
            }
          );
          const accountData = await accountResponse.json();
          if (accountData.ret === -1) {
            Toast.show({
              type: "error",
              text1: accountData.msg,
              topOffset: 60,
            });
            return;
          }
          await save("account", accountData.data.account);
          //获取关注、粉丝数
          const signature2 = await generateSignature({
            ...base,
            mid: account.mid,
          });
          const accountRelationResponse = await fetch(
            `${apiUrl}/api/account_relation/count?signature=${signature2}`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                ...base,
                mid: account.mid,
              }),
            }
          );
          const accountRelationData = await accountRelationResponse.json();
          if (accountRelationData.ret === -1) {
            Toast.show({
              type: "error",
              text1: accountRelationData.msg,
              topOffset: 60,
            });
            return;
          }
          await save("account_relation", accountRelationData.data);
          if (accountData.data.account.role === 3) {
            //获取主播信息
            const signature3 = await generateSignature({
              ...base,
              mid: account.mid,
            });
            const streamerResponse = await fetch(
              `${apiUrl}/api/streamer/list_ext_by_mid?signature=${signature3}`,
              {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({
                  ...base,
                  mid: account.mid,
                }),
              }
            );
            const streamerData = await streamerResponse.json();
            if (streamerData.ret === -1) {
              Toast.show({
                type: "error",
                text1: streamerData.msg,
                topOffset: 60,
              });
              return;
            }
            setData({
              ...accountData.data.account,
              ...accountRelationData.data,
              ...streamerData.data,
            });
            return;
          }
          setData({ ...accountData.data.account, ...accountRelationData.data });
        } catch (error) {
          console.error(error);
        }
      };
      getData();
    }, [])
  );

  return (
    <ScrollView>
      <View
        style={{
          paddingBottom: insets.bottom,
          paddingLeft: insets.left,
          paddingRight: insets.right,
        }}
      >
        <NativeImage
          style={tailwind("absolute top-0 left-0")}
          source={require("../../assets/icon/others/profilebackground.png")}
        />
        <View style={{ paddingTop: insets.top, ...tailwind("px-4") }}>
          <View style={tailwind("flex-row h-12 justify-end items-center")}>
            <TouchableOpacity
              onPress={() => navigation.navigate("EditUserProfile")}
              style={tailwind("bg-[#FFFFFF1A] rounded-full mr-2")}
            >
              <NativeImage
                source={require("../../assets/icon/32DP/edit.png")}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigation.navigate("Setting")}
              style={tailwind("bg-[#FFFFFF1A] rounded-full")}
            >
              <NativeImage
                source={require("../../assets/icon/32DP/setting.png")}
              />
            </TouchableOpacity>
          </View>
          {/* 头像、id、昵称 */}
          <TouchableOpacity
            activeOpacity={1}
            onPress={() => {
              if (data?.role === 3) {
                navigation.navigate("StreamerProfile", {
                  mid: data?.mid,
                });
              } else {
                navigation.navigate("UserProfile");
              }
            }}
            style={tailwind("flex flex-row items-center h-24")}
          >
            <Image
              style={tailwind("w-[4.6rem] h-[4.6rem] rounded-full")}
              source={data?.avatar?.images[0]?.urls[0]}
              placeholder={blurhash}
              contentFit="cover"
              transition={1000}
              cachePolicy="disk"
            />
            <View style={tailwind("flex flex-col ml-2 h-20 justify-center")}>
              <View style={tailwind("flex flex-row items-center mb-1.5")}>
                <Text
                  style={{
                    color: data?.is_a_member === 1 ? "#FFADBE" : "white",
                    ...tailwind("text-2xl font-medium"),
                  }}
                  numberOfLines={1}
                  ellipsizeMode="tail"
                >
                  {data?.name}
                </Text>
                {data?.is_a_member === 1 && (
                  <NativeImage
                    source={require("../../assets/icon/others/vipbig.png")}
                  />
                )}
              </View>
              <View style={tailwind("flex-row")}>
                <View
                  style={{
                    backgroundColor: "#FFFFFF1A",
                    ...tailwind("rounded-full px-2"),
                  }}
                >
                  <Text style={tailwind("text-xs text-white")}>
                    <Text style={tailwind("font-medium")}>ID </Text>
                    {data?.user_id}
                  </Text>
                </View>
              </View>
            </View>
            <View style={tailwind("ml-auto")}>
              <Icon
                name="chevron-forward-outline"
                type="ionicon"
                color="#ffffff"
              />
            </View>
          </TouchableOpacity>
          {/* 关注、粉丝、金币、钻石 */}
          <View style={tailwind("flex flex-row justify-around mt-2 w-full")}>
            <TouchableOpacity
              onPress={() => navigation.navigate("Relationship", { tab: 0 })}
              style={tailwind("flex flex-col items-center w-1/4")}
            >
              <Text style={tailwind("text-2xl font-medium text-white")}>
                {data?.follow_count}
              </Text>
              <Text
                style={{
                  color: "#FFFFFF80",
                  ...tailwind("text-sm font-medium"),
                }}
              >
                关注
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigation.navigate("Relationship", { tab: 1 })}
              style={tailwind("flex flex-col items-center w-1/4")}
            >
              <Text style={tailwind("text-2xl font-medium text-white")}>
                {data?.is_followed_count}
              </Text>
              <Text
                style={{
                  color: "#FFFFFF80",
                  ...tailwind("text-sm font-medium"),
                }}
              >
                粉丝
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigation.navigate("Wallet")}
              style={tailwind("flex flex-col items-center w-1/4")}
            >
              <Text style={tailwind("text-2xl font-medium text-white")}>
                {data?.gold_num}
              </Text>
              <Text
                style={{
                  color: "#FFFFFF80",
                  ...tailwind("text-sm font-medium"),
                }}
              >
                金币
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigation.navigate("Wallet")}
              style={tailwind("flex flex-col items-center w-1/4")}
            >
              <Text style={tailwind("text-2xl font-medium text-white")}>
                {data?.diamond_num}
              </Text>
              <Text
                style={{
                  color: "#FFFFFF80",
                  ...tailwind("text-sm font-medium"),
                }}
              >
                钻石
              </Text>
            </TouchableOpacity>
          </View>
          {/* 会员 */}
          <TouchableOpacity
            activeOpacity={1}
            onPress={() =>
              navigation.navigate("WebWithoutHeader", {
                uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip",
              })
            }
            style={tailwind(
              "flex flex-col p-2.5 rounded-2xl mt-3.5 bg-[#301024]"
            )}
          >
            <View
              style={tailwind("flex flex-row justify-between items-center")}
            >
              <View style={tailwind("flex flex-col")}>
                <View style={tailwind("flex flex-row items-center")}>
                  <NativeImage
                    source={require("../../assets/icon/others/vipsmall.png")}
                  />
                  <Text
                    style={tailwind("text-base text-[#FF669E] font-medium")}
                  >
                    {data?.is_a_member !== 1
                      ? "开通会员订阅动态"
                      : "尊贵的永久会员"}
                  </Text>
                </View>
                <Text style={tailwind("text-sm text-[#FFFFFF40] font-medium")}>
                  {data?.is_a_member !== 1
                    ? "限时优惠活动"
                    : "已解锁全部会员权益"}
                </Text>
              </View>
              {data?.is_a_member !== 1 && (
                <View
                  style={tailwind(
                    "flex justify-center items-center h-9 bg-[#FF669E] rounded-full px-4"
                  )}
                >
                  <Text style={tailwind("text-white text-sm font-medium")}>
                    ¥{vipPrice}/永久
                  </Text>
                </View>
              )}
            </View>
          </TouchableOpacity>
          {/* 纵向列表设置区 */}
          {data?.role === 3 && (
            <View
              style={{
                ...tailwind("flex flex-col py-2 rounded-2xl mt-3.5 border-2"),
                borderColor: "#2c2b2f",
              }}
            >
              {data?.streamer_ext?.zones?.length === 0 ? (
                <TouchableOpacity
                  onPress={() => navigation.navigate("CreateSpace")}
                  style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
                >
                  <NativeImage
                    source={require("../../assets/icon/others/myposts.png")}
                  />
                  <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                    开通空间
                  </Text>
                  <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
                    创作者功能
                  </Text>
                  <NativeImage
                    source={require("../../assets/icon/32DP/smalllink.png")}
                  />
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  onPress={() =>
                    navigation.navigate("StreamerSpace", { mid: data?.mid })
                  }
                  style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
                >
                  <NativeImage
                    source={require("../../assets/icon/others/space.png")}
                  />
                  <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                    我的空间
                  </Text>
                  <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
                    创作者功能
                  </Text>
                  <NativeImage
                    source={require("../../assets/icon/32DP/smalllink.png")}
                  />
                </TouchableOpacity>
              )}
              {/* {data?.streamer_ext?.zones && (
                <TouchableOpacity
                  onPress={() =>
                    navigation.navigate("StreamerSpace", { mid: data?.mid })
                  }
                  style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
                >
                  <NativeImage
                    source={require("../../assets/icon/others/space.png")}
                  />
                  <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                    我的空间
                  </Text>
                  <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
                    创作者功能
                  </Text>
                  <NativeImage
                    source={require("../../assets/icon/32DP/smalllink.png")}
                  />
                </TouchableOpacity>
              )} */}
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate("StreamerPosts", { mid: data?.mid })
                }
                style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
              >
                <NativeImage
                  source={require("../../assets/icon/others/myposts.png")}
                />
                <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                  广场动态
                </Text>
                <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
                  创作者功能
                </Text>
                <NativeImage
                  source={require("../../assets/icon/32DP/smalllink.png")}
                />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate("WechatWaitingToAdd", { tab: 0 })
                }
                style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
              >
                <NativeImage
                  source={require("../../assets/icon/32DP/wechat.png")}
                />
                <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                  待添加微信
                </Text>
                <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
                  创作者功能
                </Text>
                <NativeImage
                  source={require("../../assets/icon/32DP/smalllink.png")}
                />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => navigation.navigate("EditStreamerInfo")}
                style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
              >
                <NativeImage
                  source={require("../../assets/icon/32DP/editprofile.png")}
                />
                <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                  编辑资料
                </Text>
                <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
                  创作者功能
                </Text>
                <NativeImage
                  source={require("../../assets/icon/32DP/smalllink.png")}
                />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate("WebWithHeader", {
                    title: "我的专属链接",
                    uri:
                      process.env.EXPO_PUBLIC_WEB_URL +
                      "/generatelink/" +
                      data?.user_id,
                  })
                }
                style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
              >
                <NativeImage
                  source={require("../../assets/icon/32DP/share.png")}
                />
                <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                  生成分享页
                </Text>
                <Text style={{ ...tailwind("text-xs"), color: "#FFFFFF80" }}>
                  创作者功能
                </Text>
                <NativeImage
                  source={require("../../assets/icon/32DP/smalllink.png")}
                />
              </TouchableOpacity>
            </View>
          )}
          <View
            style={{
              ...tailwind("flex flex-col py-2 rounded-2xl mt-3.5 border-2"),
              borderColor: "#2c2b2f",
            }}
          >
            <TouchableOpacity
              onPress={() => navigation.navigate("Wallet")}
              style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
            >
              <NativeImage
                source={require("../../assets/icon/32DP/wallet.png")}
              />
              <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                我的钱包
              </Text>
              <NativeImage
                source={require("../../assets/icon/32DP/smalllink.png")}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigation.navigate("UnlockedWechat")}
              style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
            >
              <NativeImage
                source={require("../../assets/icon/32DP/wechat.png")}
              />
              <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                已解锁微信
              </Text>
              <NativeImage
                source={require("../../assets/icon/32DP/smalllink.png")}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigation.navigate("StreamerVerification")}
              style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
            >
              <NativeImage
                source={require("../../assets/icon/32DP/join.png")}
              />
              <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                申请入驻
              </Text>
              <NativeImage
                source={require("../../assets/icon/32DP/smalllink.png")}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() =>
                navigation.navigate("MessageDetail", {
                  mid: 1,
                })
              }
              style={tailwind("flex flex-row h-12 items-center pr-2 pl-4")}
            >
              <NativeImage
                source={require("../../assets/icon/32DP/contact.png")}
              />
              <Text style={tailwind("text-base text-white ml-2 flex-1")}>
                联系客服
              </Text>
              <NativeImage
                source={require("../../assets/icon/32DP/smalllink.png")}
              />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </ScrollView>
  );
}