<template>
  <view class="min-h-screen bg-gray-100">
    <!-- <AppHeader title="我的券" :showBack="true" /> -->

    <!-- Tabs -->
    <view class="bg-white flex justify-around items-center border-b border-gray-200">
      <view
        v-for="tab in tabs"
        :key="tab.name"
        @click="activeTab = tab.name"
        class="py-3 text-center w-1/4 text-base font-medium cursor-pointer"
        :class="[
          activeTab === tab.name
            ? 'text-blue-500 border-b-2 border-blue-500'
            : 'text-gray-500'
        ]"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- Rewards List -->
    <view class="p-4">
      <view v-if="filteredRewards.length > 0" class="space-y-4">
        <view
          v-for="reward in filteredRewards"
          :key="reward.id"
          class="bg-white rounded-lg shadow-sm p-4 flex justify-between items-center"
        >
          <view class="flex-1">
            <h3 class="text-lg font-semibold text-gray-800">{{ reward.title }}</h3>
            <p class="text-sm text-gray-500 mt-1">有效期至 {{ reward.expiryDate }}</p>
            <p v-if="reward.status === 'used'" class="text-sm text-gray-400 mt-1">使用于 {{ reward.usedDate }}</p>
          </view>
          <button
            @click="handleUseReward(reward)"
            :disabled="reward.status !== 'unused'"
            class="px-6 py-2 rounded-full text-white font-medium text-sm transition-colors"
            :class="{
              'bg-blue-500 hover:bg-blue-600': reward.status === 'unused',
              'bg-gray-300 cursor-not-allowed': reward.status !== 'unused'
            }"
          >
            {{ getButtonText(reward.status) }}
          </button>
        </view>
      </view>
      <view v-else class="text-center py-20">
        <p class="text-gray-500">暂无相关兑换券</p>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import Taro from '@tarojs/taro';

import AppHeader from '../../components/AppHeader.vue';

const tabs = ref([
  { name: 'all', label: '全部' },
  { name: 'unused', label: '未使用' },
  { name: 'used', label: '已使用' },
  { name: 'expired', label: '已过期' },
]);

const activeTab = ref('all');

const rewards = ref([
  {
    id: 1,
    title: '杏花楼集团 85折券',
    expiryDate: '2025-08-28',
    status: 'unused',
    usedDate: null,
  },
  {
    id: 2,
    title: '老凤祥银楼 20元抵用券',
    expiryDate: '2025-08-28',
    status: 'unused',
    usedDate: null,
  },
  {
    id: 3,
    title: '吴良材眼镜 5折券',
    expiryDate: '2024-05-20',
    status: 'used',
    usedDate: '2024-05-01',
  },
  {
    id: 4,
    title: '沈大成双酿团 免费券',
    expiryDate: '2024-03-15',
    status: 'expired',
    usedDate: null,
  },
]);

const filteredRewards = computed(() => {
  if (activeTab.value === 'all') {
    return rewards.value;
  }
  return rewards.value.filter(reward => reward.status === activeTab.value);
});

const getButtonText = (status) => {
  switch (status) {
    case 'unused':
      return '使用';
    case 'used':
      return '已使用';
    case 'expired':
      return '已过期';
    default:
      return '';
  }
};

const handleUseReward = (reward) => {
  if (reward.status === 'unused') {
    // Here you would typically navigate to a usage/QR code page
    // For now, we can just log it or update the status for demo purposes
    console.log(`Using reward: ${reward.title}`);
    // Example of updating status:
    // const item = rewards.value.find(r => r.id === reward.id);
    // if (item) {
    //   item.status = 'used';
    //   item.usedDate = new Date().toISOString().split('T')[0];
    // }
    // 跳转到卡券详情页
    Taro.navigateTo({
      url: '/pages/CouponDetail/index?id=' + reward.id
    })
  }
};
</script>