<script setup>
import { computed, ref } from 'vue';
import { getPrizeByTgApi } from '@/api/promo';
import Congratulation from '@/components/popup/Congratulation.vue';
import toast from '@/module/toast/toast';
import { openWeb } from '@/module/utils/openUrl';
import { useThemeStore } from '@/store/useThemeStore';
import { useUserStore } from '@/store/useUserStore';
import BindPhonePop from '@/components/popup/BindPhonePop.vue';

const themeStore = useThemeStore()
const userStore = useUserStore()
const tgCode = computed(() => themeStore.theme.promo.tgCode)
const screenInfo = uni.getWindowInfo()
const { statusBarHeight, screenHeight } = screenInfo

const inputCode = ref('')
const congratulationRef = ref(null)
const tgAmount = ref(0)
const bindPhone = ref(null)
const appName = import.meta.env.VITE_APP_NAME

const handleJoinNowClick = () => {
    openWeb(userStore.tgLink)
}
const confirmExchange = async () => {
    if (inputCode.value === '') {
        uni.showToast({
            title: 'Please enter the code',
            icon: 'none'
        })
        return
    }
    if (!userStore.userInfo?.mobile) {
        bindPhone.value.open()
        return
    }
    const { data, msg } = await getPrizeByTgApi({ code: inputCode.value })
    console.log('getPrizeByTgApi', data, msg);
    if (data) {
        tgAmount.value = data
        congratulationRef.value.open()
    } else {
        toast.show(msg)
    }
}
</script>
<template>
    <mobile-sub-layout :title="$t('promo.tgReward.title')" :lineHeight="4">
        <view class="tg-content"
            :style="{ background: tgCode.bgColor, height: (screenHeight - statusBarHeight - 50) + 'px' }">
            <view class="box">
                <view class="input-title" :style="{ color: tgCode.light }">{{ $t("promo.tgReward.inputTitle") }}</view>
                <view class="input-box flex-center"
                    :style="{ background: tgCode.inputBg, borderColor: tgCode.borderColor }">
                    <input v-model="inputCode" type="text" class="input-txt flex-1" :style="{ color: tgCode.light }"
                        :placeholder="$t('promo.tgReward.placeholder')">
                </view>
                <view class="award-row" :style="{color: tgCode.light}">
                    <text>{{ $t('promo.tgReward.amountLabel') }}</text>
                    <text :style="{ color: tgCode.amount, marginLeft: '10rpx' }">₹ 7 - ₹ 7777</text>
                </view>
                <view class="confirm-btn flex-center" @click="confirmExchange"
                    :style="{ background: `top / cover no-repeat ${tgCode.btnBg}`, color: tgCode.btnText }">
                    {{ $t('promo.tgReward.btnConfirm') }}
                </view>
            </view>
            <view class="sub-title" :style="{ color: tgCode.light }">{{ $t('promo.tgReward.descTitle') }}</view>
            <view class="confirm-btn cm2 flex-center" @click="handleJoinNowClick"
                :style="{ background: `top / cover no-repeat ${tgCode.btnBg}`, color: tgCode.btnText }">
                <theme-image src="@/static/promo/icon_tele.png" class="icon-tg" mode="aspectFit" />
                <text>{{ $t("promo.tgReward.btnTg") }}</text>
            </view>
            <view class="text-content" :style="{ color: tgCode.light }">
                <view class="desc1">{{ $t("promo.tgReward.joinDesc1") }}</view>
                <view class="desc2" :style="{ color: tgCode.textTg }">{{ userStore.tgLink }}</view>
                <view class="desc3">{{ $t("promo.tgReward.joinDesc2") }}</view>
                <view class="desc4">
                    <text>Please follow the steps below:</text>
                    <text>1. Subscribe official Telegram channel to get your bonus codes.</text>
                    <text>2. Enter the bonus code on this page, Once redeemed, the
                        bonus will be credited directly to your account for immediate
                        use.</text>
                    <text>3. Redeem your code within its valid period</text>

                    <text>4. Wager 3x the bonus amount to make your earnings
                        withdrawable.</text>
                    <text>5. Ensure your phone number and bank account are linked to
                        your account to participate.</text>
                    <text>6. Redemption might fail due to unmet conditions,the system's
                        verification is final.</text>
                    <text>7.Only the account owner can redeem codes,Use of bots,
                        cheats, or any unauthorized methods will result in a ban and
                        forfeiture of winnings.</text>

                    <text>8. {{ appName }} reserves the right to modify, suspend, or cancel
                        the promotion at any time without notice.</text>
                </view>
            </view>
            <empty-hold height="1" />
        </view>
        <Congratulation ref="congratulationRef" :prizeAmount="tgAmount" />
        <BindPhonePop ref="bindPhone" />
    </mobile-sub-layout>
</template>
<style lang="scss" scoped>
.tg-content {
    width: 100%;
    padding: 23rpx 29rpx;
    overflow: auto;

    .box {
        width: 692rpx;
        height: 465rpx;
        background: #4E1015;
        border-radius: 10rpx;
        padding: 24rpx 34rpx;

        .input-title {
            font-family: Roboto;
            font-weight: 400;
            font-size: 34rpx;
        }

        .input-box {
            width: 625rpx;
            height: 85rpx;
            border-radius: 15rpx;
            border: 1px solid;
            margin-top: 50rpx;
            padding: 0 34rpx;

            .input-txt {
                font-family: Roboto;
                font-weight: 400;
                font-size: 30rpx;
            }
        }

        .award-row {
            font-family: Roboto;
            font-weight: 400;
            font-size: 34rpx;
            margin-top: 30rpx;
        }

        .confirm-btn {
            width: 625rpx;
            height: 83rpx;
            border-radius: 10rpx;
            margin-top: 50rpx;
        }
    }

    .sub-title {
        font-family: Roboto;
        font-weight: 400;
        font-size: 34rpx;
        margin-top: 40rpx;
    }

    .confirm-btn {
        width: 625rpx;
        height: 83rpx;
        border-radius: 10rpx;
        font-size: 34rpx;
        font-weight: 600;
        margin: 0 auto;
        margin-top: 50rpx;

        .icon-tg {
            width: 48rpx;
            height: 39rpx;
            margin-right: 26rpx;
        }
    }

    .cm2 {
        margin-top: 22rpx;
    }

    .text-content {
        width: 100%;
        margin-top: 26rpx;
        font-size: 25rpx;

        .desc1 {
            font-size: 26rpx;
        }

        .desc4 {
            margin-top: 32rpx;
            display: flex;
            flex-direction: column;
        }
    }

}
</style>