<template>
  <view class="checkin-container">
    <!-- 今日目标统计 -->
    <view class="today-stats">
      <view class="stats-item">
        <text class="stats-number">{{ completedGoals }}</text>
        <text class="stats-label">已完成</text>
      </view>
      <view class="stats-divider"></view>
      <view class="stats-item">
        <text class="stats-number">{{ totalGoals }}</text>
        <text class="stats-label">总目标</text>
      </view>
      <view class="stats-divider"></view>
      <view class="stats-item">
        <text class="stats-number">{{ completionRate }}%</text>
        <text class="stats-label">完成率</text>
      </view>
    </view>

    <!-- 目标列表 -->
    <view class="goals-list">
      <view
        v-for="(goal, index) in goalsList"
        :key="index"
        class="goal-item"
        :class="{ completed: goal.completed }"
        @click="toggleGoal(goal)"
      >
        <view class="goal-icon">
          <uni-icons :type="goal.icon" size="24" :color="goal.color"></uni-icons>
        </view>
        <view class="goal-info">
          <text class="goal-title">{{ goal.title }}</text>
          <text class="goal-description">{{ goal.description }}</text>
          <view class="goal-meta">
            <text class="goal-type">{{ getGoalTypeText(goal.type) }}</text>
            <text class="goal-progress">{{ goal.currentCount }}/{{ goal.targetCount }}</text>
          </view>
        </view>
        <view class="goal-status">
          <view v-if="goal.completed" class="completion-badge">
            <uni-icons type="checkmarkempty" size="16" color="#fff"></uni-icons>
          </view>
          <view v-else class="progress-ring">
            <view
              class="progress-fill"
              :style="{ width: (goal.currentCount / goal.targetCount * 100) + '%' }"
            ></view>
          </view>
          <view v-if="goal.completed" class="completed-icon">
            <uni-icons type="checkmarkempty" size="20" color="#52c41a"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="goalsList.length === 0" class="empty-state">
        <uni-icons type="star" size="80" color="#ccc"></uni-icons>
        <text class="empty-text">还没有目标</text>
        <text class="empty-desc">设定第一个目标开始打卡吧</text>
        <button
          @click="createGoal"
          class="create-btn"
        >添加目标</button>
      </view>
    </view>

    <!-- 悬浮添加按钮 -->
    <view class="floating-add-btn" @click="createGoal">
      <uni-icons type="plus" size="24" color="#fff"></uni-icons>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const activeTab = ref('all')

const categoryTabs = ref([
  { id: 'all', name: '全部', count: 0 },
  { id: 'daily', name: '日常', count: 0 },
  { id: 'weekly', name: '每周', count: 0 },
  { id: 'monthly', name: '每月', count: 0 },
  { id: 'special', name: '特殊', count: 0 }
])

const goals = ref([
  {
    id: 1,
    name: '一起做饭',
    description: '每天一起做一顿饭，增进感情',
    icon: 'home',
    color: '#FF6B9D',
    status: 'in-progress',
    category: 'daily',
    totalCount: 30,
    completedCount: 15,
    tags: ['日常', '做饭', '感情'],
    createTime: '2025-01-01',
    deadline: '2025-02-01'
  },
  {
    id: 2,
    name: '一起运动',
    description: '每周一起运动3次，保持健康',
    icon: 'heart',
    color: '#52c41a',
    status: 'in-progress',
    category: 'weekly',
    totalCount: 12,
    completedCount: 8,
    tags: ['运动', '健康', '每周'],
    createTime: '2025-01-01',
    deadline: '2025-04-01'
  },
  {
    id: 3,
    name: '一起旅行',
    description: '每月一起去一个新地方',
    icon: 'map',
    color: '#1890ff',
    status: 'completed',
    category: 'monthly',
    totalCount: 3,
    completedCount: 3,
    tags: ['旅行', '探索', '每月'],
    createTime: '2025-01-01',
    deadline: '2025-04-01'
  },
  {
    id: 4,
    name: '一起学习',
    description: '一起学习新技能，共同成长',
    icon: 'book',
    color: '#722ed1',
    status: 'in-progress',
    category: 'special',
    totalCount: 20,
    completedCount: 12,
    tags: ['学习', '成长', '技能'],
    createTime: '2025-01-01',
    deadline: '2025-06-01'
  }
])

// 计算属性
const totalCount = computed(() => goals.value.length)

const completedCount = computed(() =>
  goals.value.filter(goal => goal.status === 'completed').length
)

const inProgressCount = computed(() =>
  goals.value.filter(goal => goal.status === 'in-progress').length
)

const streakDays = computed(() => {
  // 这里可以计算连续打卡天数
  return 7
})

const progressPercentage = computed(() => {
  if (totalCount.value === 0) return 0
  return Math.round((completedCount.value / totalCount.value) * 100)
})

const filteredGoals = computed(() => {
  if (activeTab.value === 'all') {
    return goals.value
  }
  return goals.value.filter(goal => goal.category === activeTab.value)
})

// 方法
const switchTab = (tabId) => {
  activeTab.value = tabId
}

const getStatusText = (status) => {
  const statusMap = {
    'in-progress': '进行中',
    'completed': '已完成',
    'paused': '已暂停'
  }
  return statusMap[status] || '未知'
}

const viewGoal = (goal) => {
  uni.navigateTo({
    url: `/pages/checkin/detail?id=${goal.id}`
  })
}

const createGoal = () => {
  uni.navigateTo({
    url: '/pages/checkin/create'
  })
}

const checkinGoal = (goal) => {
  if (goal.completedCount < goal.totalCount) {
    goal.completedCount++

    // 检查是否完成
    if (goal.completedCount >= goal.totalCount) {
      goal.status = 'completed'
      uni.showToast({
        title: '恭喜完成目标！',
        icon: 'success'
      })
    } else {
      uni.showToast({
        title: '打卡成功！',
        icon: 'success'
      })
    }
  }
}

// 初始化分类数量
const initCategoryCounts = () => {
  categoryTabs.value.forEach(tab => {
    if (tab.id === 'all') {
      tab.count = goals.value.length
    } else {
      tab.count = goals.value.filter(goal => goal.category === tab.id).length
    }
  })
}

// 生命周期
onMounted(() => {
  initCategoryCounts()
})
</script>

<style lang="scss" scoped>
.checkin-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.progress-overview {
  background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
  padding: 40rpx 30rpx;
  color: #fff;

  .progress-header {
    text-align: center;
    margin-bottom: 30rpx;

    .progress-title {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .progress-subtitle {
      font-size: 28rpx;
      opacity: 0.9;
    }
  }

  .progress-bar {
    width: 100%;
    height: 12rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6rpx;
    overflow: hidden;
    margin-bottom: 30rpx;

    .progress-fill {
      height: 100%;
      background: #fff;
      border-radius: 6rpx;
      transition: width 0.3s ease;
    }
  }

  .progress-stats {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .stat-number {
        display: block;
        font-size: 40rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }

      .stat-label {
        font-size: 24rpx;
        opacity: 0.9;
      }
    }
  }
}

.category-tabs {
  background: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;

  .tab-item {
    display: inline-block;
    padding: 16rpx 32rpx;
    margin: 0 15rpx;
    border-radius: 25rpx;
    transition: all 0.3s;

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

    .tab-count {
      font-size: 24rpx;
      color: #999;
      margin-left: 5rpx;
    }

    &.active {
      background: #FF6B9D;

      .tab-text,
      .tab-count {
        color: #fff;
      }
    }
  }
}

.goal-list {
  padding: 0 30rpx;

  .goal-item {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    .goal-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .goal-icon {
        width: 60rpx;
        height: 60rpx;
        background: #f8f8f8;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
      }

      .goal-info {
        flex: 1;

        .goal-name {
          display: block;
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }

        .goal-desc {
          font-size: 26rpx;
          color: #999;
          line-height: 1.4;
        }
      }

      .goal-status {
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 22rpx;

        &.in-progress {
          background: #e6f7ff;
          color: #1890ff;
        }

        &.completed {
          background: #f6ffed;
          color: #52c41a;
        }

        &.paused {
          background: #fff7e6;
          color: #fa8c16;
        }
      }
    }

    .goal-progress {
      margin-bottom: 20rpx;

      .progress-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;

        .progress-text {
          font-size: 26rpx;
          color: #666;
        }

        .progress-percentage {
          font-size: 26rpx;
          color: #FF6B9D;
          font-weight: bold;
        }
      }

      .progress-bar-mini {
        width: 100%;
        height: 8rpx;
        background: #f0f0f0;
        border-radius: 4rpx;
        overflow: hidden;

        .progress-fill-mini {
          height: 100%;
          background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
          border-radius: 4rpx;
          transition: width 0.3s ease;
        }
      }
    }

    .goal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .goal-tags {
        display: flex;
        gap: 15rpx;

        .goal-tag {
          background: #f8f8f8;
          padding: 8rpx 16rpx;
          border-radius: 20rpx;

          .tag-text {
            font-size: 22rpx;
            color: #666;
          }
        }
      }

      .goal-actions {
        .checkin-btn {
          display: flex;
          align-items: center;
          gap: 8rpx;
          background: #FF6B9D;
          color: #fff;
          padding: 12rpx 24rpx;
          border-radius: 25rpx;
          font-size: 24rpx;

          .checkin-text {
            color: #fff;
          }
        }

        .completed-badge {
          display: flex;
          align-items: center;
          gap: 8rpx;

          .completed-text {
            font-size: 24rpx;
            color: #52c41a;
          }
        }
      }
    }
  }
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;

  .empty-action {
    margin-top: 30rpx;
    
    .create-btn {
      background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
      border: none;
      border-radius: 25rpx;
      padding: 20rpx 40rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 15rpx rgba(255, 107, 157, 0.3);
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.4);
      }
    }
  }
}

.fab-button {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 30rpx rgba(255, 107, 157, 0.3);
  z-index: 999;

  &:active {
    transform: scale(0.9);
  }
}
</style>
