"use client";

import React, { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { Avatar, Image, Toast } from "antd-mobile";
import { useRouter, useSearchParams } from "next/navigation";
import { get } from "@/utils/storeInfo";
import requireAPI from "@/utils/requireAPI";
const My = () => {
  const [userInfo, setUserInfo] = useState({});
  const router = useRouter();
  useEffect(() => {
    const userInfo = get("account");
    if (userInfo) {
      // setUserInfo(userInfo);
      getData(userInfo);
    }
    // getData(userInfo);
  }, []);
  const getData = async (oldUserInfo) => {
    const data = await requireAPI(
      "POST",
      "/api/account_relation/count",
      null,
      true
    );
    const account = await requireAPI(
      "POST",
      "/api/account/list_by_mid",
      null,
      true
    );
    if (data.ret === -1) {
      Toast.show({
        icon: "fail",
        content: data.msg,
        position: "top",
      });
      return;
    }
    setUserInfo({ ...oldUserInfo, ...data.data, ...account.data.account });
  };
  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")
          }
        >
          <Image
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/32DP/edit.png"
            }
            width={32}
            className="w-4 h-full"
            placeholder=""
          />
        </div>
        <div
          className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
          onClick={() => router.push("my/setting")}
        >
          <Image
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/32DP/setting.png"
            }
            width={32}
            className="w-4 h-full"
            placeholder=""
          />
        </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">
            <Avatar
              rounded-full
              src={userInfo.avatar?.images[0].urls[0]}
              className="mr-4"
              style={{ "--size": "76px", "--border-radius": "50%" }}
            />
            <div>
              <p className="text-2xl">{userInfo.name}</p>
              <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
                <Image
                  src={
                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                    "/icons/info/ID.png"
                  }
                  width={14}
                  height={14}
                  className="w-4 h-full mr-1"
                  placeholder=""
                />
                <span>{userInfo.user_id}</span>
              </div>
            </div>
          </div>
          <FontAwesomeIcon
            icon={faAngleRight}
            style={{ maxWidth: "12px" }}
            size="xl"
            className="h-6 mr-2"
            onClick={() => {
              // searchParams.append();
              // router.back();
            }}
          />
        </div>
      ) : (
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center">
            <Avatar
              rounded-full
              src={userInfo.avatar?.images[0].urls[0]}
              className="mr-4"
              style={{ "--size": "76px", "--border-radius": "50%" }}
            />
            <div>
              <p className="text-2xl">{userInfo.name}</p>
              <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
                <Image
                  src={
                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                    "/icons/info/ID.png"
                  }
                  width={14}
                  height={14}
                  className="w-4 h-full mr-1"
                  placeholder=""
                />
                <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 className="rounded-xl p-2 border-2 border-[#2c2b2f] mb-4">
        <ul>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/space.png"
                placeholder=""
              />
              <span className="text-base">我的空间</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/myposts.png"
                placeholder=""
              />
              <span className="text-base">广场动态</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/wechat.png"
                placeholder=""
              />
              <span className="text-base">待添加微信</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/editprofile.png"
                placeholder=""
              />
              <span className="text-base">编辑资料</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
          <li className="flex justify-between items-center p-3 py-2">
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/share.png"
                placeholder=""
              />
              <span className="text-base">生成分享页</span>
            </div>
            <div className="opacity-30 flex items-center">
              <span className="mr-1">创作者功能</span>
              <FontAwesomeIcon
                icon={faAngleRight}
                size="sm"
                className="h-4 "
                onClick={() => {
                  router.back();
                }}
              />
            </div>
          </li>
        </ul>
      </div> */}
      {/* 普通用户 */}
      <div className="rounded-xl p-2 border-2 border-[#2c2b2f]">
        <ul>
          <li
            className="flex justify-between items-center p-3 py-2"
            onClick={() => router.push("my/wallet")}
          >
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src={
                  process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                  "/icons/32DP/wallet.png"
                }
                placeholder=""
              />
              <span className="text-base">我的钱包</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              style={{ maxWidth: "12px" }}
              size="sm"
              className="h-4 text-gray-300"
            />
          </li>
          <li
            className="flex justify-between items-center p-3 py-2"
            onClick={() => router.push("my/unlockedWechat")}
          >
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src={
                  process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                  "/icons/32DP/wechat.png"
                }
                placeholder=""
              />
              <span className="text-base">已解锁微信</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              style={{ maxWidth: "12px" }}
              size="sm"
              className="h-4 text-gray-300"
            />
          </li>
          {/* <li className="flex justify-between items-center p-3 py-2" onClick={()=>router.push("my/settleIn")}>
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src="/icons/32DP/join.png"
                placeholder=""
              />
              <span className="text-base">申请入驻</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              size="sm"
              className="h-4 text-gray-300"
            />
          </li> */}
          <li
            className="flex justify-between items-center p-3 py-2"
            onClick={() => {
              Toast.show({
                icon: "success",
                content: "请下载安装app后进行申请入驻",
                position: "top",
              });
            }}
          >
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src={
                  process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                  "/icons/32DP/join.png"
                }
                placeholder=""
              />
              <span className="text-base">申请入驻</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              style={{ maxWidth: "12px" }}
              size="sm"
              className="h-4 text-gray-300"
            />
          </li>
          <li
            className="flex justify-between items-center p-3 py-2"
            onClick={() => {
              router.push("/messageDetail");
            }}
          >
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src={
                  process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                  "/icons/32DP/contact.png"
                }
                placeholder=""
              />
              <span className="text-base">联系客服</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              style={{ maxWidth: "12px" }}
              size="sm"
              className="h-4 text-gray-300"
            />
          </li>
          <li
            className="flex justify-between items-center p-3 py-2"
            onClick={() => {
              router.push("/my/addToHome");
            }}
          >
            <div className="flex items-center">
              <Image
                className="mr-2"
                width={32}
                src={
                  process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                  "/icons/32DP/toScreen.png"
                }
                placeholder=""
              />
              <span className="text-base">添加到主屏幕</span>
            </div>
            <FontAwesomeIcon
              icon={faAngleRight}
              style={{ maxWidth: "12px" }}
              size="sm"
              className="h-4 text-gray-300"
            />
          </li>
        </ul>
      </div>
    </div>
  );
};

export default My;