<template>
    <el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :model-value="props.modelValue" @close="closeForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('Members Promotion') }}
            </div>
        </template>

        <el-scrollbar class="ba-table-form-scrollbar">
            <div class="ba-operate-form ba-edit-form" :style="config.layout.shrink ? '' : 'width: calc(100% - ' + state.labelWidth / 2 + 'px)'">
                <el-form
                    ref="formRef"
                    :model="state.form"
                    :rules="rules"
                    :label-position="config.layout.shrink ? 'top' : 'right'"
                    :label-width="state.labelWidth"
                    @keyup.enter="onSubmit"
                >
                    <el-form-item prop="gameType" label="">
                        <el-radio-group v-model="state.form.gameType">
                            <el-radio-button v-for="item in miniGameOptions" :key="item.value" :value="item.value">
                                {{ item.label }}
                            </el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <div class="yellow-bg">Click Here Go To Member Program Page</div>
                    <template v-if="hasCurrentScore">
                        <el-form-item label="Approved Bonus:">
                            <div class="readonly-value">{{ approvedBonusText }}</div>
                        </el-form-item>
                        <el-form-item label="Rejected Bonus:">
                            <div class="readonly-value">{{ rejectedBonusText }}</div>
                        </el-form-item>
                        <el-form-item label="Unsubmitted Reward:">
                            <div class="readonly-value">{{ unsubmittedRewardText }}</div>
                        </el-form-item>
                        <el-form-item prop="currentSpins" label="Current Spins:">
                            <el-input-number v-model="state.form.currentSpins" :min="0" class="spins-input" />
                        </el-form-item>
                    </template>
                    <el-empty v-else description="No score data for this game" :image-size="90" />
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
                <el-button @click="closeForm">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="state.submitLoading" :disabled="!hasCurrentScore" type="primary" @click="onSubmit">
                    {{ t('Save') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, useTemplateRef, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { postWallet } from '/@/api/backend/user/wallet'
import { useConfig } from '/@/stores/config'
import { useI18n } from 'vue-i18n'

interface Props {
    modelValue: boolean
    row?: TableRow | null
    walletData?: anyObj | null
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    row: null,
    walletData: null,
})

const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
}>()

const config = useConfig()
const { t } = useI18n()
const formRef = useTemplateRef<FormInstance>('formRef')

const state = reactive({
    labelWidth: 120,
    submitLoading: false,
    form: {
        gameType: '',
        scoreId: 0,
        approvedBonus: 0,
        rejectedBonus: 0,
        unsubmittedReward: 0,
        currentSpins: 0,
    },
})

const miniGameOptions = computed(() => {
    const miniGame = props.walletData?.mini_game ?? {}
    return Object.entries(miniGame).map(([value, label]) => ({
        value,
        label: String(label),
    }))
})

const currentScore = computed(() => {
    const scoreList = Array.isArray(props.walletData?.score) ? props.walletData.score : []
    return scoreList.find((item: anyObj) => String(item.game_type) === String(state.form.gameType))
})

const hasCurrentScore = computed(() => Boolean(currentScore.value))
const approvedBonusText = computed(() => Number(state.form.approvedBonus || 0).toFixed(2))
const rejectedBonusText = computed(() => Number(state.form.rejectedBonus || 0).toFixed(2))
const unsubmittedRewardText = computed(() => `$${formatCurrencyValue(state.form.unsubmittedReward)}`)

const rules = reactive<FormRules>({
    currentSpins: [
        {
            validator: (_rule, value, callback) => {
                if (value === null || value === undefined || value === '') {
                    return callback(new Error('请输入 Current Spins'))
                }
                const numericValue = Number(value)
                if (Number.isNaN(numericValue)) {
                    return callback(new Error('Current Spins 必须是数字'))
                }
                if (numericValue < 0) {
                    return callback(new Error('Current Spins 不能小于 0'))
                }
                return callback()
            },
            trigger: ['blur', 'change'],
        },
    ],
})

const closeForm = () => {
    emits('update:modelValue', false)
}

const onSubmit = () => {
    if (!hasCurrentScore.value) return
    formRef.value?.validate((valid) => {
        if (!valid) return
        state.submitLoading = true
        postWallet(state.form.scoreId, state.form.currentSpins)
            .then(() => {
                closeForm()
            })
            .finally(() => {
                state.submitLoading = false
            })
    })
}

const formatCurrencyValue = (value: number | string) => {
    const amount = Number(value || 0)
    return Number.isInteger(amount) ? String(amount) : amount.toFixed(2)
}

const syncScoreForm = (gameType: string) => {
    const scoreList = Array.isArray(props.walletData?.score) ? props.walletData.score : []
    const scoreItem = scoreList.find((item: anyObj) => String(item.game_type) === String(gameType))

    state.form.scoreId = Number(scoreItem?.id ?? 0)
    state.form.approvedBonus = Number(scoreItem?.approved_score ?? 0)
    state.form.rejectedBonus = Number(scoreItem?.rejected_score ?? 0)
    state.form.unsubmittedReward = Number(scoreItem?.unsubmitted_score ?? 0)
    state.form.currentSpins = Number(scoreItem?.score ?? 0)
}

watch(
    () => props.modelValue,
    (visible) => {
        if (!visible) return
        state.form.gameType = miniGameOptions.value[0]?.value ?? ''
        syncScoreForm(state.form.gameType)
    },
    { immediate: true }
)

watch(
    () => state.form.gameType,
    (gameType) => {
        syncScoreForm(gameType)
    }
)
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
    white-space: nowrap;
    margin-left: 30px;
}

.yellow-bg {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #feb902;
    margin: 10px 0 20px 0;
    border-radius: 5px;
}

.readonly-value {
    width: 100%;
    color: var(--el-text-color-primary);
    font-weight: 600;
    line-height: 32px;
}

.spins-input {
    width: 220px;
}
</style>
