import { View, Text, Modal, TouchableOpacity, Alert } from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { Image } from "expo-image";
import { Icon } from "@rneui/themed";
import * as Clipboard from "expo-clipboard";
import { useNavigation } from "@react-navigation/native";
import { get } from "../../utils/storeInfo";
import baseRequest from "../../utils/baseRequest";
import Toast from "react-native-toast-message";
import { generateSignature } from "../../utils/crypto";

export default function GetWechatModal({ visible, setVisible, streamerMid }) {
  const tailwind = useTailwind();
  const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
  const navigation = useNavigation();

  //保存用户数据
  const [userData, setUserData] = useState({});
  //保存主播数据
  const [streamerData, setStreamerData] = useState({});
  //保存用户数据
  const [wechat, setWechat] = useState("");
  //是否已经解锁微信
  const [isWechatUnlocked, setIsWechatUnlocked] = useState(false);
  //是否显示微信
  const [isWechatShow, setIsWechatShow] = useState(false);
  //是否展示余额不足内容
  const [isMoneyEnough, setIsMoneyEnough] = useState(true);

  useEffect(() => {
    const getInitData = async () => {
      const account = await get("account");
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        mid: streamerMid,
        ...base,
      });
      try {
        //获取主播数据
        const streamerResponse = await fetch(
          `${apiUrl}/api/streamer/list_ext_by_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              mid: streamerMid,
              ...base,
            }),
          }
        );
        const temStreamerData = await streamerResponse.json();
        if (temStreamerData.ret === -1) {
          Toast.show({
            type: "error",
            text1: temStreamerData.msg,
            topOffset: 60,
          });
          return;
        }
        setStreamerData({
          ...temStreamerData.data.streamer_ext,
          wechat_coin_price:
            temStreamerData.data.streamer_ext.wechat_coin_price,
        });
        //是否已经解锁微信
        setIsWechatUnlocked(temStreamerData.data.is_unlock_wechat);
        //获取用户数据
        const signature2 = await generateSignature({
          ...base,
          mid: account.mid,
        });
        const userResponse = await fetch(
          `${apiUrl}/api/account/list_by_mid?signature=${signature2}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...base,
              mid: account.mid,
            }),
          }
        );
        const temUserData = await userResponse.json();
        if (temUserData.ret === -1) {
          Toast.show({
            type: "error",
            text1: temUserData.msg,
            topOffset: 60,
          });
          return;
        }
        setUserData(temUserData.data.account);
      } catch (error) {
        console.error(error);
      }
    };
    if (!streamerMid) return;
    if (!visible) return;
    getInitData();
  }, [streamerMid, visible]);

  //点击解锁微信按钮
  const unlockWechat = async () => {
    //余额不够就显示余额不足前往充值，够就直接购买
    if (userData?.gold_num >= streamerData?.wechat_coin_price) {
      //先支付，支付成功后添加解锁关系，再展示解锁界面
      //支付金币解锁微信
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        contact_product_id: "contact_wechat",
        uid: streamerMid,
        ...base,
      });
      try {
        const unlockResponse = await fetch(
          `${apiUrl}/api/vas/one_step_unlock?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              contact_product_id: "contact_wechat",
              uid: streamerMid,
              ...base,
            }),
          }
        );
        const unlockData = await unlockResponse.json();
        if (unlockData.ret === -1) {
          Toast.show({
            type: "error",
            text1: unlockData.msg,
            topOffset: 60,
          });
          return;
        }
        //展示解锁界面
        setIsWechatUnlocked(true);
      } catch (error) {
        console.error(error);
      }
    } else {
      setIsMoneyEnough(false);
    }
  };

  //获取微信并展示
  const showWechat = async () => {
    if (!isWechatShow) {
      //获取微信数据
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        uid: streamerMid,
        ...base,
      });
      try {
        const getWechatResponse = await fetch(
          `${apiUrl}/api/vas/query_wechat?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              uid: streamerMid,
              ...base,
            }),
          }
        );
        const getWechatData = await getWechatResponse.json();
        if (getWechatData.ret === -1) {
          Toast.show({
            type: "error",
            text1: getWechatData.msg,
            topOffset: 60,
          });
          return;
        }
        setWechat(getWechatData.data.wechat_contact);
      } catch (error) {
        console.error(error);
      }
      setIsWechatShow(true);
    } else {
      await Clipboard.setStringAsync(wechat);
      Alert.alert(null, "复制成功");
      setIsWechatShow(false);
    }
  };

  return (
    <Modal
      visible={visible}
      transparent={true}
      statusBarTranslucent
      animationType="fade"
    >
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          setVisible(false);
          setIsMoneyEnough(true);
        }}
        style={{
          backgroundColor: "#00000080",
          ...tailwind("flex-1 justify-center items-center"),
        }}
      >
        <TouchableOpacity
          activeOpacity={1}
          style={tailwind("p-4 rounded-2xl bg-[#1E1C29] items-center")}
        >
          {isMoneyEnough ? (
            <>
              <View style={tailwind("items-center")}>
                <Image
                  style={tailwind("w-16 h-16 rounded-full absolute -top-12")}
                  source={streamerData?.avatar?.images[0]?.urls[0]}
                  placeholder={blurhash}
                  contentFit="cover"
                  transition={1000}
                  cachePolicy="disk"
                />
              </View>
              <Text style={tailwind("text-2xl text-white font-medium mt-4")}>
                {streamerData?.name}
              </Text>
              {/* 微信展示区 */}
              {isWechatUnlocked ? (
                <TouchableOpacity
                  style={{
                    ...tailwind(
                      "px-4 py-2 rounded-full mt-2 flex-row justify-center items-center"
                    ),
                    backgroundColor: isWechatShow ? "#FFFFFF1A" : "#FF669E",
                  }}
                  onPress={showWechat}
                >
                  {!isWechatShow && (
                    <Icon
                      type="ionicon"
                      name="lock-open"
                      color="#ffffff"
                      size={12}
                    />
                  )}
                  <Text style={tailwind("text-base text-white text-center")}>
                    {isWechatShow ? wechat : "已解锁·查看微信"}
                  </Text>
                  {isWechatShow && (
                    <Icon
                      type="ionicon"
                      name="copy"
                      color="#ffffff"
                      size={12}
                      containerStyle={tailwind("ml-2")}
                    />
                  )}
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  activeOpacity={1}
                  style={tailwind(
                    "flex-row px-4 py-2 bg-[#FFFFFF1A] rounded-xl mt-2 items-center justify-center"
                  )}
                >
                  <Icon
                    type="ionicon"
                    name="lock-closed"
                    color="#ffffff"
                    size={12}
                  />
                  <Text style={tailwind("text-base text-white")}>
                    解锁后展示
                  </Text>
                </TouchableOpacity>
              )}
              <Text style={tailwind("text-xs text-[#F53030] my-2")}>
                添加时请备注自己“铁粉空间”昵称
              </Text>
              <Text style={tailwind("text-xs text-[#F53030] mb-2")}>
                若解锁后72小时未通过好友，请联系客服
              </Text>
              {!isWechatUnlocked && (
                <TouchableOpacity
                  onPress={unlockWechat}
                  style={tailwind(
                    "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
                  )}
                >
                  <Text style={tailwind("text-white text-base")}>
                    解锁微信（{streamerData?.wechat_coin_price}金币）
                  </Text>
                </TouchableOpacity>
              )}
            </>
          ) : (
            <>
              <Text style={tailwind("text-2xl text-white font-medium mb-4")}>
                余额不足
              </Text>
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate("Wallet");
                  setVisible(false);
                  setIsMoneyEnough(true);
                }}
                style={tailwind(
                  "px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
                )}
              >
                <Text style={tailwind("text-white text-base")}>前往充值</Text>
              </TouchableOpacity>
            </>
          )}
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
}