"use client";

import React, { useState } from "react";
import { Mask, ProgressBar, Toast } from "antd-mobile";
import requireAPI from "@/utils/requireAPI";
export default function SeeTiefen({
  visible,
  closeMask,
  handleClick,
  ironFanProgress,
  expenditure,
  ironfanship_price,
  id,
}) {
  //刷新铁粉身份（解决主播降价导致的进度满100但未成为铁粉）
  const handleFansIdentityRefresh = async () => {
    try {
      const body = {
        zid: id,
      };
      const _data = await requireAPI(
        "POST",
        "/api/zone_moment/fans_identity_refresh",
        {
          body,
        }
      );
      if (_data.ret == -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: 60,
        });
        return;
      }
      // await getData();
      // setIsIronFanModalVisible(false);
      closeMask(false);
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <Mask visible={visible}>
      <div className="relative w-screen h-screen">
        <div className="w-full h-full" onClick={() => closeMask(false)}></div>
        <div className="absolute top-1/2 left-1/2 -ml-[35vw] -mt-[35vw] w-[70vw] h-max flex flex-col justify-center items-center p-4 bg-[#261e30] rounded-2xl pointer-events-auto">
          <p className="text-base text-left w-full">
            当前铁粉解锁进度：
            <span className="text-2xl font-bold text-primary">
              {ironFanProgress}%
            </span>
          </p>
          <ProgressBar
            percent={ironFanProgress}
            style={{
              "--fill-color": "#FF669E",
              "--track-color": "#FF669E50",
            }}
            className="w-full mt-2 mb-4"
          />
          <p className="text-sm text-[#FF669E] font-medium">{`${
            expenditure / 100
          } / ${ironfanship_price / 100}`}</p>
          <p className="text-left my-2 text-sm text-[#FFFFFF40]">
            空间内累计消费达到￥{ironfanship_price / 100}即可成为
            <span className="text-primary">铁粉</span>
            ，可查看所有铁粉专享内容哟，快来成为我的铁粉吧~
          </p>
          <div
            className="px-8 py-2 rounded-full flex items-center mt-2 bg-gradient-to-r from-[#FF668B] to-[#FF66F0]"
            onClick={handleClick}
          >
            <span className="text-base">查看铁粉专享内容</span>
          </div>
          <p
            onClick={handleFansIdentityRefresh}
            className="text-sm font-medium text-[#FF669E] mt-2 underline"
          >
            进度已满但还未成为铁粉？
          </p>
        </div>
      </div>
    </Mask>
  );
}