import { Component } from "react";
import Taro,{useRouter} 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";
import nomadro from "../../images/nomadro.png";
import phone2 from "../../images/phone2.png";

import code from "../../images/code.svg";
import laptop from "../../images/laptop.svg";
import travel from "../../images/travel.svg";
import group from "../../images/group.svg";
import book from "../../images/book.svg";
import youtubesvg from "../../images/youtube.svg";
import dgnomad from "../../images/dgnomad.png";
import tiktok from "../../images/tiktok.png";
import youtube from "../../images/youtube.png";
import web from "../../images/web.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 [referer, setreferer] = useState("");


  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 [vipbook, setVipbook] = useState(false);  //是否在vip群打开

    const router = useRouter(); // Taro 3+ 获取路由参数

  // 在组件挂载时检测 referrer
  useEffect(() => {
    if (router && router.params && router.params.type === 'vipbook') {
      setVipbook(true)
    } else {
      setVipbook(false)
    }
  }, [router.params]);

  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}`;
      // let payUrl = `https://xorpay.com/api/openid/8220&callback_url=${nowUrl}`;
      // window.location.href = payUrl;

      // 清除旧 openid（可选，建议保留）
      window.localStorage.removeItem("openid");

      // 当前完整 URL（包括 ? 参数和 # hash）
      let nowUrl = window.location.href;

      // 正确构造 XorPay openid 获取地址
      // 1. 参数名必须是 callback
      // 2. 值必须 encodeURIComponent 编码
      let payUrl = `https://xorpay.com/api/openid/8220?callback=${encodeURIComponent(
        nowUrl
      )}`;

      console.log("跳转获取 openid 的 URL:", payUrl);
      // 示例输出：https://xorpay.com/api/openid/8220?callback=http%3A%2F%2F192.168.31.222%3A10086%2F%23%2Fpay

      // 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 = "https://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 goRead2 = () => {
    Taro.navigateTo({
      url: "/pages/book/index",
    });
  };
  const goRead = () => {
  // 极简：直接用 router.params 构建参数字符串（无参数时自动为空）
  const paramsStr = router.params 
    ? '?' + new URLSearchParams(router.params).toString() 
    : '';

  Taro.navigateTo({
    url: `/pages/book/index${paramsStr}`,
  });
};

  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_title">《云手机》</View> */}

            {/* <View className="left_text">手册3</View> */}
            {/* <View className="left_mobile">
              <Text>🚀 边旅行转赚钱</Text>
              <Text>1️⃣ 杠杆:媒体与代码</Text>
              <Text>2️⃣ 出海:地理套利</Text>
              <Text>3️⃣ 即时业务:一夜之间上线网站</Text>
              <Text>4️⃣ homelab:你的全球总部</Text>
              <Text>5️⃣ 远程团队:分布式协作</Text>
              <Text>5️⃣ -----------------</Text>

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

            {/* 卡片 */}
            <View className="card">
              <View className="cardItem">
                <View className="cardItem_left">
                  <Image
                    className="cardItem_left_img youtubeSvg"
                    // src={travel}
                    src={tiktok}

                    // src={`https://minioweb.hackrobot.cn/hackrobot/travel.svg`}
                    lazyLoad
                  ></Image>
                </View>
                <View className="cardItem_right">
                  <View className="cardItem_rightUp">Tiktok</View>
                  <View className="cardItem_rightDown">无人直播</View>
                </View>
              </View>
              <View className="cardItem">
                <View className="cardItem_left">
                  <Image
                    className="cardItem_left_img"
                    src={laptop}
                    // src={youtube}

                    // src={`https://minioweb.hackrobot.cn/hackrobot/laptop.svg`}
                    lazyLoad
                  ></Image>
                </View>
                <View className="cardItem_right">
                  <View className="cardItem_rightUp">Youtube</View>
                  <View className="cardItem_rightDown">自媒体</View>
                </View>
              </View>
              <View className="cardItem">
                <View className="cardItem_left">
                  <Image
                    className="cardItem_left_img"
                    src={group}
                    // src={web}

                    // src={`https://minioweb.hackrobot.cn/hackrobot/propless.svg`}
                    lazyLoad
                  ></Image>
                </View>
                <View className="cardItem_right">
                  <View className="cardItem_rightUp">web</View>
                  <View className="cardItem_rightDown">web:saas+web3</View>
                </View>
              </View>
            </View>

            <View className="left_btn ">
              <AtButton
                onClick={() => {
                  goRead();
                }}
                className="startRead"
                type="primary"
                size="small"
                circle
              >
                开始阅读
              </AtButton>
            </View>
          </View>
          <View className="index_book_img">
            <Image
              className="book_img"
              src={phone2}
              // src={dgnomad}
              // src="https://minioweb.hackrobot.cn/hackrobot/phone2.png"
              fetchpriority="high" // ✅ 提示浏览器尽快下载
              decoding="async" // ✅ 异步解码，加快渲染
              lazyLoad={false} // ✅ 禁止延迟加载（LCP 图必须优先加载）
              alt="云手机封面"
            />
          </View>
        </View>

        <View className="svgItems">
          <View className="svgItem">
            <View className="bookImg">
              <Image
                // style="width: 40%px;height:100%;background: #fff;"
                // src={book}
                src={laptop}
                // src={phone2}
                // src={tiktok}

                lazyLoad
              />
              <View className="bookImg_text">无人直播</View>
            </View>

            <View className="bookImg">
              <Image
                // style="width: 40%px;height:100%;background: #fff;"
                // src={book}
                src={travel}
                // src={youtube}

                lazyLoad
              />
              <View className="bookImg_text">RPA自动化</View>
            </View>
            <View className="bookImg">
              <Image
                // style="width: 40%px;height:100%;background: #fff;"
                // src={book}
                src={code}
                // src={web}
                lazyLoad
              />
              <View className="bookImg_text">web:saas+web3</View>
            </View>
          </View>
        </View>
        {/* <View className="footer">
          <View>Copyright © 2025 </View>
        </View> */}
      </View>
      {/* <View className="footer_div"></View> */}
    </>
  );
};

export default Index;