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 youtubesvg from "../../images/youtube.svg";
import ytGpt from "../../images/ytGpt.png";


import ssh from "../../images/ssh.svg";
import robot from "../../images/robot.svg";
import host from "../../images/host.svg";
import man from "../../images/man.svg";
import woman from "../../images/woman.svg";
import live from "../../images/live.svg";
import income from "../../images/income.svg";
import code from "../../images/code.svg";
import dgnomad from "../../images/dgnomad.png";
import company from "../../images/company.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;
    }
  };

  // pwa安装弹窗
  // useEffect(() => {
  //   window.addEventListener("beforeinstallprompt", (event) => {
  //     event.preventDefault();
  //     let installPrompt = event;
  //     // 显示安装按钮
  //     document.getElementById("install-btn").addEventListener("click", () => {
  //       installPrompt.prompt();
  //     });
  //   });
  // }, []);

  // 获取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("访问提醒发送成功");
      },
    });
  };

  const sendNtfy = () => {
    // fetch("https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1", {
    //   method: "POST", // PUT works too
    //   body: "Backup successful 😀",
    // });

    Taro.request({
      method: "POST",
      url: `${`https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1`}`,
      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">《一人公司》</View>
            <View className="left_text">数字游民-手册2</View>

            {/* 卡片 */}
            <View className="card">
              <View className="cardItem">
                <View className="cardItem_left">
                  <Image
                    className="cardItem_left_img youtubeSvg"
                    src={income}
                  ></Image>
                </View>
                <View className="cardItem_right">
                  <View className="cardItem_rightUp">创业方法论</View>
                  <View className="cardItem_rightDown">
                    随时随地,跟踪业务
                  </View>
                </View>
              </View>
        
              <View className="cardItem">
                <View className="cardItem_left">
                  <Image className="cardItem_left_img" src={live}></Image>
                </View>
                <View className="cardItem_right">
                  <View className="cardItem_rightUp">自媒体</View>
                  <View className="cardItem_rightDown">
                    公域流量,私域运营
                  </View>
                </View>
              </View>
              <View className="cardItem">
                <View className="cardItem_left">
                  <Image className="cardItem_left_img code" src={dgnomad}></Image>
                </View>
                <View className="cardItem_right">
                  <View className="cardItem_rightUp">独立开发</View>
                  <View className="cardItem_rightDown">sass产品,迭代更新</View>
                </View>
              </View>
            </View>

            <View className="left_btn ">
              <AtButton
                onClick={() => {
                  try {
                    sendNtfy();
                  } catch (err) {
                    console.error("Error sending notification:", err);
                  }
                  goRead();
                }}
                className="startRead"
                type="primary"
                size="small"
                circle
              >
                开始阅读
              </AtButton>
            </View>
          </View>
          <View className="index_book_img">
            <Image
            className="back_img"
              // style="width: 40%px;height:100%;background: #fff;"
              src={company}
            />
          </View>
        </View>

        {/* <View className="group">
          <View className="groupItem"></View>
          <View className="groupItem"></View>
          <View className="groupItem"></View>
          <View className="groupItem"></View>
          <View className="groupItem"></View>
          <View className="groupItem"></View>
          <View className="groupItem"></View>
          <View className="groupItem"></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 className="footer_div"></View> */}
        {/* <View className="footer">
          <View>Copyright © 2025 </View>
        </View> */}
      </View>
    </>
  );
};

export default Index;