<script setup>
import { ref, onMounted } from "vue";
import { userApi } from "../../api/user";

const currentTab = ref("unused");
const coupons = ref([]);
const loading = ref(false);

const tabs = [
  { label: "未使用", value: "unused" },
  { label: "已使用", value: "used" },
  { label: "已过期", value: "expired" },
];

const fetchCoupons = async () => {
  loading.value = true;
  try {
    const res = await userApi.getCoupons(currentTab.value);
    coupons.value = res || [];
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

onMounted(fetchCoupons);
</script>

<template>
  <div
    class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8"
  >
    <h1 class="text-2xl font-bold text-slate-900 mb-8">我的优惠券</h1>

    <!-- Tabs -->
    <div class="flex items-center gap-8 mb-8 border-b border-slate-100">
      <button
        v-for="tab in tabs"
        :key="tab.value"
        @click="
          currentTab = tab.value;
          fetchCoupons();
        "
        class="pb-4 text-sm font-bold transition-colors border-b-2 cursor-pointer focus:outline-none"
        :class="
          currentTab === tab.value
            ? 'text-primary-600 border-primary-600'
            : 'text-slate-500 border-transparent hover:text-slate-700'
        "
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- List -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div
        v-for="coupon in coupons"
        :key="coupon.id"
        class="flex bg-white border border-slate-200 rounded-xl overflow-hidden group hover:border-primary-300 transition-all"
        :class="{ 'opacity-60 grayscale': currentTab !== 'unused' }"
      >
        <!-- Left: Amount -->
        <div
          class="w-32 bg-primary-50 flex flex-col items-center justify-center border-r border-dashed border-slate-200 p-4"
        >
          <div class="text-primary-600 font-bold">
            <span class="text-sm">¥</span>
            <span class="text-3xl">{{ coupon.value / 100 }}</span>
          </div>
          <div class="text-[10px] text-primary-500 mt-1">
            满{{ coupon.min_order_amount / 100 }}可用
          </div>
        </div>
        <!-- Right: Info -->
        <div class="flex-1 p-4 relative">
          <h3 class="font-bold text-slate-900 mb-1">{{ coupon.title }}</h3>
          <p class="text-xs text-slate-500 mb-4">{{ coupon.description }}</p>
          <div class="text-[10px] text-slate-400">
            有效期至: {{ coupon.end_at }}
          </div>

          <!-- Status Badge -->
          <div
            v-if="currentTab === 'used'"
            class="absolute top-2 right-2 border-2 border-slate-300 text-slate-400 text-[10px] font-bold px-1 py-0.5 rounded rotate-12"
          >
            已使用
          </div>
          <div
            v-if="currentTab === 'expired'"
            class="absolute top-2 right-2 border-2 border-red-300 text-red-400 text-[10px] font-bold px-1 py-0.5 rounded rotate-12"
          >
            已过期
          </div>
        </div>
      </div>
    </div>

    <!-- Empty -->
    <div
      v-if="!loading && coupons.length === 0"
      class="text-center py-20 text-slate-400"
    >
      <div
        class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4"
      >
        <i class="pi pi-ticket text-2xl text-slate-300"></i>
      </div>
      <p>暂无相关优惠券</p>
    </div>
  </div>
</template>
