<template>
  <view class="min-h-screen flex flex-col bg-gradient-to-br from-blue-50 to-purple-50">
    <AppHeader title="优惠券详情" />
    <view class="flex-1 p-4">
      <template v-if="!redeemed">
        <view class="bg-white rounded-2xl shadow-sm overflow-hidden mb-4">
          <view class="h-40 bg-blue-600 flex items-center justify-center p-6">
            <image :src="reward.image" :alt="reward.merchant" class="max-h-full max-w-full object-contain" />
          </view>
          <view class="p-4">
            <h1 class="text-xl font-medium mb-1">{{ reward.title }}</h1>
            <p class="text-gray-600">{{ reward.description }}</p>
            <view class="flex items-center mt-4 text-blue-600">
              <Ticket size="20" class="mr-2" />
              <span class="font-medium">{{ reward.points }} 积分</span>
            </view>
          </view>
        </view>

        <GlassCard class="mb-4">
          <h2 class="text-lg font-medium mb-4">使用须知</h2>
          <view class="space-y-3">
            <view class="flex">
              <Calendar size="20" class="text-gray-500 mr-3 flex-shrink-0" />
              <view>
                <p class="font-medium">有效期</p>
                <p class="text-gray-600">{{ reward.validUntil }}</p>
              </view>
            </view>
            <view class="flex">
              <Location2 size="20" class="text-gray-500 mr-3 flex-shrink-0" />
              <view>
                <p class="font-medium">适用门店</p>
                <p class="text-gray-600">{{ reward.locations }}</p>
              </view>
            </view>
          </view>
        </GlassCard>

        <GlassCard class="mb-6">
          <h2 class="text-lg font-medium mb-4">使用条款</h2>
          <view class="space-y-2">
            <view v-for="(term, index) in reward.terms" :key="index" class="flex">
              <Info size="16" class="text-gray-500 mr-2 flex-shrink-0 mt-0.5" />
              <p class="text-gray-600">{{ term }}</p>
            </view>
          </view>
        </GlassCard>

        <PrimaryButton @click="handleRedeem" :disabled="redeeming">
          <template v-if="redeeming">
            <view class="animate-spin mr-2">
              <Loading class="w-5 h-5" />
            </view>
            兑换中...
          </template>
          <template v-else>
            立即兑换
          </template>
        </PrimaryButton>
      </template>

      <template v-else>
        <view class="flex flex-col items-center justify-center h-full">
          <GlassCard class="w-full max-w-md">
            <view class="flex flex-col items-center">
              <view class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-4">
                <Check size="40" class="text-green-600" />
              </view>
              <h2 class="text-xl font-medium mb-2">兑换成功</h2>
              <p class="text-gray-600 text-center mb-6">
                您已成功兑换{{ reward.title }}
              </p>
              <view class="bg-gray-50 w-full rounded-lg p-4 mb-6 text-center">
                <p class="text-gray-600 mb-2">兑换码</p>
                <p class="text-2xl font-mono tracking-wider font-medium">
                  SB12345678
                </p>
              </view>
              <image :src="reward.image" :alt="reward.merchant" class="w-24 h-24 object-contain mb-6" />
              <view class="text-center mb-6">
                <p class="font-medium">{{ reward.title }}</p>
                <p class="text-gray-600">{{ reward.description }}</p>
                <p class="text-gray-500 text-sm mt-2">
                  有效期至: {{ reward.validUntil }}
                </p>
              </view>
              <PrimaryButton @click="goBack">
                返回兑换页面
              </PrimaryButton>
            </view>
          </GlassCard>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
import GlassCard from '../../components/GlassCard.vue';
import PrimaryButton from '../../components/PrimaryButton.vue';
import { Ticket, Calendar, Location2, Info, Check, Loading } from '@nutui/icons-vue-taro';

const redeeming = ref(false);
const redeemed = ref(false);

// Mock reward data
const reward = {
  id: 1,
  title: '星巴克咖啡券',
  description: '任意中杯咖啡一杯',
  points: 500,
  merchant: '星巴克',
  image: 'https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png',
  validUntil: '2023年12月31日',
  locations: '全国各星巴克门店',
  terms: ['每人限兑换1次', '不与其他优惠同享', '使用时请出示兑换码', '最终解释权归商家所有']
};

const handleRedeem = () => {
  redeeming.value = true;
  // Simulate API call
  setTimeout(() => {
    redeeming.value = false;
    redeemed.value = true;
  }, 1500);
};

const goBack = () => {
  Taro.navigateTo({ url: '/pages/Rewards/index' });
};

</script>