<template>
  <view class="page-activity">
    <!-- 顶部标题区 -->
    <view class="header-section">
      <view class="header-icon">
        <u-icon name="gift-fill" :size="28" color="#FF6B35" />
      </view>
      <view class="header-content">
        <text class="header-title">精彩活动</text>
        <text class="header-subtitle">参与活动，赢取丰厚奖励</text>
      </view>
    </view>

    <!-- 活动列表 -->
    <view class="activity-list">
      <!-- 邀请活动卡片 -->
      <view
        v-for="activity in activities"
        :key="activity.id"
        class="activity-card"
        :class="getCardClass(activity.type)"
        @tap="handleActivityClick(activity)"
      >
        <!-- 背景装饰 -->
        <view class="card-bg-decoration">
          <view class="decoration-circle decoration-circle-1"></view>
          <view class="decoration-circle decoration-circle-2"></view>
        </view>

        <!-- 卡片内容 -->
        <view class="card-main">
          <view class="card-header">
            <view class="activity-icon" :class="`icon-${activity.type}`">
              <text class="icon-emoji">{{ activity.icon }}</text>
            </view>
            <view class="activity-info">
              <text class="activity-title">{{ activity.title }}</text>
              <text class="activity-desc">{{ activity.description }}</text>
            </view>
          </view>

          <!-- 活动标签 -->
          <view v-if="activity.type === 'invite' && activity.config" class="activity-tags">
            <view v-if="activity.config.firstOrderRate" class="tag-item tag-highlight">
              <u-icon name="star-fill" :size="14" color="#FF6B35" />
              <text class="tag-text">首单返{{ (activity.config.firstOrderRate * 100).toFixed(1) }}%</text>
            </view>
            <view v-if="activity.config.maxCashback" class="tag-item">
              <u-icon name="rmb-circle-fill" :size="14" color="#FFB800" />
              <text class="tag-text">最高¥{{ activity.config.maxCashback }}</text>
            </view>
            <view v-if="activity.config.withdrawThreshold" class="tag-item">
              <u-icon name="checkmark-circle-fill" :size="14" color="#52C41A" />
              <text class="tag-text">满{{ activity.config.withdrawThreshold }}元可提现</text>
            </view>
          </view>

        </view>
      </view>

      <!-- 更多活动占位卡片 -->
      <view v-if="activities.length > 0" class="coming-soon-card">
        <view class="coming-icon">
          <u-icon name="clock" :size="40" color="#CCCCCC" />
        </view>
        <text class="coming-title">更多活动</text>
        <text class="coming-desc">敬请期待</text>
      </view>

      <!-- 空状态 -->
      <view v-if="activities.length === 0 && !loading" class="empty-state">
        <view class="empty-icon-wrapper">
          <u-icon name="calendar" :size="80" color="#CCCCCC" />
        </view>
        <text class="empty-title">暂无活动</text>
        <text class="empty-desc">精彩活动即将上线，敬请期待</text>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <u-icon name="loading" :size="24" color="#999" />
        <text class="loading-text">加载中...</text>
      </view>
    </view>

    <!-- 底部提示 -->
    <view v-if="activities.length > 0" class="bottom-tip">
      <u-icon name="info-circle" :size="14" color="#999" />
      <text class="tip-text">活动最终解释权归平台所有</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getActivityList } from '@/api/user/invite';

interface Activity {
  id: number;
  type: string;
  title: string;
  description: string;
  icon: string;
  enabled: boolean;
  config?: {
    maxCashback?: number;
    firstOrderRate?: number;
    secondOrderRate?: number;
    withdrawThreshold?: number;
    minCashback?: number;
    maxOrderIndex?: number;
  };
}

const activities = ref<Activity[]>([]);
const loading = ref(false);

onMounted(() => {
  fetchActivities();
});

async function fetchActivities() {
  loading.value = true;
  try {
    const res = await getActivityList();
    const list = Array.isArray(res.data) ? res.data : (res.data?.list || []);

    // 转换后端数据格式为前端需要的格式
    activities.value = list
      .filter((item: any) => item.enabled)
      .map((item: any) => ({
        id: item.id,
        type: item.type === 'invite_cashback' ? 'invite' : item.type,
        title: item.name || '活动',
        description: getActivityDescription(item.type),
        icon: getActivityIcon(item.type),
        enabled: item.enabled,
        config: item.config,
      }));
  } catch (e) {
    console.error('获取活动列表失败:', e);
    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
  } finally {
    loading.value = false;
  }
}

function getActivityDescription(type: string) {
  const descMap: Record<string, string> = {
    invite_cashback: '邀请好友下单，双方都有奖励',
    coupon: '领取优惠券，享受更多优惠',
    discount: '限时折扣，不容错过',
  };
  return descMap[type] || '参与活动，赢取奖励';
}

function getActivityIcon(type: string) {
  const iconMap: Record<string, string> = {
    invite_cashback: '🎁',
    coupon: '🎫',
    discount: '💰',
  };
  return iconMap[type] || '🎉';
}

function getCardClass(type: string) {
  const classMap: Record<string, string> = {
    invite: 'card-invite',
    coupon: 'card-coupon',
    discount: 'card-discount',
  };
  return classMap[type] || 'card-default';
}

function getButtonColor(type: string) {
  const colorMap: Record<string, string> = {
    invite: '#ffffff',
    coupon: '#FF6B35',
    discount: '#FF6B35',
  };
  return colorMap[type] || '#FF6B35';
}

function handleActivityClick(activity: Activity) {
  if (!activity.enabled) {
    uni.showToast({ title: '活动暂未开启', icon: 'none' });
    return;
  }

  if (activity.type === 'invite') {
    uni.navigateTo({ url: '/pages/invite/index' });
  } else {
    uni.showToast({ title: '活动详情开发中', icon: 'none' });
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.page-activity {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF5F0 0%, #F5F7FA 100%);
  padding-bottom: 40rpx;
}

/* ========== 顶部标题区 ========== */
.header-section {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 40rpx 32rpx 32rpx;
}

.header-icon {
  width: 72rpx;
  height: 72rpx;
  background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DD 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.15);
}

.header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.header-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.2;
}

.header-subtitle {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

/* ========== 活动列表 ========== */
.activity-list {
  padding: 0 24rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* ========== 活动卡片 ========== */
.activity-card {
  position: relative;
  border-radius: 24rpx;
  padding: 32rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

/* 邀请活动卡片 */
.card-invite {
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
}

/* 优惠券活动卡片 */
.card-coupon {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}

/* 折扣活动卡片 */
.card-discount {
  background: linear-gradient(135deg, #52C41A 0%, #3D9614 100%);
}

/* 默认卡片 */
.card-default {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

/* 背景装饰 */
.card-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.decoration-circle-1 {
  width: 200rpx;
  height: 200rpx;
  top: -80rpx;
  right: -60rpx;
}

.decoration-circle-2 {
  width: 120rpx;
  height: 120rpx;
  bottom: -40rpx;
  left: -30rpx;
}

/* 卡片主体 */
.card-main {
  position: relative;
  z-index: 1;
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
  margin-bottom: 24rpx;
}

.activity-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10rpx);
}

.icon-emoji {
  font-size: 48rpx;
  line-height: 1;
}

.activity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  padding-top: 8rpx;
}

.activity-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.activity-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

/* 活动标签 */
.activity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 24rpx;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 10rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.tag-highlight {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.tag-text {
  font-size: 24rpx;
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
}

/* 操作按钮 */
.card-action {
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 32rpx;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10rpx);
  border-radius: 40rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;

  &:active {
    background: rgba(255, 255, 255, 0.35);
  }
}

.card-invite .action-btn {
  background: rgba(255, 255, 255, 1);
  border-color: transparent;

  .btn-text {
    color: #FF6B35;
  }

  &:active {
    background: rgba(255, 255, 255, 0.9);
  }
}

.btn-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 600;
}

/* ========== 即将上线卡片 ========== */
.coming-soon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 32rpx;
  background: #ffffff;
  border-radius: 24rpx;
  border: 2rpx dashed #E5E5E5;
}

.coming-icon {
  width: 100rpx;
  height: 100rpx;
  background: #F5F7FA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.coming-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #666;
  margin-bottom: 8rpx;
}

.coming-desc {
  font-size: 24rpx;
  color: #999;
}

/* ========== 空状态 ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 32rpx;
}

.empty-icon-wrapper {
  width: 160rpx;
  height: 160rpx;
  background: #F5F7FA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #666;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
}

/* ========== 加载状态 ========== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  padding: 80rpx 0;
}

.loading-text {
  font-size: 26rpx;
  color: #999;
}

/* ========== 底部提示 ========== */
.bottom-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 32rpx 24rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #999;
}
</style>
