<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 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 { handleSharePageAuth, addShareFlag } from '@/utils/authRedirect';
// 导入接口
import { getCouponDetailAPI, redeemCouponAPI } from '@/api/coupon';
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config';

const couponId = ref('');
const fromShare = ref(0);

// 优惠券详情数据
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(() => {
                    // 分享成功后，跳转到个人中心
                    if (fromShare.value) {
                        Taro.redirectTo({
                            url: '/pages/Profile/index'
                        });
                    } else {
                        // 非分享场景，返回上一页
                        Taro.navigateBack({
                            delta: 1,
                            success: () => {
                            },
                            fail: (err) => {
                                console.error('返回上一页失败:', err);
                                Taro.redirectTo({
                                    url: '/pages/Profile/index'
                                });
                            }
                        });
                    }
                }, 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;
        }

        // 获取分享参数
        if (options.from_share) {
            fromShare.value = options.from_share;
        }

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

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

// useDidShow(() => {
// });


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

/**
 * 定义分享给朋友的内容
 * @returns {Object} 分享配置对象
 */
const onShareAppMessage = (res) => {
    // 确保数据已加载，提供默认值
    // const title = reward.value?.title ? `${reward.value.title}` : '精彩优惠券等你来兑换';
    const shareId = reward.value?.id || couponId.value || '';
    // const imageUrl = reward.value?.banner || '';

    const shareData = {
        title: '众多抵用优惠券等你健步积分来换',
        path: addShareFlag(`/pages/RewardDetail/index?id=${shareId}`),
        // imageUrl: imageUrl
    };

    return shareData;
}

// 使用Taro的useShareAppMessage Hook来处理分享
Taro.useShareAppMessage((res) => {
    return onShareAppMessage(res);
});

// 导出分享方法供Taro使用（保持兼容性）
defineExpose({
    onShareAppMessage,
})
</script>