"use client";

import React, { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { Avatar, Toast, Space } from "antd-mobile";
import { useRouter } from "next/navigation";
import { get, save } from "@/utils/storeInfo";
import requireAPI from "@/utils/requireAPI";
import OwnIcon from "@/components/OwnIcon";
import OwnImage from "@/components/OwnImage";
import { getVipPrice } from "@/utils/auth";
import baseRequest from "@/utils/baseRequest";
const My = () => {
  const [userInfo, setUserInfo] = useState({});
  const router = useRouter();
  const [streamerNavigates, setStreamerNavigates] = useState([]);
  const [userNavigates, setUserNavigates] = useState([]);
  useEffect(() => {
    const userInfo = get("account");
    if (userInfo) {
      getData(userInfo);
    }
  }, []);
  const getData = async (oldUserInfo) => {
    const data = await requireAPI(
      "POST",
      "/api/account_relation/count",
      null,
      true
    );
    if (data.ret === -1) {
      Toast.show({
        icon: "fail",
        content: data.msg,
        position: "top",
      });
      return;
    }
    const streamer = await requireAPI(
      "POST",
      "/api/streamer/list_ext_by_mid",
      null,
      true
    );
    if (streamer.ret === -1) {
      Toast.show({
        icon: "fail",
        content: streamer.msg,
        position: "top",
      });
      return;
    }
    const account = await requireAPI(
      "POST",
      "/api/account/list_by_mid",
      null,
      true
    );
    if (account.ret === -1) {
      Toast.show({
        icon: "fail",
        content: account.msg,
        position: "top",
      });
      return;
    }
    save("account", account.data.account);
    const statuses = await requireAPI(
      "POST",
      "/api/streamer_auth_approval/get_statuses",
      null
    );
    if (statuses.ret === -1) {
      Toast.show({
        icon: "fail",
        content: statuses.msg,
        position: "top",
      });
      return;
    }
    const vipPrice = await getVipPrice();
    const isInJoinProgress =
      (statuses.data.basic_status === 0 ||
        statuses.data.basic_status === 1 ||
        statuses.data.basic_status === 3) &&
      statuses.data.details_status !== 1;
    setStreamerNavigates((old) => {
      if (account.data.account.role == 3 || isInJoinProgress) {
        const zoneLength = streamer.data?.streamer_ext?.zones?.length;
        let currentOld = [
          {
            url: !zoneLength
              ? `my/createProfile`
              : `space/${account.data.account.mid}`,
            iconUrl: `/icons/32DP/space.png`,
            title: !zoneLength ? "开通空间" : "我的空间",
            subTitle:
              account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
          },
          {
            url: `streamerPosts/${account.data.account.mid}`,
            iconUrl: "/icons/32DP/myposts.png",
            title: "广场动态",
            subTitle:
              account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
          },
          {
            url: `my/wechatWaitingToAdd`,
            iconUrl: "/icons/32DP/wechat.png",
            title: "待添加微信",
            subTitle:
              account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
          },
          {
            url: `my/editprofile`,
            iconUrl: "/icons/32DP/editprofile.png",
            title: "编辑资料",
            subTitle:
              account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
          },
          {
            url: `my/refund/refundList`,
            iconUrl: "/icons/32DP/refund.png",
            title: "退款审核",
            subTitle:
              account.data.account.role == 3 ? "创作者功能" : "完善资料后解锁",
          },
          // ...currentOld,
        ];
        if (isInJoinProgress) {
          currentOld = [
            {
              url: `my/streamerVerification/completeStreamerInformation`,
              iconUrl: "/icons/32DP/editprofile.png",
              title: "完善资料",
              subTitle: "完善后解锁全部功能",
              status:
                statuses.data.details_status == 0
                  ? "审核中"
                  : statuses.data.details_status == 2
                  ? "未通过"
                  : null,
              // disable: !isInJoinProgress,
            },
            ...currentOld,
          ];
        }
        return currentOld;
      }
      return old;
    });
    setUserNavigates((old) => {
      let currentOld = [
        {
          url: `my/wallet`,
          iconUrl: "/icons/32DP/wallet.png",
          title: "我的钱包",
        },
        {
          url: `my/unlockedWechat`,
          iconUrl: "/icons/32DP/wechat.png",
          title: "已解锁微信",
        },
        {
          url: `my/streamerVerification/joinEntrance`,
          iconUrl: "/icons/32DP/join.png",
          title: "申请入驻",
        },
        {
          url: `/messageDetail`,
          iconUrl: "/icons/32DP/contact.png",
          title: "联系客服",
        },
        {
          url: `/my/addToHome`,
          iconUrl: "/icons/32DP/toScreen.png",
          title: "添加到主屏幕",
        },
      ];
      // if (
      //   (account.data.account.role != 3 && !isInJoinProgress) ||
      //   statuses.data.details_status === 2
      // ) {
      //   currentOld = [
      //     {
      //       url: `my/wallet`,
      //       iconUrl: "icons/32DP/wallet.png",
      //       title: "我的钱包",
      //     },
      //     {
      //       url: `my/unlockedWechat`,
      //       iconUrl: "icons/32DP/wechat.png",
      //       title: "已解锁微信",
      //     },
      //     {
      //       url: `my/streamerVerification/joinEntrance`,
      //       iconUrl: "icons/32DP/join.png",
      //       title: "申请入驻",
      //     },
      //     {
      //       url: `/messageDetail`,
      //       iconUrl: "icons/32DP/contact.png",
      //       title: "联系客服",
      //     },
      //     {
      //       url: `/my/addToHome`,
      //       iconUrl: "icons/32DP/toScreen.png",
      //       title: "添加到主屏幕",
      //     },
      //   ];
      // }
      return currentOld;
    });
    setUserInfo({
      ...data.data,
      ...account.data.account,
      ...streamer.data,
      vipPrice,
    });
  };
  const ItemEle = ({
    url,
    iconUrl,
    title,
    subTitle,
    toWebView,
    status,
    disable,
  }) => {
    return (
      <li
        className="flex justify-between items-center p-3 py-2"
        onClick={() => {
          subTitle != "完善资料后解锁" &&
            !disable &&
            router.push(
              toWebView ? `/webView/${encodeURIComponent(url)}` : url
            );
        }}
      >
        <div className="flex items-center">
          <div className="mr-2">
            <OwnIcon className="w-[32px] h-[32px]" src={iconUrl} />
          </div>
          <span className="text-base">{title}</span>
        </div>
        <div className={`flex items-center text-[#FFFFFF80]`}>
          <div
            className={`rounded-full`}
            style={{
              backgroundColor: status
                ? status == "未通过"
                  ? "#db2020"
                  : "#207edb"
                : "none",
              padding: status ? "2px 10px" : "0",
              marginRight: !disable ? "0.5rem" : "0",
            }}
          >
            {status || subTitle}
          </div>
          {!disable && (
            <FontAwesomeIcon
              icon={faAngleRight}
              style={{ maxWidth: "12px" }}
              size="sm"
              className="h-4"
            />
          )}
        </div>
      </li>
    );
  };
  return (
    <div
      className={`p-4 pb-20 bg-no-repeat bg-contain bg-top`}
      style={{
        backgroundImage: `url(${
          process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
          "/images/profilebackground.png"
        })`,
      }}
    >
      <div className="flex justify-end items-center z-10 w-full mb-4">
        <div
          className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full mr-2"
          onClick={() =>
            router.push("my/editUserProfile/selectUserProfileItem")
          }
        >
          <OwnIcon
            src="/icons/32DP/edit.png"
            width={32}
            className="h-full w-full"
          />
        </div>
        <div
          className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
          onClick={() => router.push("my/setting")}
        >
          <OwnIcon
            src="/icons/32DP/setting.png"
            width={32}
            className="h-full w-full"
          />
        </div>
      </div>
      {userInfo?.role === 3 ? (
        <div
          className="flex items-center justify-between mb-4"
          onClick={() => router.push("profile/" + userInfo.mid)}
        >
          <div className="flex items-center">
            <div className="mr-4">
              <OwnImage
                roundedFull
                src={userInfo.avatar?.images[0].urls[0]}
                className="w-[76px] h-[76px]"
              />
            </div>
            <div>
              <Space align="center">
                <p
                  className={`text-2xl`}
                  style={{
                    color: userInfo?.is_a_member === 1 ? "#FFADBE" : "white",
                  }}
                >
                  {userInfo.name}
                </p>
                {userInfo?.is_a_member === 1 && (
                  <OwnIcon
                    src="/icons/vipbig.png"
                    className="w-[32px] h-[32px]"
                  />
                )}
              </Space>
              <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
                <OwnIcon
                  src="/icons/info/ID.png"
                  className="w-4 h-full "
                  outClassName="mr-1"
                />
                <span>{userInfo.user_id}</span>
              </div>
            </div>
          </div>
          <FontAwesomeIcon
            icon={faAngleRight}
            style={{ maxWidth: "12px" }}
            size="xl"
            className="h-6 mr-2"
          />
        </div>
      ) : (
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center">
            <div className="mr-4">
              <OwnImage
                roundedFull
                src={userInfo.avatar?.images[0].urls[0]}
                className="w-[76px] h-[76px]"
              />
            </div>
            <div>
              <Space align="center">
                <p
                  className={`text-2xl`}
                  style={{
                    color: userInfo?.is_a_member === 1 ? "#FFADBE" : "white",
                  }}
                >
                  {userInfo.name}
                </p>
                {userInfo?.is_a_member === 1 && (
                  <OwnIcon
                    src="/icons/vipbig.png"
                    className="w-[32px] h-[32px]"
                  />
                )}
              </Space>
              <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
                <OwnIcon
                  src="/icons/info/ID.png"
                  className="w-[14px] h-full mr-1"
                />
                <span>{userInfo.user_id}</span>
              </div>
            </div>
          </div>
        </div>
      )}
      <ul className="grid grid-cols-4 mb-4">
        <li
          className="text-center"
          onClick={() => router.push("my/relationship?key=follow")}
        >
          <p className="text-2xl">{userInfo?.follow_count || 0}</p>
          <p className="text-[#ffffff88]">关注</p>
        </li>
        <li
          className="text-center"
          onClick={() => router.push("my/relationship?key=fans")}
        >
          <p className="text-2xl">{userInfo?.is_followed_count || 0}</p>
          <p className="text-[#ffffff88]">粉丝</p>
        </li>
        <li className="text-center" onClick={() => router.push("my/wallet")}>
          <p className="text-2xl">{userInfo.gold_num || 0}</p>
          <p className="text-[#ffffff88]">金币</p>
        </li>
        <li className="text-center" onClick={() => router.push("my/wallet")}>
          <p className="text-2xl">{userInfo.diamond_num || 0}</p>
          <p className="text-[#ffffff88]">钻石</p>
        </li>
      </ul>
      {/*会员功能*/}
      <div
        // activeOpacity={1}
        onClick={() => {
          const base = baseRequest();
          router.push(
            `/webView/${encodeURIComponent(
              `/vip?base=${encodeURIComponent(JSON.stringify(base))}`
            )}`
          );
        }}
        className="flex flex-col p-2.5 rounded-2xl mt-3.5 bg-[#301024] mb-4"
      >
        <div className="flex flex-row justify-between items-center">
          <div className="flex flex-col">
            <div className="flex gap-1 items-center mb-1">
              <OwnIcon src="/icons/vipbig.png" className="w-[32px] h-[32px]" />
              <span className="text-base text-[#FF669E] font-medium">
                {userInfo?.is_a_member !== 1
                  ? "开通会员保存图片"
                  : "尊贵的永久会员"}
              </span>
            </div>
            <span className="text-sm text-[#FFFFFF40] font-medium">
              {userInfo?.is_a_member !== 1
                ? "限时优惠活动"
                : "已解锁全部会员权益"}
            </span>
          </div>
          {userInfo?.is_a_member !== 1 && (
            <div className="flex justify-center items-center h-9 bg-[#FF669E] rounded-full px-4">
              <span className="text-white text-sm font-medium">
                ¥{userInfo.vipPrice}/永久
              </span>
            </div>
          )}
        </div>
      </div>
      {/* 主播用户 */}
      {!!streamerNavigates.length && (
        <div className="rounded-xl p-2 border-2 border-[#2c2b2f] mb-4">
          <ul>
            {streamerNavigates.map((item, index) => (
              <ItemEle key={index} {...item} />
            ))}
          </ul>
        </div>
      )}
      {/* 普通用户 */}
      {!!userNavigates.length && (
        <div className="rounded-xl p-2 border-2 border-[#2c2b2f]">
          <ul>
            {userNavigates.map((item, index) => (
              <ItemEle key={index} {...item} />
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default My;