<template>
	<view class="my-coupon-page">
		<!-- Tab 切换 -->
		<view class="tab-container">
			<view class="tab-item" :class="{ active: currentTab === 'available' }" @click="switchTab('available')">
				<text class="tab-text">{{ $t('myCoupon.available') }}</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'used' }" @click="switchTab('used')">
				<text class="tab-text">{{ $t('myCoupon.used') }}</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'expired' }" @click="switchTab('expired')">
				<text class="tab-text">{{ $t('myCoupon.expired') }}</text>
			</view>
		</view>

		<!-- 优惠券列表 -->
		<view class="coupon-list" v-if="filteredCoupons.length > 0">
			<view v-for="coupon in filteredCoupons" :key="coupon.id" class="coupon-item-wrapper">
				<view class="coupon-item" :class="getCouponClass(coupon.status)">
					<!-- 左侧圆形缺口 -->
					<view class="coupon-circle-left"></view>
					<!-- 右侧圆形缺口 -->
					<view class="coupon-circle-right"></view>
							
					<view class="coupon-left">
						<text class="coupon-value">{{ coupon.type === 'discount' ? coupon.discount + '折' : '¥' + coupon.value }}</text>
						<text class="coupon-condition">{{ coupon.condition }}</text>
						<text class="coupon-validity-left">{{ coupon.validity }}</text>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-right">
						<text class="coupon-name">{{ coupon.name }}</text>
						<view class="use-btn" v-if="coupon.status === 'available'" @click="useCoupon(coupon)">
							<text class="use-text">{{ $t('myCoupon.useNow') }}</text>
						</view>
						<text class="coupon-status" v-else>{{ getStatusText(coupon.status) }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image class="empty-icon" src="/static/empty-coupon.png" mode="aspectFit"></image>
			<text class="empty-text">{{ getEmptyText() }}</text>
			<view class="buy-btn" @click="goToBuy" v-if="currentTab === 'available'">
				<text class="buy-text">{{ $t('myCoupon.buyNow') }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { useI18n } from '@/utils/i18n.js'
	import { getUserCoupons } from '@/config/api/coupon.js'

	const { t: $t } = useI18n()

	// 当前选中的 Tab
	const currentTab = ref('available')

	// Tab 与 API 状态的映射
	const tabToStatusMap = {
		available: 'unused',
		used: 'used',
		expired: 'expired'
	}

	// 优惠券列表
	const couponList = ref([])

	// 过滤后的优惠券
	const filteredCoupons = computed(() => {
		return couponList.value.filter(coupon => coupon.status === currentTab.value)
	})

	// 获取优惠券列表
	const getCouponList = async () => {
		try {
			const apiStatus = tabToStatusMap[currentTab.value]
			const res = await getUserCoupons(apiStatus)
			
			if (res.code === 200 && res.data) {
				// 将后端数据转换为前端需要的格式
				couponList.value = (res.data || []).map(item => {
					// 判断优惠券类型：discount_coupon 折扣券，deduction_coupon 抵扣券
					const isCashCoupon = item.couponType === 'deduction_coupon'
					
					// 格式化使用条件
					let condition = '无门槛'
					if (item.usableCondition && item.usableCondition > 0) {
						condition = `满${item.usableCondition}可用`
					}
					
					// 格式化有效期
					let validity = ''
					if (currentTab.value === 'used') {
						// 已使用显示使用时间（这里暂用开始时间，如后端有使用时间字段可替换）
						validity = item.couponStartTime ? `使用时间 ${item.couponStartTime}` : ''
					} else if (item.couponEndTime) {
						validity = `有效期至 ${item.couponEndTime}`
					}
					
					return {
						id: item.id,
						name: item.couponName || '优惠券',
						type: isCashCoupon ? 'cash' : 'discount',
						value: item.deductAmount ? parseFloat(item.deductAmount) : 0,
						discount: item.discountRate ? parseFloat(item.discountRate) * 10 : null,
						condition: condition,
						validity: validity,
						status: currentTab.value
					}
				})
			} else {
				couponList.value = []
			}
		} catch (error) {
			console.error('获取优惠券列表失败:', error)
			couponList.value = []
			uni.showToast({
				title: $t('myCoupon.getListFailed'),
				icon: 'none'
			})
		}
	}

	// 切换 Tab
	const switchTab = (tab) => {
		currentTab.value = tab
		getCouponList()
	}

	// 获取优惠券样式类名
	const getCouponClass = (status) => {
		return status === 'available' ? '' : 'disabled'
	}

	// 获取状态文本
	const getStatusText = (status) => {
		const statusMap = {
			'used': $t('myCoupon.usedStatus'),
			'expired': $t('myCoupon.expiredStatus')
		}
		return statusMap[status] || ''
	}

	// 获取空状态文本
	const getEmptyText = () => {
		const textMap = {
			'available': $t('myCoupon.noAvailableCoupons'),
			'used': $t('myCoupon.noUsedCoupons'),
			'expired': $t('myCoupon.noExpiredCoupons')
		}
		return textMap[currentTab.value] || ''
	}

	// 使用优惠券
	const useCoupon = (coupon) => {
		// TODO: 使用优惠券逻辑
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

	// 去购买
	const goToBuy = () => {
		uni.navigateTo({
			url: '/pages/purchase/index?tab=coupon'
		})
	}

	onMounted(() => {
		uni.setNavigationBarTitle({
			title: $t('user.myCoupons')
		})
		getCouponList()
	})
</script>

<style lang="scss" scoped>
	.my-coupon-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* Tab 切换 */
	.tab-container {
		position: sticky;
		top: 0;
		display: flex;
		background-color: #ffffff;
		z-index: 999;
		padding: 20rpx 0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		position: relative;

		.tab-text {
			font-size: 28rpx;
			color: #666;
			font-weight: 500;
		}

		&.active {
			.tab-text {
				color: #333;
				font-weight: 600;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 6rpx;
				background-color: #FFA928;
				border-radius: 3rpx;
			}
		}
	}

	.coupon-list {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.coupon-item-wrapper {
		position: relative;
	}

	.coupon-item {
		background: linear-gradient(135deg, #FFF4E6 0%, #FFE8CC 100%);
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		display: flex;
		align-items: stretch;
		position: relative;
		overflow: visible;
		min-height: 180rpx;
		box-sizing: border-box;
		border: 2rpx solid transparent;
		transition: all 0.3s;

		&.selected {
			border-color: #B8741A;
			box-shadow: 0 4rpx 20rpx rgba(184, 116, 26, 0.2);
			
			.coupon-circle-left,
			.coupon-circle-right {
				background-color: #FFF4E6;
				border: 2rpx solid #B8741A;
			}
		}

		&.disabled {
			background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
			opacity: 0.6;

			.coupon-value,
			.coupon-condition,
			.coupon-name {
				color: #999;
			}
			
			.coupon-circle-left,
			.coupon-circle-right {
				background-color: #f5f5f5;
			}
		}
	}

	/* 左侧圆形缺口 */
	.coupon-circle-left {
		position: absolute;
		left: -16rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-color: #f5f5f5;
		z-index: 10;
	}

	/* 右侧圆形缺口 */
	.coupon-circle-right {
		position: absolute;
		right: -16rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-color: #f5f5f5;
		z-index: 10;
	}

	.coupon-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.coupon-value {
		font-size: 48rpx;
		font-weight: 700;
		color: #B8741A;
	}

	.coupon-condition {
		font-size: 24rpx;
		color: #666;
	}

	.coupon-validity-left {
		font-size: 22rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.coupon-divider {
		width: 2rpx;
		height: 100%;
		position: absolute;
		left: 65%;
		transform: translateX(-50%);
		top: 0;
		bottom: 0;
		// min-height: 160rpx;
		align-self: stretch;
		background: repeating-linear-gradient(to bottom,
				#B8741A 0rpx,
				#B8741A 8rpx,
				transparent 8rpx,
				transparent 16rpx);
		margin: 0 30rpx;
	}

	.coupon-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		align-items: flex-end;
	}

	.coupon-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.coupon-validity {
		font-size: 22rpx;
		color: #999;
	}

	.use-btn {
		margin-top: 10rpx;
		padding: 12rpx 28rpx;
		background-color: #B8741A;
		border-radius: 40rpx;

		.use-text {
			font-size: 24rpx;
			color: #ffffff;
			font-weight: 500;
		}
	}

	.coupon-status {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 0;

		.empty-icon {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 40rpx;
			opacity: 0.5;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 40rpx;
		}

		.buy-btn {
			padding: 20rpx 60rpx;
			background-color: #B8741A;
			border-radius: 48rpx;

			.buy-text {
				font-size: 28rpx;
				color: #ffffff;
				font-weight: 500;
			}
		}
	}
</style>
