import React from 'react';
// Taro mini-program component

/**
 * E2. 我的券 - 消费者持有的券列表
 *
 * 按状态分类：可使用 / 已使用 / 已过期
 * 每张券可操作：使用(核销)、出售、转赠
 */

const MyCouponsPage: React.FC = () => {
  const tabs = ['可使用', '已使用', '已过期'];
  const [activeTab] = React.useState(0);

  return (
    <view className="my-coupons-page">
      {/* Tabs */}
      <view className="tabs">
        {tabs.map((tab, i) => (
          <view key={tab} className={`tab ${i === activeTab ? 'tab-active' : ''}`}>
            <text className={`tab-text ${i === activeTab ? 'tab-text-active' : ''}`}>{tab}</text>
            {i === activeTab && <view className="tab-indicator" />}
          </view>
        ))}
      </view>

      {/* Coupon List */}
      <view className="coupon-list">
        {[
          { brand: 'Starbucks', name: '星巴克 ¥25 礼品卡', expiry: '2026-04-15', status: 'active' },
          { brand: 'Amazon', name: 'Amazon ¥100 购物券', expiry: '2026-03-20', status: 'active' },
          { brand: 'Nike', name: 'Nike ¥80 运动券', expiry: '2026-05-01', status: 'active' },
        ].map((coupon, i) => (
          <view key={i} className="my-coupon-card">
            <view className="coupon-left">
              <view className="coupon-icon-wrap">
                <text className="coupon-icon-text">🎫</text>
              </view>
            </view>
            <view className="coupon-center">
              <text className="coupon-brand">{coupon.brand}</text>
              <text className="coupon-name">{coupon.name}</text>
              <text className="coupon-expiry">有效期至 {coupon.expiry}</text>
            </view>
            <view className="coupon-right">
              <view className="use-btn">
                <text className="use-btn-text">使用</text>
              </view>
            </view>
            {/* Ticket notch decoration */}
            <view className="notch notch-top" />
            <view className="notch notch-bottom" />
          </view>
        ))}
      </view>

      {/* Empty State for other tabs */}
      {activeTab > 0 && (
        <view className="empty-state">
          <text className="empty-icon">📭</text>
          <text className="empty-text">暂无券</text>
        </view>
      )}
    </view>
  );
};

export default MyCouponsPage;

/*
CSS (小程序样式 - 对应 index.scss):

.my-coupons-page { background: #F8F9FC; min-height: 100vh; }

.tabs {
  display: flex; background: white;
  border-bottom: 1rpx solid #F1F3F8;
}
.tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 24rpx 0; position: relative;
}
.tab-text { font-size: 28rpx; color: #A0A8BE; }
.tab-text-active { color: #6C5CE7; font-weight: 600; }
.tab-indicator {
  position: absolute; bottom: 0; width: 48rpx; height: 4rpx;
  background: #6C5CE7; border-radius: 999rpx;
}

.coupon-list { padding: 24rpx 32rpx; }

.my-coupon-card {
  display: flex; align-items: center; position: relative;
  background: white; border-radius: 16rpx; padding: 24rpx;
  margin-bottom: 16rpx; border: 1rpx solid #F1F3F8;
  overflow: hidden;
}
.coupon-left { margin-right: 20rpx; }
.coupon-icon-wrap {
  width: 100rpx; height: 100rpx; background: #F3F1FF;
  border-radius: 12rpx; display: flex;
  align-items: center; justify-content: center;
}
.coupon-icon-text { font-size: 40rpx; }
.coupon-center { flex: 1; }
.coupon-brand { font-size: 22rpx; color: #A0A8BE; }
.coupon-name { font-size: 28rpx; font-weight: 500; color: #141723; margin-top: 4rpx; }
.coupon-expiry { font-size: 22rpx; color: #A0A8BE; margin-top: 8rpx; }
.coupon-right { margin-left: 16rpx; }
.use-btn {
  padding: 12rpx 28rpx; background: #6C5CE7;
  border-radius: 999rpx;
}
.use-btn-text { color: white; font-size: 24rpx; font-weight: 600; }

.notch {
  position: absolute; left: 130rpx;
  width: 20rpx; height: 20rpx; background: #F8F9FC;
  border-radius: 50%;
}
.notch-top { top: -10rpx; }
.notch-bottom { bottom: -10rpx; }

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 120rpx 0;
}
.empty-icon { font-size: 64rpx; }
.empty-text { font-size: 28rpx; color: #A0A8BE; margin-top: 16rpx; }
*/
