<template>
    <view class="min-h-screen bg-white pb-24">
        <!-- 分享按钮 -->
        <button id="share" data-name="shareBtn" open-type="share" style="font-size: 0.83rem; line-height: 3; padding: 0; position: absolute; right: 40rpx; top: 40rpx; z-index: 1000;color: white; width: 70rpx; height: 70rpx; border-radius: 50%; background: rgba(0, 0, 0, 0.6);">分享</button>
        <!-- 内容区域 -->
            <!-- Top Image -->
            <view class="w-full h-48">
                <image :src="reward.banner" class="w-full h-full object-cover" />
            </view>

            <!-- Main Content -->
            <view class="p-6">
                <!-- Points and Title -->
                <view class="text-center mb-8">
                    <view class="text-4xl font-bold text-blue-500 mb-2">
                        <text class="text-2xl">{{ reward.points_cost }} 积分</text>
                    </view>
                    <h1 class="text-xl font-bold">{{ reward.title }}</h1>
                </view>

                <!-- Details Sections -->
                <view class="space-y-6">
                    <!-- Applicable Stores -->
                    <view v-if="reward.applicable_stores && reward.applicable_stores.length > 0">
                        <h2 class="text-lg font-medium mb-3">可用门店</h2>
                        <view class="space-y-2 text-gray-600">
                            <view v-for="store in reward.applicable_stores" :key="store" class="flex text-sm">
                                <span class="mr-2">·</span>
                                <p>{{ store }}</p>
                            </view>
                        </view>
                    </view>

                    <!-- Redemption Rules -->
                    <view v-if="reward.redeem_rules && reward.redeem_rules.length > 0">
                        <h2 class="text-lg font-medium mb-3">兑换规则</h2>
                        <view class="space-y-2 text-gray-600">
                            <view v-for="rule in reward.redeem_rules" :key="rule" class="flex text-sm">
                                <span class="mr-2">·</span>
                                <p>{{ rule }}</p>
                            </view>
                        </view>
                    </view>

                    <!-- Usage Rules -->
                    <view v-if="reward.usage_rules && reward.usage_rules.length > 0">
                        <h2 class="text-lg font-medium mb-3">使用规则</h2>
                        <view class="space-y-2 text-gray-600">
                            <view v-for="rule in reward.usage_rules" :key="rule" class="flex text-sm">
                                <span class="mr-2">·</span>
                                <p>{{ rule }}</p>
                            </view>
                        </view>
                    </view>
                </view>
            </view>


        <!-- Bottom Button -->
        <view v-if="isCreator" class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
            <nut-button
                type="primary"
                size="large"
                block
                :color="reward.can_redeem ? THEME_COLORS.PRIMARY : '#D1D5DB'"
                :disabled="!reward.can_redeem"
                @click="handleRedeem"
            >
                {{ reward.can_redeem ? '立即兑换' : '积分不足' }}
            </nut-button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import { getUserProfileAPI } from '@/api/user';
import { handleSharePageAuth, addShareFlag } from '@/utils/authRedirect';
// 导入接口
import { getCouponDetailAPI, redeemCouponAPI } from '@/api/coupon';
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config';

const isCreator = ref(false);
const couponId = ref('');

// 优惠券详情数据
const reward = ref({
    id: '',
    title: '',
    points_cost: 0,
    banner: '',
    applicable_stores: [],
    redeem_rules: [],
    usage_rules: [],
    can_redeem: false
});

/**
 * 获取优惠券详情
 */
const fetchCouponDetail = async () => {
    if (!couponId.value) {
        console.error('缺少优惠券ID');
        return;
    }

    try {
        const response = await getCouponDetailAPI({ id: couponId.value });

        if (response && response.data) {
            reward.value = {
                id: response.data.id || '',
                title: response.data.title || '',
                points_cost: response.data.points_cost || 0,
                banner: response.data.banner || '',
                applicable_stores: response.data.applicable_stores || [],
                redeem_rules: response.data.redeem_rules || [],
                usage_rules: response.data.usage_rules || [],
                can_redeem: response.data.can_redeem || false
            };
        }
    } catch (error) {
        console.error('获取优惠券详情失败:', error);
        Taro.showToast({
            title: '获取详情失败',
            icon: 'error'
        });
    }
};

/**
 * 处理优惠券兑换
 */
const handleRedeem = async () => {
    if (!reward.value.can_redeem) {
        Taro.showToast({
            title: '积分不足，无法兑换',
            icon: 'none'
        });
        return;
    }

    try {
        // 显示确认弹窗
        const result = await Taro.showModal({
            title: '确认兑换',
            content: `确定要用${reward.value.points_cost}积分兑换这张优惠券吗？`,
            confirmText: '确认兑换',
            cancelText: '取消'
        });

        if (result.confirm) {
            // 调用兑换API
            const redeemResponse = await redeemCouponAPI({
                coupon_id: reward.value.id
            });

            if (redeemResponse) {
                // 兑换成功提示
                await Taro.showToast({
                    title: '兑换成功',
                    icon: 'success',
                    duration: 2000
                });

                // 延迟跳转到我的优惠券页面
                setTimeout(() => {
                    Taro.navigateBack({
                        delta: 1
                    });
                }, 2000);
            } else {
                throw new Error(redeemResponse?.message || '兑换失败');
            }
        }
    } catch (error) {
        console.error('兑换失败:', error);
        Taro.showToast({
            title: error.message || '兑换失败，请重试',
            icon: 'error'
        });
    }
};

const initData = async (options = {}) => {
    try {
        // 获取URL参数中的优惠券ID
        if (options.id) {
            couponId.value = options.id;
        }

        // 获取用户信息，判断是否为创建者
        const { code, data } = await getUserProfileAPI();
        if (code) {
            isCreator.value = data?.user?.is_creator || false;
        }

        // 获取优惠券详情
        if (couponId.value) {
            await fetchCouponDetail();
        }
    } catch (error) {
        console.error('初始化数据失败:', error);
        isCreator.value = false;
    }
};

useLoad((options) => {
    // 处理分享页面的授权逻辑
    handleSharePageAuth(options, () => {
        initData(options);
    });
});

useDidShow(() => {
    // 页面显示时只获取用户信息，不重新获取优惠券详情
    getUserProfileAPI().then(({ code, data }) => {
        if (code) {
            isCreator.value = data?.user?.is_creator || false;
        }
    }).catch(error => {
        console.error('获取用户信息失败:', error);
        isCreator.value = false;
    });
});


/**
 * 处理分享按钮点击事件
 */
const shareBtnClick = () => {
    // 显示分享选项菜单
    Taro.showActionSheet({
        itemList: ['分享给朋友'],
        success: (res) => {
            if (res.tapIndex === 0) {
                // 分享给朋友
                Taro.showToast({
                    title: '请点击右上角分享给朋友',
                    icon: 'none',
                    duration: 2000
                });
            }
        }
    });
}

/**
 * 定义分享给朋友的内容
 * @returns {Object} 分享配置对象
 */
const onShareAppMessage = () => {
    return {
        title: `${reward.value.title} - 仅需${reward.value.points}积分`,
        path: addShareFlag(`/pages/RewardDetail/index?id=${reward.value.id}`),
        imageUrl: reward.value.image
    }
}

// 导出分享方法供Taro使用
defineExpose({
    onShareAppMessage,
})
</script>

<style lang="less">

</style>