"use client";

import React, { useEffect, useState, useRef, useMemo } from "react";
import {
  Image,
  Mask,
  FloatingPanel,
  JumboTabs,
  List,
  InfiniteScroll,
  ProgressBar,
  Toast,
} from "antd-mobile";
import { useRouter, useParams } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faRefresh } from "@fortawesome/free-solid-svg-icons";
import PostItem from "@/components/PostItem";
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
import requireAPI from "@/utils/requireAPI";
import AddWeChat from "@/components/AddWeChat";
import SeeTiefen from "@/components/SeeTiefen";
import DefaultMask from "@/components/DefaultMask";
import { getSpaceData, getStreamerInfo } from "@/api/space";
import baseRequest from "@/utils/baseRequest";
const anchors = [
  window.innerHeight - 280,
  window.innerHeight - 280,
  window.innerHeight - 60,
];

export default function PersonSpace() {
  const base = baseRequest();
  const router = useRouter();
  const { id } = useParams();
  const contentBox = useRef();
  const [hasMore, setHasMore] = useState(true);
  const [scrollHeight, setScrollHeight] = useState(0);
  const [postList, setPostList] = useState([]);
  const [tabItems, setTabItems] = useState([]);
  const [offset, setOffset] = useState(0);
  const [maskVisible, setMaskVisible] = useState({ visible: false, type: "" });
  const [currentKey, setCurrentKey] = useState("all");
  const [loading, setLoading] = useState(false);
  const [streamerInfo, setStreamerInfo] = useState(null);
  const [currentTime, setCurrentTime] = useState();
  const scrollRef = useRef(null);
  //退款中Modal是否展示
  const [isRefundingModalVisible, setIsRefundingModalVisible] = useState(false);
  const ironFanProgress = useMemo(
    () =>
      Math.floor(
        (streamerInfo?.expenditure / streamerInfo?.ironfanship_price) * 100
      ),
    [streamerInfo]
  );
  useEffect(() => {
    setScrollHeight(window.innerHeight - 126);
    if (contentBox.current) {
      contentBox.current.style.transform = "translateY(-12px)";
      // debugger
    }
    getStreamerInfo(Number(id)).then((res) => {
      let tabitems = res.is_superfanship_enabled
        ? [
            { label: "全部", key: "all" },
            { label: "铁粉专享", key: "ironFan" },
            { label: "超粉专享", key: "chaofen" },
          ]
        : [
            { label: "全部", key: "all" },
            { label: "铁粉专享", key: "ironFan" },
          ];
      setTabItems(tabitems);
      setStreamerInfo(res);
    });
    getCurrentTime();
    getSpaceData(Number(id)).then((res) => {
      if (res) {
        const { isRefunding, noRole } = res;
        isRefunding && router.push("/");
        noRole && router.replace("person_space_introduce/" + id);
      }
    });
  }, []);
  useEffect(() => {
    if (currentKey) {
      firstRequest(currentKey);
    }
  }, [currentKey, streamerInfo]);
  const getCurrentTime = async () => {
    setCurrentTime(Math.floor(new Date().getTime() / 1000));
  };
  async function loadMore() {
    // if (!offset) return;
    const append = await getPostList(streamerInfo.id, currentKey, offset);
    if (append) {
      setPostList((val) => [...val, ...append]);
      // setHasMore(append.length > 0);
    }
  }
  const getPostList = async (zid, activeKey, offset) => {
    try {
      setLoading(true);
      let body = {
        zid: zid,
        ct_upper_bound: Math.floor(new Date().getTime() / 1000),
        offset,
        limit: 4,
      };

      switch (activeKey) {
        case "all":
          body = body;
          break;
        case "ironFan":
          body = {
            ...body,
            c_type: 1,
            is_ironfan_visible: 1,
          };
          break;
        case "chaofen":
          body = {
            ...body,
            c_type: 1,
          };
          break;

        default:
          break;
      }
      // console.log("body",body)
      const data = await requireAPI("POST", "/api/zone_moment/list_by_zid", {
        body,
      });
      if (data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        return;
      }

      setLoading(false);
      setOffset(data.data.offset);
      setHasMore(data.data.more);
      return data.data.list;
    } catch (error) {
      setLoading(false);
    }
  };
  const firstRequest = (currentKey) => {
    if (typeof window == "undefined") return;
    let floatingPanel = document.getElementsByClassName(
      "adm-floating-panel-content"
    )[0];
    floatingPanel?.scrollTo(0, 0);
    setOffset(0);
    setHasMore(true);
    if (!postList.length) return;
    if (streamerInfo) {
      getPostList(streamerInfo.id, currentKey, 0).then((res) => {
        setPostList(res || []);
      });
    }
  };
  return (
    <div
      className={`${
        !!streamerInfo?.is_superfanship_enabled
          ? "spaceBoxThree"
          : "spaceBoxTwo"
      }`}
    >
      <div className="flex justify-between items-center p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            style={{ maxWidth: "12px" }}
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <Image
          width={42}
          height={42}
          src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/setting.png"}
          placeholder=""
          onClick={() =>
            router.push(
              "setting?data=" +
                encodeURIComponent(
                  JSON.stringify({
                    mid: streamerInfo?.mid,
                    id: streamerInfo?.id,
                    ct: streamerInfo?.streamer_ext?.ct,
                    user_id: streamerInfo?.streamer_ext?.user_id,
                    name: streamerInfo?.streamer_ext?.name,
                    visitor_role: streamerInfo?.visitor_role,
                    avatar:
                      streamerInfo?.streamer_ext?.avatar?.images[0]?.urls[0],
                    admission_price: streamerInfo?.admission_price,
                  })
                )
            )
          }
        />
      </div>
      {/* 内容 */}
      <div>
        <div
          className="bg-no-repeat bg-cover bg-center"
          style={{
            backgroundImage: `url(${
              streamerInfo?.streamer_ext?.cover?.images[0]?.urls[0] || ""
            })`,
          }}
        >
          <div className="px-4 pt-24 pb-8 bg-[#181818a9]">
            <div className="flex justify-between items-center">
              <div className="flex items-center">
                <Image
                  width="64px"
                  height="64px"
                  className="rounded-full mr-2 border-2 border-white"
                  fit="cover"
                  src={streamerInfo?.streamer_ext?.avatar?.images[0]?.urls[0]}
                />
                <div>
                  <p className="text-2xl mb-1">
                    {streamerInfo?.streamer_ext?.name}
                  </p>
                  <div className="flex">
                    <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mb-1 w-max mr-1">
                      <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>{streamerInfo?.streamer_ext?.user_id}</span>
                    </div>
                    <div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mb-1 w-max">
                      <Image
                        src={
                          process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                          "/icons/edit.png"
                        }
                        width={14}
                        height={14}
                        className="w-4 h-full mr-1"
                        placeholder=""
                      />
                      <span>{streamerInfo?.zone_moment_count}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="flex flex-col items-center"
                onClick={() =>
                  router.push("/share/" + streamerInfo?.streamer_ext?.mid)
                }
              >
                <p className="text-base px-3 py-1 rounded-full bg-primary">
                  分享
                </p>
              </div>
            </div>
            <ul className="flex mt-8">
              <li
                className="flex flex-col items-center mr-6"
                onClick={() =>
                  setMaskVisible({ visible: true, type: "weChat" })
                }
              >
                <div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
                  <Image
                    src={
                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                      "/images/wechat.png"
                    }
                    width={22}
                    height={22}
                    className="w-4 h-full"
                    placeholder=""
                  />
                </div>
                <p className="text-xs">查看微信</p>
              </li>
              <li
                className="flex flex-col items-center mr-6"
                onClick={() =>
                  setMaskVisible({ visible: true, type: "ironFan" })
                }
              >
                <div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
                  <Image
                    src={
                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                      "/icons/tiefen.png"
                    }
                    width={22}
                    height={22}
                    className="w-4 h-full"
                    placeholder=""
                  />
                </div>
                <p className="text-xs">
                  {streamerInfo?.is_ironfanship_unlocked === 1
                    ? "已是铁粉"
                    : "成为铁粉"}
                </p>
                <p className="text-[#ffffff54] text-[10px]">{`${parseInt(
                  streamerInfo?.expenditure / 100,
                  10
                )}/${parseInt(streamerInfo?.ironfanship_price / 100, 10)}`}</p>
              </li>
              {!!streamerInfo?.is_superfanship_enabled && (
                <li
                  className="flex flex-col items-center mr-6"
                  onClick={() => {
                    // console.log(
                    //   "streamerInfo?.is_superfanship_unlocked === 1",
                    //   streamerInfo?.is_superfanship_unlocked === 1
                    // );
                    streamerInfo?.is_superfanship_unlocked === 1
                      ? setCurrentKey("chaofen")
                      : router.push(
                          "/webView/" +
                            encodeURIComponent(
                              "/zone/pay/" +
                                streamerInfo?.id +
                                "/h5_zone_superfanship/0" +
                                "?base=" +
                                encodeURIComponent(JSON.stringify(base))
                            )
                        );
                  }}
                >
                  <div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
                    <Image
                      src={
                        process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                        "/icons/chaofen.png"
                      }
                      width={22}
                      height={22}
                      className="w-4 h-full"
                      placeholder=""
                    />
                  </div>
                  <p className="text-xs">
                    {streamerInfo?.is_superfanship_unlocked === 1
                      ? "尊贵超粉"
                      : "成为超粉"}
                  </p>
                </li>
              )}
              <li
                className="flex flex-col items-center"
                onClick={() => {
                  router.push("/messageDetail");
                }}
              >
                <div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
                  <Image
                    src={
                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                      "/icons/report.png"
                    }
                    width={22}
                    height={22}
                    className="w-4 h-full"
                    placeholder=""
                  />
                </div>
                <p className="text-xs">举报</p>
              </li>
            </ul>
          </div>
        </div>
        <FloatingPanel anchors={anchors} ref={scrollRef} className="bg-deepBg">
          <JumboTabs
            onChange={(key) => setCurrentKey(key)}
            activeKey={currentKey}
            className="bg-deepBg pb-12"
          >
            {tabItems.map((it) => (
              <JumboTabs.Tab
                title={it.label}
                key={it.key}
                description={
                  currentKey == it.key && (
                    <div className="titlePinkLine relative w-full"></div>
                  )
                }
                destroyOnClose={true}
              >
                <div className="overflow-y-auto scrollbarBox_hidden px-1">
                  <List>
                    {loading && !postList.length && (
                      <>
                        <PostItemSkeleton />
                        <PostItemSkeleton />
                        <PostItemSkeleton />
                        <PostItemSkeleton />
                      </>
                    )}
                    {/* {!postList.length && !loading && (
                      <div
                        className={`flex flex-col items-center mt-20`}
                        style={{ height: `${scrollHeight}px` }}
                      >
                        <Empty type="nodata" />
                      </div>
                    )} */}
                    {postList.map((item, index) => (
                      <List.Item key={item.id + "_" + index} className="!p-0">
                        <PostItem
                          type="space"
                          data={item}
                          date={new Date(item.ct * 1000)}
                        />
                      </List.Item>
                    ))}
                    <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                  </List>
                </div>
              </JumboTabs.Tab>
            ))}
          </JumboTabs>
        </FloatingPanel>
        <div
          className={`fixed bottom-[96px] right-4 z-[50] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white ${
            loading && !offset ? "animate-spin" : ""
          }`}
        >
          <FontAwesomeIcon
            icon={faRefresh}
            style={{ maxWidth: "20px" }}
            size="xl"
            // onClick={() => {
            //   router.refresh();
            // }}
            onClick={() => {
              firstRequest();
            }}
          />
        </div>
        {streamerInfo?.visitor_role != 3 && (
          <ul className="flex justify-around mt-8 px-4 py-2 fixed bottom-0  z-[999] bg-deepBg w-full border-t-2 border-[#FFFFFF1A]">
            <li
              className="flex flex-col items-center"
              onClick={() => setMaskVisible({ visible: true, type: "weChat" })}
            >
              <div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
                <Image
                  src={
                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                    "/images/wechat.png"
                  }
                  width={22}
                  height={22}
                  className="w-4 h-full"
                  placeholder=""
                />
              </div>
              <p className="text-xs">查看微信</p>
            </li>
            <li
              className="flex flex-col items-center"
              onClick={() => setMaskVisible({ visible: true, type: "ironFan" })}
            >
              <div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
                <Image
                  src={
                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/tiefen.png"
                  }
                  width={22}
                  height={22}
                  className="w-4 h-full"
                  placeholder=""
                />
              </div>
              <p className="text-xs">
                {streamerInfo?.is_ironfanship_unlocked === 1
                  ? "已是铁粉"
                  : "成为铁粉"}
              </p>
              {/* <p className="text-[#ffffff54] text-[10px]">0/299</p> */}
            </li>
            {!!streamerInfo?.is_superfanship_enabled && (
              <li
                className="flex flex-col items-center"
                onClick={() => {
                  streamerInfo?.is_superfanship_unlocked === 1
                    ? setCurrentKey("chaofen")
                    : router.push(
                        "/webView/" +
                          encodeURIComponent(
                            "/zone/pay/" +
                              streamerInfo?.id +
                              "/h5_zone_superfanship/0" +
                              "?base=" +
                              encodeURIComponent(JSON.stringify(base))
                          )
                      );
                }}
              >
                <div className="w-9 h-9 flex items-center justify-center bg-[#1d1d1d71] rounded-full mb-1">
                  <Image
                    src={
                      process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                      "/icons/chaofen.png"
                    }
                    width={22}
                    height={22}
                    className="w-4 h-full"
                    placeholder=""
                  />
                </div>
                <p className="text-xs">
                  {streamerInfo?.is_superfanship_unlocked === 1
                    ? "尊贵超粉"
                    : "成为超粉"}
                </p>
              </li>
            )}
          </ul>
        )}
        {maskVisible.type == "weChat" && (
          <AddWeChat
            visible={maskVisible.visible}
            closeMask={(close) => setMaskVisible({ visible: false, type: "" })}
            price={streamerInfo?.streamer_ext?.wechat_coin_price}
            name={streamerInfo?.streamer_ext?.name}
            streamerMid={streamerInfo?.streamer_ext?.mid}
            avatar={streamerInfo?.streamer_ext?.avatar?.images[0]?.urls[0]}
            streamerData={streamerInfo}
          />
        )}
        {maskVisible.type == "ironFan" && (
          <SeeTiefen
            visible={maskVisible.visible}
            ironFanProgress={ironFanProgress}
            expenditure={streamerInfo.expenditure}
            ironfanship_price={streamerInfo.ironfanship_price}
            closeMask={() => {
              setMaskVisible({ visible: false, type: "" });
            }}
            handleClick={() => {
              setCurrentKey("ironFan");
              setMaskVisible({ visible: false, type: "" });
            }}
          />
        )}
        <DefaultMask
          title="当前空间正在退款中"
          content="退款中空间不支持查看，请关注原支付渠道退款进度，退款后无法再次进入当前空间。"
          visible={isRefundingModalVisible}
          closeMask={() => {
            setIsRefundingModalVisible(false);
          }}
        />
      </div>
    </div>
  );
}