<template>
  <StudyPlanLayout category-name="学习任务">
    <!-- 主要内容区 -->
    <div class="main-content">
      <div class="container">
        <!-- 任务进度 -->
        <h2 class="section-title">任务进度</h2>
        <div class="progress-card">
          <div class="progress-info">
            <div class="progress-header">
              <span class="progress-text">当前学习进度（{{ completedCount }}/{{ totalCount }}）</span>
              <span class="progress-percent">{{ progressPercent }}%</span>
              <span class="progress-level">{{ userLevel }}</span>
            </div>
            <div class="progress-bar-container">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: progressPercent + '%' }"></div>
              </div>
            </div>
          </div>
          
          <div class="task-stats">
            <div class="stat-card pending">
              <div class="stat-content">
                <div class="stat-title">待完成任务</div>
                <div class="stat-number">{{ pendingCount }}</div>
              </div>
              <div class="stat-icon pending-icon">
                <el-icon><DocumentCopy /></el-icon>
              </div>
            </div>
            
            <div class="stat-card completed">
              <div class="stat-content">
                <div class="stat-title">已完成任务</div>
                <div class="stat-number">{{ completedCount }}</div>
              </div>
              <div class="stat-icon completed-icon">
                <el-icon><DocumentChecked /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 任务列表 -->
        <h2 class="section-title">任务列表</h2>
        
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="6" animated />
        </div>
        
        <div v-else-if="taskList.length > 0" class="task-grid">
          <div
            v-for="task in taskList"
            :key="task.taskID"
            class="task-card"
            @click="handleTaskClick(task)"
          >
            <!-- 内容容器 -->
            <div class="task-content">
              <!-- 状态标签（小标签，自适应宽度） -->
              <div 
                class="status-tag"
                :class="{
                  'status-pending': task.status === 0,
                  'status-processing': task.status === 1,
                  'status-completed': task.status === 2
                }"
              >
                {{ task.status === 0 ? '待完成' : task.status === 1 ? '进行中' : '已完成' }}
              </div>

              <!-- 任务标题 -->
              <h3 class="task-title">{{ task.name }}</h3>

              <!-- 任务描述 -->
              <p class="task-desc">{{ task.description || '暂无描述' }}</p>

              <!-- 任务底部信息 -->
              <div class="task-footer">
                <span class="task-time">
                  任务时间：{{ formatDate(task.startTime) }}-{{ formatDate(task.endTime) }}
                </span>
                <div 
                  v-if="getDeadlineStatus(task).show"
                  class="deadline-tag"
                  :class="{
                    'deadline-danger': getDeadlineStatus(task).type === 'danger',
                    'deadline-info': getDeadlineStatus(task).type === 'info',
                    'deadline-success': getDeadlineStatus(task).type === 'success',
                    'deadline-primary': getDeadlineStatus(task).type === 'primary',
                  }"
                >
                  {{ getDeadlineStatus(task).text }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="empty-state">
          <el-empty description="暂无学习任务" />
        </div>
      </div>
    </div>
  </StudyPlanLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { DocumentCopy, DocumentChecked } from '@element-plus/icons-vue';
import { useStore } from 'vuex';
import { learningTaskApi } from '@/apis/study';
import type { LearningTask, TaskItemVO } from '@/types';
import { StudyPlanLayout } from '@/views/study-plan';

defineOptions({
  name: 'StudyTasksView'
});

const router = useRouter();
const store = useStore();
const loading = ref(false);
const taskList = ref<LearningTask[]>([]);

// 统计数据
const totalCount = ref(0);
const completedCount = ref(0);
const pendingCount = ref(0);
const userLevel = ref('Level1');

// 计算进度百分比
const progressPercent = computed(() => {
  if (totalCount.value === 0) return 0;
  return Math.round((completedCount.value / totalCount.value) * 100);
});

onMounted(() => {
  loadUserProgress();
  loadTaskList();
});

// 获取当前用户ID
const getUserID = () => {
  const userInfo = store.getters['auth/user'];
  return userInfo?.id || '';
};

// 加载任务列表（用户视角）
async function loadTaskList() {
  loading.value = true;
  try {
    const userID = getUserID();
    if (!userID) {
      ElMessage.warning('请先登录');
      loading.value = false;
      return;
    }

    // 调用用户任务分页接口
    const pageParam = {
      page: 1,
      size: 100 // 获取所有任务，不做分页
    };
    
    const filter: TaskItemVO = {
      userID
    };

    const res = await learningTaskApi.getUserTaskPage(pageParam, filter);
    
    if (res.success && res.dataList) {
      taskList.value = res.dataList;
    } else {
      ElMessage.error(res.message || '加载学习任务失败');
    }
  } catch (error: any) {
    console.error('加载学习任务失败:', error);
    ElMessage.error(error?.message || '加载学习任务失败');
  } finally {
    loading.value = false;
  }
}

// 加载用户进度统计数据
async function loadUserProgress() {
  try {
    const userID = getUserID();
    if (!userID) {
      return;
    }

    const res = await learningTaskApi.getUserProgress(userID);
    
    if (res.success && res.data) {
      const progressData = res.data;
      const pending = (progressData.notStartTaskNum || 0) + (progressData.learningTaskNum || 0);
      // 设置统计数据
      totalCount.value = progressData.totalTaskNum || 0;
      pendingCount.value = pending;
    }
  } catch (error) {
    console.error('加载用户进度失败:', error);
    // 不显示错误消息，使用从任务列表计算的统计数据即可
  }
}


// 点击任务卡片
function handleTaskClick(task: LearningTask) {
  if (!task.taskID) {
    ElMessage.warning('任务ID不存在');
    return;
  }
  
  // 使用路由跳转到任务详情页
  router.push({
    path: '/study-plan/task-detail',
    query: {
      taskId: task.taskID
    }
  });
}

// 格式化日期
function formatDate(dateString?: string): string {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}`;
}

// 获取截止时间状态
function getDeadlineStatus(task: LearningTask): { show: boolean; text: string; type: 'danger' | 'info' | 'success' | 'primary' } {
  if (!task.endTime) {
    return { show: false, text: '', type: 'primary' };
  }
  
  const now = new Date();
  const endTime = new Date(task.endTime);
  const diffTime = endTime.getTime() - now.getTime();
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
  if (task.status === 2) {
    // 已完成
    return { show: true, text: '已截止', type: 'success' };
  } else if (diffDays < 0) {
    // 已过期
    return { show: true, text: '已截止', type: 'info' };
  } else if (diffDays <= 8) {
    // 即将截止
    return { show: true, text: `${diffDays}天后截止`, type: 'danger' };
  }
  
  return { show: true, text: `${diffDays}天后截止`, type: 'primary' };
}
</script>

<style lang="scss" scoped>
.main-content {
  padding: 40px 0 80px;
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
}

.section-title {
  font-size: 28px;
  font-weight: 600;
  color: #141F38;
  margin: 0 0 20px 0;
}

// 进度卡片
.progress-card {
  background: #fff;
  border-radius: 10px;
  padding: 50px;
  margin-bottom: 60px;
  box-shadow: 0 17px 22.4px rgba(164, 182, 199, 0.1);
  
  .progress-info {
    margin-bottom: 40px;
    
    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      
      .progress-text {
        font-size: 16px;
        font-weight: 500;
        color: #334155;
      }
      
      .progress-percent {
        font-size: 16px;
        font-weight: 500;
        color: #C62828;
      }
      
      .progress-level {
        font-size: 16px;
        font-weight: 500;
        color: #334155;
      }
    }
    
    .progress-bar-container {
      .progress-bar {
        width: 100%;
        height: 12px;
        background: #F7F8F9;
        border-radius: 27px;
        overflow: hidden;
        
        .progress-fill {
          height: 100%;
          background: linear-gradient(143deg, #FD9082 1%, #FD6D78 99%);
          border-radius: 27px;
          transition: width 0.3s ease;
        }
      }
    }
  }
  
  .task-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    
    .stat-card {
      background: #FFFDFD;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      padding: 30px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      &.pending {
        .stat-icon {
          background: #FFF5F4;
          
          :deep(.el-icon) {
            font-size: 44px;
            background: linear-gradient(143deg, #FD9082 1%, #FD6D78 99%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
        }
      }
      
      &.completed {
        background: #FBFDFF;
        
        .stat-icon {
          background: #EFF8FF;
          
          :deep(.el-icon) {
            font-size: 44px;
            background: linear-gradient(143deg, #82B7FD 1%, #2F6AFF 99%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
        }
      }
      
      .stat-content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 30px;
        
        .stat-title {
          font-size: 20px;
          font-weight: 600;
          color: #141F38;
          text-align: right;
          width: 100px;
        }
        
        .stat-number {
          font-size: 40px;
          font-weight: 600;
          line-height: 0.95;
          color: #334155;
          width: 100px;
        }
      }
      
      .stat-icon {
        width: 77px;
        height: 77px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

// 任务列表
.loading-container {
  padding: 40px 0;
}

.task-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.task-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 40px;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 278px;
  
  &:hover {
    box-shadow: 0 8px 20px rgba(164, 182, 199, 0.2);
    transform: translateY(-2px);
  }
  
  .task-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    
    // 状态标签 - 小标签，自适应宽度
    .status-tag {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5714285714285714;
      border-radius: 2px;
      
      // 待完成 - 红色
      &.status-pending {
        background-color: #FFECE8;
        color: #F53F3F;
      }
      
      // 进行中 - 蓝色
      &.status-processing {
        background-color: #E8F7FF;
        color: #3491FA;
      }
      
      // 已完成 - 绿色
      &.status-completed {
        background-color: #E8FFEA;
        color: #00B42A;
      }
    }
  }
  
  .task-title {
    font-size: 20px;
    font-weight: 600;
    color: #141F38;
    margin: 0;
    line-height: 1.4;
  }
  
  .task-desc {
    font-size: 14px;
    font-weight: 400;
    color: #334155;
    line-height: 1.5714285714285714;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    
    .task-time {
      font-size: 14px;
      font-weight: 400;
      color: #979797;
      line-height: 1.5714285714285714;
      flex: 1;
    }
    
    // 截止时间标签
    .deadline-tag {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.6666666666666667;
      border-radius: 2px;
      border: 1px solid;
      background-color: transparent;
      
      // 即将截止 - 红色边框
      &.deadline-danger {
        border-color: #F53F3F;
        color: #F53F3F;
      }
      
      // 已截止 - 灰色边框
      &.deadline-info {
        border-color: #979797;
        color: #979797;
      }
      // 已完成 - 绿色边框
      &.deadline-success {
        border-color: #00B42A;
        color: #00B42A;
      }
      // 进行中 - 蓝色边框
      &.deadline-primary {
        border-color: #3491FA;
        color: #3491FA;
      }
    }
  }
}

.empty-state {
  padding: 80px 0;
  text-align: center;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style>
