import { CashbackTypes } from "@/api/cashback";
import { UserVipInfo } from "@/api/user";
import Box from "@/components/Box";
import { percentage } from "@/utils/methods";
import { server } from "@/utils/server";
import { getTranslations } from "next-intl/server";
import CashbackTable from "./CashbackTable";
import Progress from "./components/Progress";
import Week from "./Week";

const getVipInfoApi = async () => {
    return server
        .request<UserVipInfo>({
            url: "/v1/api/user/user_vip_info",
            method: "post",
        })
        .then((res) => {
            if (res.code === 200) return res.data;
            return {
                vip_exp: 0,
                vip_level: 0,
                vip_next_level: 0,
                vip_score_exp: 0,
            };
        });
};

const getCashBackApi = async () => {
    return server
        .request<CashbackTypes>({
            url: "/v1/api/front/activity_cash",
            method: "post",
        })
        .then((res) => {
            return res.data;
        });
};
const CashbackInfo = async () => {
    const vipInfo = await getVipInfoApi();
    const cashbackInfo = await getCashBackApi();

    const currentGrade = cashbackInfo.rules.find((item) => item.level === (vipInfo.vip_level || 1));
    const maxGrade = cashbackInfo.rules.at(-1);

    const t = await getTranslations();

    return (
        <>
            <Box className={"w-full rounded-[10px] bg-gradient-to-b from-[#ffaa30] to-[#ffe6be]"}>
                <div className={"flex items-center"}>
                    <img
                        className={"h-[0.34rem]"}
                        src="data:image/png;base64,[encoded data, 4248 characters]"
                        alt=""
                    />
                    <div className={"flex-1"}>
                        <span className={"mr-[0.06rem] text-[0.25rem] font-bold"}>
                            {currentGrade?.cashback}%
                        </span>
                        <span className={"mr-[0.06rem] text-[0.25rem] font-bold"}>
                            {t("cashback.cashbackTitle")}
                        </span>
                        <span className={"align-text-bottom text-[0.1rem] text-[#383838]"}>
                            Max {maxGrade?.cashback}%
                        </span>
                    </div>
                    <div className={"flex items-center"}>
                        <i className={"iconfont icon-vip text-[0.18rem] text-[#ff9323]"}></i>
                        <div
                            className={
                                "bg-[#ff9323] px-[0.06rem] py-[0.02rem] text-[#fff]" +
                                " ml-[0.06rem] rounded-[0.03rem] text-[0.1rem]"
                            }
                        >
                            v{vipInfo.vip_level}
                        </div>
                    </div>
                </div>
                <div className={"mt-[0.1rem]"}>
                    <Progress num={percentage(vipInfo?.vip_exp, vipInfo.vip_score_exp)} />
                    <div className={"font-lightl mt-[0.04rem] text-right text-[0.1rem]"}>
                        {t("ProfilePage.expTips", { exp: vipInfo.vip_score_exp - vipInfo.vip_exp })}
                        VIP{vipInfo.vip_next_level}
                    </div>
                </div>
            </Box>

            <Week cashbackInfo={cashbackInfo} />

            <CashbackTable cashbackInfo={cashbackInfo} />
        </>
    );
};

export default CashbackInfo;
