import { CashbackTypes } from "@/api/cashback";
import { UserVipInfo } from "@/api/user";
import Box from "@/components/Box";
import { vipImages } from "@/utils/constant";
import { flatPoint, percentage } from "@/utils/methods";
import { server } from "@/utils/server";
import { getTranslations } from "next-intl/server";
import Image from "next/image";
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();
    const vipIconElement = vipImages.map((item, index) => {
        if (item.leve === vipInfo.vip_level) {
            return (
                <div key={index} className={"relative mr-[10px]"}>
                    <Image src={item.src} alt={"vip"} height={100} width={100} />
                    <span
                        className={"absolute bottom-[25%] w-[100%] text-center text-[0.16rem]"}
                        style={{ color: item.color }}
                    >
                        {item.leve}
                    </span>
                </div>
            );
        }
    });
    return (
        <>
            <Box
                className={
                    "w-full rounded-[20px_20px_0_0] bg-gradient-to-b from-[#ffaa30]" +
                    " mx-[0.1rem] to-[#ffe6be]"
                }
            >
                <div className={"flex"}>
                    {vipIconElement}
                    <div className={"flex-1"}>
                        <div className={"flex items-baseline"}>
                            <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={
                                    "w-[100%] text-right align-text-bottom text-[0.1rem] text-[#383838]"
                                }
                            >
                                Max {maxGrade?.cashback}%
                            </span>
                        </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: flatPoint(vipInfo.vip_score_exp - vipInfo.vip_exp),
                                })}
                                VIP{vipInfo.vip_next_level}
                            </div>
                        </div>
                    </div>
                </div>
            </Box>

            <Week cashbackInfo={cashbackInfo} />

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

export default CashbackInfo;
