"use client";

import React, { useState, useEffect, useCallback } from "react";
import { generateSignature } from "@/utils/crypto";
import webviewBaseRequest from "@/utils/webviewBaseRequest";
import Link from "next/link";
import { Toast } from "antd-mobile";
import { useRouter, useSearchParams } from "next/navigation";
export default function Vip() {
  const router = useRouter();
  const searchParams = useSearchParams();

  //检查用户是否是vip
  const [isVip, setIsVip] = useState(false);
  const [name, setName] = useState("");
  const [isFetching, setIsFetching] = useState(true);

  const getBase = useCallback(
    (webviewBase) => {
      let searchParamsObj = null;
      let currentBaseCode = searchParams.get("base");
      if (currentBaseCode) {
        let currentBase = JSON.parse(currentBaseCode);
        searchParamsObj = { ...currentBase };
      }
      return searchParamsObj || webviewBase;
    },
    [searchParams]
  );
  const getUserData = async () => {
    const webviewBase = webviewBaseRequest();
    let base = getBase(webviewBase);
    try {
      const signature = generateSignature({
        ...base,
        mid: base.b_mid,
      });
      const detailResponse = await fetch(
        `/api/account/list_by_mid?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ...base,
            mid: base.b_mid,
          }),
        }
      );
      const detailData = await detailResponse.json();
      if (detailData.ret === -1) {
        Toast.show({
          content: detailData.msg,
        });
        return;
      }
      setName(detailData.data.account.name);
      if (detailData.data.account.is_a_member === 1) setIsVip(true);
      setIsFetching(false);
    } catch (error) {
      console.error(error);
    }
  };
  //轮询请求
  useEffect(() => {
    setTimeout(() => {
      getUserData();
    }, 500);
    const intervalId = setInterval(() => {
      getUserData();
    }, 2000);
    return () => clearInterval(intervalId);
  }, []);

  //创建充值订单
  const [isLoading, setIsLoading] = useState(false);
  const createOrder = async (type = "alipay_h5") => {
    const webviewBase = webviewBaseRequest();
    let base = getBase(webviewBase);
    if (base?.b_dt === 1 && base?.b_ver !== "1.5.0") {
      Toast.show({
        content: "ios暂时无法开通会员，请等待版本更新",
      });
      return;
    }
    const body = {
      ...base,
      product_id: "membership",
      pay_type: type,
      redirect_url: type === "yeepay_wxpay_h5" ? window.location.href : "",
      from: searchParams.get("base") ? "web" : "app",
    };

    //如果是微信jsapi支付直接跳转到中间页
    if (type === "wxpay_jsapi") {
      router.push(`/pay/${encodeURIComponent(JSON.stringify(body))}`);
      return;
    }

    setIsLoading(true);

    const signature = generateSignature(body);
    try {
      const response = await fetch(
        `/api/vas/create_order?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(body),
        }
      );
      const data = await response.json();
      if (data.ret === -1) {
        Toast.show({
          content: data.msg,
        });
        return;
      }
      switch (type) {
        case "yeepay_alipay_h5":
          router.push(`${data.data.yeepay_alipay_h5_param_str}`);
          break;
        case "yeepay_wxpay_h5":
          router.push(`${data.data.yeepay_wxpay_h5_param_str}`);
          break;
        case "alipay_h5":
          router.push(`${data.data.alipay_h5_param_str}`);
          break;
        case "wxpay_h5":
          router.push(
            `https://shop.tiefen.fun/pay/wxpay_h5/${encodeURIComponent(
              data.data.wxpay_h5_param_str
            )}`
          );
          break;
        default:
          router.push(`${data.data.alipay_h5_param_str}`);
          break;
      }
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  if (isFetching) {
    return (
      <section className="flex flex-1 justify-center container">
        <span className="absolute top-1/2 loading loading-spinner loading-lg"></span>
      </section>
    );
  }

  return (
    <section className="flex flex-1 justify-center container">
      {isLoading && (
        <span className="absolute top-1/2 loading loading-spinner loading-lg z-20"></span>
      )}
      <img
        className="absolute top-0 left-0 z-0 w-full"
        src={
          process.env.NEXT_PUBLIC_CDN_URL + "/public/images/vipbackground.png"
        }
        alt=""
      />
      <div className="flex flex-col z-10">
        <img
          className="pt-24"
          src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/viptitle.png"}
          alt=""
        />
        <div className="flex flex-col px-4 pb-32">
          {isVip ? (
            <div className="relative">
              <img
                src={
                  process.env.NEXT_PUBLIC_CDN_URL + "/public/images/isvip.png"
                }
                alt=""
              />
              <p className="absolute bottom-5 left-5 text-[#521824B2] text-sm font-medium">
                {name}
              </p>
            </div>
          ) : (
            <img
              src={
                process.env.NEXT_PUBLIC_CDN_URL + "/public/images/notvip.png"
              }
              alt=""
            />
          )}
          <div
            className="flex flex-col p-4 rounded-2xl mt-4"
            style={{
              background:
                "linear-gradient(94.52deg, #241018 3.66%, #0F080B 100%), linear-gradient(90deg, rgba(66, 50, 56, 0.5) 0%, rgba(61, 42, 48, 0.5) 100%)",
              border: "2px solid",
              borderColor: "#42323880",
            }}
          >
            <p className="text-[#F5C4CC] text-2xl font-bold">会员权益</p>
            <div className="flex flex-row flex-wrap gap-y-3.5 mt-4">
              <div className="flex flex-row items-center basis-1/2">
                <img
                  className="w-11"
                  src={
                    process.env.NEXT_PUBLIC_CDN_URL +
                    "/public/images/vipright1.png"
                  }
                  alt=""
                />
                <div className="flex flex-col ml-1.5">
                  <p className="text-[#F5C4CC] text-sm">高清图片</p>
                  <p className="text-[#613F46] text-xs">下载保存</p>
                </div>
              </div>
              <div className="flex flex-row items-center basis-1/2">
                <img
                  className="w-11"
                  src={
                    process.env.NEXT_PUBLIC_CDN_URL +
                    "/public/images/vipright4.png"
                  }
                  alt=""
                />
                <div className="flex flex-col ml-1.5">
                  <p className="text-[#F5C4CC] text-sm">搜索筛选</p>
                  <p className="text-[#613F46] text-xs">发现心仪</p>
                </div>
              </div>
              <div className="flex flex-row items-center basis-1/2">
                <img
                  className="w-11"
                  src={
                    process.env.NEXT_PUBLIC_CDN_URL +
                    "/public/images/vipright2.png"
                  }
                  alt=""
                />
                <div className="flex flex-col ml-1.5">
                  <p className="text-[#F5C4CC] text-sm">身份标签</p>
                  <p className="text-[#613F46] text-xs">专属标识</p>
                </div>
              </div>
              <div className="flex flex-row items-center basis-1/2">
                <img
                  className="w-11"
                  src={
                    process.env.NEXT_PUBLIC_CDN_URL +
                    "/public/images/vipright3.png"
                  }
                  alt=""
                />
                <div className="flex flex-col ml-1.5">
                  <p className="text-[#F5C4CC] text-sm">专属客服</p>
                  <p className="text-[#613F46] text-xs">极速服务</p>
                </div>
              </div>
            </div>
          </div>
          <div
            className="flex flex-col p-4 rounded-2xl mt-4"
            style={{
              border: "2px solid",
              borderColor: "#42323880",
            }}
          >
            <p className="text-base font-medium text-[#F5C4CC]">会员规则</p>
            <p className="text-xs font-medium text-[#F5C4CC] mt-2">
              1、会员权限永久有效，开通后请勿传播平台付费内容；
            </p>
            <p className="text-xs font-medium text-[#F5C4CC]">
              2、更多特权内容敬请期待，详情请关注本页面会员权益信息变化。
            </p>
            <p className="text-base font-medium text-[#F5C4CC] mt-6">
              注意事项
            </p>
            <p className="text-xs font-medium text-[#F5C4CC] mt-2">
              1、会员特权属于虚拟商品，一经售出概不退换；
            </p>
            <p className="text-xs font-medium text-[#F5C4CC]">
              2、请确保支付时您的网络环境保持畅通，避免因第三方网络环境导致的支付失败；
            </p>
            <p className="text-xs font-medium text-[#F5C4CC]">
              3、本项特权内容最终解释权归铁粉空间运营方所有。
            </p>
          </div>
        </div>
        {!isVip && (
          <div className="flex flex-col w-full fixed left-0 bottom-0 z-20">
            <div className="h-12 bg-gradient-to-t from-[#07050AE5] to-[#07050A00]"></div>
            <div className="flex flex-col pt-3 pb-11 px-4 bg-[#07050AE5]">
              <div className="flex flex-row justify-between">
                <div className="w-full px-2">
                  <div
                    onClick={() => createOrder("alipay_h5")}
                    className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-primary rounded-full"
                  >
                    <img
                      className="w-[22px]"
                      src={
                        process.env.NEXT_PUBLIC_CDN_URL +
                        "/public/images/alipay.png"
                      }
                      alt=""
                    />
                    <p className="text-white text-base font-medium whitespace-nowrap">
                      支付宝支付
                    </p>
                  </div>
                </div>
              </div>
              <p className="text-secondary text-xs font-medium mt-4 text-center mb-1">
                确认购买即视为同意
                <Link
                  className="link text-[#309EDC]"
                  href="/doc/rechargeagreement"
                >
                  《用户充值协议》
                </Link>
              </p>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}