<template>
    <view class="min-h-screen bg-white pb-24">
        <!-- 分享按钮 -->
        <button id="share" data-name="shareBtn" open-type="share" style="font-size: 0.9rem; 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.image" 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 }} 积分</text>
                </view>
                <h1 class="text-xl font-bold">{{ reward.title }}</h1>
            </view>

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

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

                <!-- Usage Rules -->
                <view>
                    <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="#3B82F6" @click="handleRedeem">
                立即兑换
            </nut-button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
import { getUserProfileAPI } from '@/api/user';
import { handleSharePageAuth, addShareFlag } from '@/utils/authRedirect';

const isCreator = ref(false);

// Mock reward data based on the image
const reward = ref({
    id: 1,
    title: '吴良材眼镜店85折券',
    points: 10,
    image: 'https://placehold.co/800x400/e2f3ff/0369a1?text=LFX&font=roboto', // Placeholder image
    stores: [
        '吴良材眼镜店 (南京东路店)',
        '吴良材眼镜店 (淮海中路店)',
        '吴良材眼镜店 (徐家汇店)'
    ],
    redemption_rules: [
        '每人每月限兑换1次',
        '兑换后30天内有效',
        '兑换成功后不可退回积分'
    ],
    usage_rules: [
        '仅限店内正价商品使用',
        '不可与其他优惠同时使用',
        '特价商品不可使用',
        '最终解释权归商家所有'
    ]
});

/**
 * @description Handles the redemption of the coupon.
 */
const handleRedeem = () => {
    // Show a confirmation modal
    Taro.showModal({
        title: '确认兑换',
        content: `将消耗 ${reward.value.points} 积分兑换此优惠券，是否确认？`,
        success: (res) => {
            if (res.confirm) {
                // Simulate API call for redemption
                Taro.showLoading({ title: '兑换中...' });
                setTimeout(() => {
                    Taro.hideLoading();
                    Taro.showToast({
                        title: '兑换成功',
                        icon: 'success',
                        duration: 2000
                    });
                    // After successful redemption, you might want to navigate the user to their coupons page
                    // For now, we'll just navigate back.
                    setTimeout(() => {
                        Taro.navigateBack();
                    }, 2000);
                }, 1500);
            }
        }
    });
};

const initData = async () => {
    // 获取用户信息，判断是否为创建者
    try {
        const { code, data } = await getUserProfileAPI();
        if (code) {
            isCreator.value = data?.user?.is_creator || false;
        }
    } catch (error) {
        console.error('获取用户信息失败:', error);
        isCreator.value = false;
    }
};

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

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


/**
 * 处理分享按钮点击事件
 */
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>