<template>
    <view class="min-h-screen bg-white pb-24">
        <!-- <AppHeader title="优惠券详情" :showBack="true" /> -->
        <!-- 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.title }}</text>
                </view>
            </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 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 from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';

// 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: [
        '2025-10-01~2025-12-31',
    ],
    usage_rules: [
        '仅限店内正价商品使用',
        '不可与其他优惠同时使用',
        '特价商品不可使用',
        '最终解释权归商家所有'
    ]
});

/**
 * @description Handles the redemption of the coupon.
 */
const handleRedeem = () => {
    // Show a confirmation modal
    Taro.showModal({
        title: '温馨提示',
        content: `将核销此优惠券，是否确认？`,
        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);
            }
        }
    });
};
</script>