import { Button, Image } from "@nutui/nutui-react-taro";
import { View, ScrollView } from "@tarojs/components";
import { downLogApi } from "../../api/log";
import banner1 from "../../asset/img/banner/1.jpg";
import banner2 from "../../asset/img/banner/2.jpg";
import banner3 from "../../asset/img/banner/3.jpg";
import banner4 from "../../asset/img/banner/4.jpg";
import banner5 from "../../asset/img/banner/5.jpg";

const GameIntro = (props) => {
  const { vipUserInfo } = props;
  console.log(vipUserInfo);

  // 下载游戏
  const handleDown = async (item: any) => {
    {
      // 下载功能
      try {
        await downLogApi({
          user_name: vipUserInfo.user_name,
          phone: vipUserInfo.phone,
          server_id: vipUserInfo.server_id,
          game_id: vipUserInfo.download_list[0].to_game_id,
        });
        // 非微信内置浏览器，直接跳转下载
        var schemeUrl = vipUserInfo.download_list[0].open_url; // App 的 URL Scheme
        var downloadUrl = vipUserInfo.download_list[0].url; // 你的下载页链接

        console.log("schemeUrl", schemeUrl);
        console.log("downloadUrl", downloadUrl);

        if (schemeUrl) {
          var timer: ReturnType<typeof setTimeout> | undefined = undefined;
          var hasApp = false;

          // 监听 visibilitychange，如果页面切到后台，说明 App 被唤起了
          document.addEventListener("visibilitychange", function () {
            if (document.hidden) {
              hasApp = true;
              clearTimeout(timer); // 停止 fallback
            }
          });

          // 尝试唤起 App
          window.location.href = schemeUrl;

          // 定时器：如果 1.5 秒后还没切后台，说明 App 没安装 → 跳下载页
          timer = setTimeout(function () {
            if (!hasApp) {
              window.location.href = downloadUrl;
            }
          }, 1500);
        } else {
          window.location.href = downloadUrl;
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
  return (
    <ScrollView scrollY style={props.style} className="pb-[20px]">
      <View>
        <View className="p-[10px] flex items-center">
          <Image
            src={vipUserInfo?.download_list[0].icon}
            width={70}
            height={70}
            className="rounded-[10px] overflow-hidden"
          />
          <View className="ml-[10px]">
            <View className="text-[18px] font-[800] text-[#9c9dee]">
              {vipUserInfo?.download_list[0].title}
            </View>
            <View className="text-[12px] text-[#949494]">
              {vipUserInfo?.download_list[0].subtitle2}
            </View>
            <View className="flex flex-wrap">
              {vipUserInfo?.download_list[0].tags.map((item) => (
                <View className="text-[12px] px-[5px] py-[2px] mb-[5px] text-[#7ac0a4] bg-[#e8f5f0] mr-[5px]">
                  {item}
                </View>
              ))}
            </View>
          </View>
        </View>
        <View className="flex justify-between text-center">
          <View className="px-[20px] w-[24%] border-r-[1px] border-r-solid border-r-[#e0e0e0]">
            <View className="text-[14px] font-[800] text-[#333]">4.7</View>
            <View className="text-[12px] text-[#949494]">游戏评分</View>
          </View>
          <View className="px-[20px] w-[24%] border-r-[1px] border-r-solid border-r-[#e0e0e0]">
            <View className="text-[14px] font-[800] text-[#333]">90万+</View>
            <View className="text-[12px] text-[#949494]">下载次数</View>
          </View>
          <View className="px-[20px] w-[24%] border-r-[1px] border-r-solid border-r-[#e0e0e0]">
            <View className="text-[14px] font-[800] text-[#333]">1.3G</View>
            <View className="text-[12px] text-[#949494]">大小</View>
          </View>
          <View className="px-[20px] w-[24%]">
            <View className="text-[14px] font-[800] text-[#333]">17+</View>
            <View className="text-[12px] text-[#949494]">年龄分级</View>
          </View>
        </View>
        <View className="w-full h-[427px] p-[10px]">
          <ScrollView className="w-full h-full" scrollX showScrollbar={false}>
            <View className="flex">
              <View
                style={{
                  width: "250px",
                  height: "427px",
                  marginRight: "10px",
                }}
              >
                <img
                  src={banner1}
                  width="250px"
                  height="427px"
                  style={{ objectFit: "cover", borderRadius: "10px" }}
                />
              </View>
              <View
                style={{
                  width: "250px",
                  height: "427px",
                  marginRight: "10px",
                }}
              >
                <img
                  src={banner2}
                  width="250px"
                  height="427px"
                  style={{ objectFit: "cover", borderRadius: "10px" }}
                />
              </View>
              <View
                style={{
                  width: "250px",
                  height: "427px",
                  marginRight: "10px",
                }}
              >
                <img
                  src={banner3}
                  width="250px"
                  height="427px"
                  style={{ objectFit: "cover", borderRadius: "10px" }}
                />
              </View>
              <View
                style={{
                  width: "250px",
                  height: "427px",
                  marginRight: "10px",
                }}
              >
                <img
                  src={banner4}
                  width="250px"
                  height="427px"
                  style={{ objectFit: "cover", borderRadius: "10px" }}
                />
              </View>
              <View
                style={{
                  width: "250px",
                  height: "427px",
                  marginRight: "10px",
                }}
              >
                <img
                  src={banner5}
                  width="250px"
                  height="427px"
                  style={{ objectFit: "cover", borderRadius: "10px" }}
                />
              </View>
            </View>
          </ScrollView>
          <View className="text-[12px] text-[#949494]">
            版本号：1.0.0 更新时间：2025-09-19
          </View>
          <View className="px-[10px]">
            <Button
              block
              size="large"
              type="primary"
              className="p-[10px] bg-[#fff]"
              onClick={handleDown}
            >
              启动游戏
            </Button>
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

export default GameIntro;
