import { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import { AtButton } from "taro-ui";
import { AtSearchBar } from "taro-ui";
import { Picker } from "@tarojs/components";
import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtAvatar,
  AtAccordion,
} from "taro-ui";
import { AtToast } from "taro-ui";
import { AtIcon } from "taro-ui";
import { VIEW } from "@tarojs/runtime";
import "animate.css";
import touxiang from "../../images/touxiang.png";
import cat from "../../images/cat.jpg";
import girl from "../../images/girl.jpg";

import emoji from "../../images/emoji.png";
import phone from "../../images/phone.png";
// import robot from "../../images/robot.png";
import nomad from "../../images/nomad.png";
import book from "../../images/book.png";
import qrcode from "../../images/qrcode.png";

import meetup from "../../images/meetup.jpg";
import bookqr from "../../images/bookqr.jpg";
import loft from "../../images/loft.png";
import AIGC from "../../images/AIGC.png";
import robot192 from "../../images/robot192.png";
import youtube from "../../images/youtube.svg";
import ssh from "../../images/ssh.svg";
import robot from "../../images/robot.svg";
import host from "../../images/host.svg";
import ytGpt from "../../images/ytGpt.png";

import demo from "../../images/demo.svg";
import AI from "../../images/AI.png";

// export default class Index extends Component {
const Index = () => {
  const [current, setcurrent] = useState(0);
  const [openId, setopenId] = useState(null);
  const [wxid, setwxid] = useState(null);
  const [userInfo, setuserInfo] = useState({});

  const [open, setopen] = useState(false);
  const [referer, setreferer] = useState(window.document.referrer);

  const [isOpened, setisOpened] = useState(false);
  const [meetupQR, setmeetupQR] = useState(false);

  const [bookToast, setbookToast] = useState(false);
  const [meetupToast, setmeetupToast] = useState(false);

  const [joinMeetup, setjoinMeetup] = useState(false);
  const [bookpay, setbookpay] = useState(0);

  const [isWeChat, setisWeChat] = useState(false);

  const getOpenidFromUrl = (url) => {
    const pattern = /[?&]openid=([^&#]+)/;
    const match = url.match(pattern);
    if (match) {
      return match[1];
    }
    return null;
  };

  // 是否在微信客户端
  const isWeChatFun = () => {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") != -1) {
      setisWeChat(true);
      return true;
    } else {
      setisWeChat(false);
      return false;
    }
  };

  // 获取openid
  const getOpenid = () => {
    // let newparams = Taro.getCurrentInstance().router.params;
    // let urlopenid = newparams.openid;

    // hash模式
    // http://192.168.31.245:10086/?openid=o7LFAwR32hWGq9XOpd7ZxK1wZxq8#/pages/index/index
    let hashopenid = null;
    if (window.location.href.includes("openid")) {
      hashopenid = getOpenidFromUrl(window.location.href);
    } else {
      // hashopenid = window.localStorage.getItem("openid");
    }
    if (!!hashopenid && hashopenid != "undefined" && hashopenid != "null") {
      // 获取到openid
      window.localStorage.setItem("openid", hashopenid);
      setopenId(hashopenid);

      // window.alert(hashopenid);
      // 查询数据库是否存在openid
      Taro.request({
        method: "GET",
        url: `${process.env.TARO_API_API}/user/${hashopenid}`, //仅为示例，并非真实的接口地址
        // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
        success: function (res) {
          if (res?.data?.userInfo) {
            //  有完整的用户信息userInfo
            setuserInfo(res?.data?.userInfo);
            window.localStorage.setItem("userInfo", userInfo);
          }
        },
        complete: function (finy) {
          // 获取wxid参数
          getWxidFromUrl();
        },
      });
    } else {
      let nowUrl = window.location.href;
      window.localStorage.removeItem("openid");
      let payUrl = `https://payjs.cn/api/openid?mchid=1561724891&callback_url=${nowUrl}`;
      window.location.href = payUrl;
    }
  };

  // 获取更新用户信息
  const getUserinfo = (wxid) => {
    Taro.request({
      method: "GET",
      url: `${process.env.TARO_API_API}/user/${wxid}`, //仅为示例，并非真实的接口地址
      // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
      success: function (res) {
        if (res?.data?.userInfo) {
          //判断wxid是否存在
          if (res?.data?.userInfo?.openid) {
            //  有完整的用户信息userInfo
            setuserInfo(res?.data?.userInfo);
            window.localStorage.setItem("userInfo", userInfo);
          }
        }
      },
      complete: function (finy) {},
    });
  };

  // 获取url中的wxid
  const getWxidFromUrl = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const urlwxid = urlParams.get("wxid");
    if (!!urlwxid) {
      setwxid(urlwxid);
      window.localStorage.setItem("wxid", wxid);
      // 优先查询openid是否存在数据库
      Taro.request({
        method: "GET",
        url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
        // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
        success: function (res) {
          if (res?.data?.userInfo) {
            //判断wxid是否存在
            if (res?.data?.userInfo?.openid) {
              // window.alert(res?.data?.userInfo?.openid);
              // window.alert(window.localStorage.getItem("openid"));

              if (
                res?.data?.userInfo?.openid !==
                window.localStorage.getItem("openid")
              ) {
                // 删除其他用户的wxid
                window.localStorage.removeItem("userInfo");
                window.localStorage.removeItem("openid");
                window.localStorage.removeItem("wxid");
                window.location.href = "http://nomad.hackrobot.cn";
              } else {
                //  有完整的用户信息userInfo
                setuserInfo(res?.data?.userInfo);
                window.localStorage.setItem("userInfo", userInfo);
              }
            } else {
              // 绑定wxid与openid到数据库
              wxidTapopenid(urlwxid);
            }
          } else {
            // 新增wxid用户
          }
        },
        complete: function (finy) {
          // tg消息通知
          tgMessage();
        },
      });
    } else {
      // tg消息通知
      tgMessage();
    }
    return wxid;
  };

  // 绑定wxid与openid
  const wxidTapopenid = (newWxid) => {
    const userUpdateData = {
      openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
    };
    Taro.request({
      method: "PUT",
      // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
      url: `${process.env.TARO_API_API}/user/${newWxid}`, //仅为示例，并非真实的接口地址
      data: userUpdateData,
      header: {
        "Content-Type": "application/json",
      },
      success: function (res) {},
      fail: function (err) {},
      complete: function (finy) {},
    });
  };

  // 新增openid用户
  const addopenidUser = () => {
    const userUpdateData = {
      openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
    };
    Taro.request({
      method: "GET",
      // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
      url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem(
        "openid"
      )}`, //仅为示例，并非真实的接口地址
      data: userUpdateData,
      header: {
        "Content-Type": "application/json",
      },
      success: function (res) {},
      fail: function (err) {},
      complete: function (finy) {},
    });
  };

  // 网页查看通知
  const tgMessage = () => {
    Taro.request({
      method: "GET",
      url: `${
        process.env.TARO_API_API
      }/tgMessage?openid=${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
      success: function (res) {
        console.log("访问提醒发送成功");
      },
    });
  };

  // 入群申请

  useEffect(() => {
    let inwechat = isWeChatFun();
    if (inwechat) {
      // 获取openId
      getOpenid();
    } else {
      // window.alert('不在微信')
    }
  }, []);

  useEffect(() => {
    // alert(window.localStorage.getItem("bookpay"))
    setbookpay(window.localStorage.getItem("bookpay"));
  }, []);

  const goBack = () => {
    Taro.navigateBack({});
  };

  const handleClick = (value) => {
    // window.alert(value)
    setopen(value);
  };

  const payh5 = (type, total_fee = 1000) => {
    // console.log("111");
    Taro.request({
      method: "POST",
      url: `${process.env.TARO_API_API}/payh5`,
      // url: "${process.env.TARO_API_API}/payh5",

      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址

      data: {
        callback_url: window.location.href,
        openid: window.localStorage.getItem("openid"),
        total_fee: total_fee, // 金额,单位:分
        type: type, //订单类型 book/meetup/video/vip
      },
      header: {
        "content-type": "application/json", // 默认值
      },
      success: function (res) {
        console.log(res.data);
        // window.alert(res.data.jsapi);
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            // 以下6个支付参数通过payjs的jsapi接口获取
            // appId: "wxc5205a653b0259bf",
            // timeStamp: "1701401644",
            // nonceStr: "KhOYB0wFV6j9qyQK",
            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
            // signType: "MD5",
            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
            ...(res?.data?.jsapi ?? {}),
          },
          function (res) {
            // 支付成功
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
              WeixinJSBridge.call("closeWindow");
            }
          }
        );
      },
    });
  };

  const goRead = () => {
    Taro.navigateTo({
      url: "/pages/book/index",
    });
  };

  return (
    <>
      <View className="index">
        {/* 在线图书 */}

        {/* 参考资料https://readmake.com/ */}
        <View className="index-book  animate__animated animate__pulse">
          <View className="index_book_left">
            <View className="left_title">《AI 与 RPA 自动化》</View>
            <View className="left_text">数字游民-手册2</View>
            <View className="left_mobile">
              <Text>🚀 技术杠杆与变现</Text>
              <Text>1️⃣ PVE: 压榨硬件,超融合,虚拟机</Text>
              <Text>2️⃣ frp: 内网穿透</Text>
              <Text>3️⃣ Docker与K8S:容器化部署</Text>
              <Text>4️⃣ GPU:本地大模型,私有化部署</Text>
              <Text>5️⃣ OTG:边缘计算npu与机器视觉</Text>
              {/* <Text>5️⃣ -----------------</Text> */}

              <Text>🔥 一起实践,交流</Text>
            </View>

            <View className="left_btn ">
              <AtButton
                onClick={() => {
                  goRead();
                }}
                className="startRead"
                type="primary"
                size="small"
                circle
              >
                开始阅读
              </AtButton>
            </View>
          </View>
          <View className="index_book_img">
            <Image
              // style="width: 40%px;height:100%;background: #fff;"
              src={AI}
            />
          </View>
        </View>

        <View className="svgItems">
          <View className="svgItem">
            {" "}
            <View className="bookImg">
              <Image
                // style="width: 40%px;height:100%;background: #fff;"
                // src={book}
                src={ssh}
              />
              <View className="bookImg_text">SSH远程</View>
            </View>
            <View className="bookImg">
              <Image
                // style="width: 40%px;height:100%;background: #fff;"
                // src={book}
                src={robot}
              />
              <View className="bookImg_text">RPA自动化</View>
            </View>
            <View className="bookImg">
              <Image
                // style="width: 40%px;height:100%;background: #fff;"
                // src={book}
                src={host}
              />
              <View className="bookImg_text">虚拟化</View>
            </View>
          </View>
        </View>
      </View>
      {/* <View className="footer_div"></View> */}
      <View className="footer">
        {/* <View>《Youtube运营笔记》</View> */}
        <View>Copyright © 2025 </View>
      </View>
    </>
  );
};

export default Index;
