<template>
  <div class="task-list-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2><ReadOutlined /> 阅读任务</h2>
        <p class="page-desc">查看全校阅读任务完成情况</p>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon total">
          <FileTextOutlined />
        </div>
        <div class="stat-info">
          <span class="stat-value">{{ stats.totalTasks }}</span>
          <span class="stat-label">全部任务</span>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon active">
          <SyncOutlined />
        </div>
        <div class="stat-info">
          <span class="stat-value">{{ stats.publishedTasks }}</span>
          <span class="stat-label">进行中</span>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon submitted">
          <CheckCircleOutlined />
        </div>
        <div class="stat-info">
          <span class="stat-value">{{ stats.submittedCount }}</span>
          <span class="stat-label">已提交</span>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon done">
          <StarFilled />
        </div>
        <div class="stat-info">
          <span class="stat-value">{{ stats.reviewedCount }}</span>
          <span class="stat-label">已评价</span>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-input-search
            v-model:value="filters.keyword"
            placeholder="搜索任务标题"
            allow-clear
            @search="loadTasks"
          />
        </a-col>
        <a-col :span="4">
          <a-select
            v-model:value="filters.type"
            placeholder="任务类型"
            style="width: 100%"
            allowClear
            @change="loadTasks"
          >
            <a-select-option value="READING">阅读</a-select-option>
            <a-select-option value="ACTIVITY">活动</a-select-option>
            <a-select-option value="HOMEWORK">作业</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
          <a-select
            v-model:value="filters.status"
            placeholder="任务状态"
            style="width: 100%"
            allowClear
            @change="loadTasks"
          >
            <a-select-option value="PUBLISHED">进行中</a-select-option>
            <a-select-option value="DRAFT">草稿</a-select-option>
            <a-select-option value="ARCHIVED">已归档</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-range-picker
            v-model:value="dateRange as any"
            style="width: 100%"
            :placeholder="['开始日期', '结束日期']"
            @change="onDateRangeChange"
          />
        </a-col>
        <a-col :span="4">
          <a-select
            v-model:value="filters.sortBy"
            placeholder="排序方式"
            style="width: 100%"
            allowClear
            @change="loadTasks"
          >
            <a-select-option value="createdAt">创建时间</a-select-option>
            <a-select-option value="startDate">开始时间</a-select-option>
            <a-select-option value="endDate">截止时间</a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </div>

    <!-- 任务列表 -->
    <a-spin :spinning="loading">
      <div class="task-list" v-if="tasks.length > 0">
        <div v-for="task in tasks" :key="task.id" class="task-card" @click="viewTaskDetail(task)">
          <div class="card-header">
            <div class="task-title">
              <a-tag :color="getTypeColor(task.taskType)">{{ getTypeText(task.taskType) }}</a-tag>
              <h3>{{ task.title }}</h3>
              <a-tag v-if="task.relatedBookName" color="purple" size="small">
                <BookOutlined /> {{ task.relatedBookName }}
              </a-tag>
            </div>
            <a-tag :color="getStatusColor(task.status)">{{ getStatusText(task.status) }}</a-tag>
          </div>

          <div class="card-body">
            <p v-if="task.description">{{ task.description }}</p>
            <div class="task-meta">
              <span v-if="task.creatorName">
                <UserOutlined /> {{ task.creatorName }}
              </span>
              <span>
                <CalendarOutlined />
                {{ formatTaskRange(task) }}
              </span>
              <span>
                <TeamOutlined /> {{ task.targetCount || 0 }} 个目标
              </span>
            </div>
          </div>

          <div class="card-footer">
            <div class="completion-stats">
              <div class="stat-item pending">
                <span class="stat-num">{{ getTaskStat(task, 'PENDING') }}</span>
                <span class="stat-label">待提交</span>
              </div>
              <div class="stat-item submitted">
                <span class="stat-num">{{ getTaskStat(task, 'SUBMITTED') }}</span>
                <span class="stat-label">已提交</span>
              </div>
              <div class="stat-item reviewed">
                <span class="stat-num">{{ getTaskStat(task, 'REVIEWED') }}</span>
                <span class="stat-label">已评价</span>
              </div>
              <a-progress
                :percent="getCompletionRate(task)"
                :stroke-color="{ '0%': '#52c41a', '100%': '#73d13d' }"
                size="small"
                style="width: 120px;"
              />
            </div>
            <div class="card-actions">
              <a-button type="primary" ghost size="small" @click.stop="viewCompletionList(task)">
                <EyeOutlined /> 查看完成情况
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-else>
        <InboxOutlined class="empty-icon" />
        <p>暂无阅读任务</p>
      </div>
    </a-spin>

    <!-- 分页 -->
    <div class="pagination-section" v-if="total > pageSize">
      <a-pagination
        v-model:current="currentPage"
        :total="total"
        :page-size="pageSize"
        @change="onPageChange"
        show-quick-jumper
        :show-total="(total: number) => `共 ${total} 条`"
      />
    </div>

    <!-- 任务详情弹窗 -->
    <a-modal
      v-model:open="taskDetailVisible"
      :title="selectedTask?.title || '任务详情'"
      :footer="null"
      width="700px"
    >
      <div class="task-detail" v-if="selectedTask">
        <a-descriptions :column="2" bordered size="small">
          <a-descriptions-item label="任务类型">
            <a-tag :color="getTypeColor(selectedTask.taskType)">{{ getTypeText(selectedTask.taskType) }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="任务状态">
            <a-tag :color="getStatusColor(selectedTask.status)">{{ getStatusText(selectedTask.status) }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="关联绘本" v-if="selectedTask.relatedBookName">
            {{ selectedTask.relatedBookName }}
          </a-descriptions-item>
          <a-descriptions-item label="创建人" v-if="selectedTask.creatorName">
            {{ selectedTask.creatorName }}
          </a-descriptions-item>
          <a-descriptions-item label="开始时间">
            {{ formatDate(selectedTask.startDate) }}
          </a-descriptions-item>
          <a-descriptions-item label="截止时间">
            {{ formatDate(selectedTask.endDate) }}
          </a-descriptions-item>
          <a-descriptions-item label="任务描述" :span="2" v-if="selectedTask.description">
            {{ selectedTask.description }}
          </a-descriptions-item>
        </a-descriptions>

        <div class="completion-summary" style="margin-top: 24px;">
          <h4>完成情况统计</h4>
          <a-row :gutter="16">
            <a-col :span="8">
              <a-statistic title="待提交" :value="completionStats.pending" />
            </a-col>
            <a-col :span="8">
              <a-statistic title="已提交" :value="completionStats.submitted" />
            </a-col>
            <a-col :span="8">
              <a-statistic title="已评价" :value="completionStats.reviewed" />
            </a-col>
          </a-row>
        </div>

        <div style="margin-top: 24px; text-align: center;">
          <a-button type="primary" @click="viewCompletionList(selectedTask)">
            <UnorderedListOutlined /> 查看完成情况列表
          </a-button>
        </div>
      </div>
    </a-modal>

    <!-- 完成情况列表弹窗 -->
    <a-modal
      v-model:open="completionModalVisible"
      :title="`完成情况 - ${selectedTask?.title || ''}`"
      width="900px"
      :footer="null"
    >
      <div class="completion-filter" style="margin-bottom: 16px;">
        <a-space>
          <a-select
            v-model:value="completionFilter.status"
            placeholder="筛选状态"
            style="width: 120px"
            allowClear
            @change="loadCompletions"
          >
            <a-select-option value="PENDING">待提交</a-select-option>
            <a-select-option value="SUBMITTED">已提交</a-select-option>
            <a-select-option value="REVIEWED">已评价</a-select-option>
          </a-select>
        </a-space>
        <div class="completion-stats-tags">
          <a-tag color="orange">{{ completionStats.pending }} 待提交</a-tag>
          <a-tag color="blue">{{ completionStats.submitted }} 已提交</a-tag>
          <a-tag color="green">{{ completionStats.reviewed }} 已评价</a-tag>
        </div>
      </div>

      <a-table
        :dataSource="completions"
        :columns="completionColumns"
        :pagination="false"
        :loading="loadingCompletions"
        rowKey="id"
        size="small"
        :scroll="{ x: 800 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'student'">
            <div class="student-cell">
              <a-avatar :size="32" :style="{ backgroundColor: record.student?.gender === 'MALE' ? '#1890ff' : '#eb2f96' }">
                {{ record.student?.name?.charAt(0) || '?' }}
              </a-avatar>
              <div class="student-info">
                <span class="name">{{ record.student?.name || '-' }}</span>
                <span class="class">{{ record.student?.classInfo?.name || '-' }}</span>
              </div>
            </div>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="getCompletionStatusColor(record.status)">
              {{ getCompletionStatusText(record.status) }}
            </a-tag>
          </template>
          <template v-if="column.key === 'submission'">
            <div class="submission-preview">
              <span v-if="record.photos?.length">
                <PictureOutlined /> {{ record.photos.length }}
              </span>
              <span v-if="record.videoUrl">
                <VideoCameraOutlined />
              </span>
              <span v-if="record.audioUrl">
                <SoundOutlined />
              </span>
              <span v-if="record.content">
                <FileTextOutlined />
              </span>
              <span v-if="!hasSubmission(record)">-</span>
            </div>
          </template>
          <template v-if="column.key === 'feedback'">
            <a-tag v-if="record.feedback" :color="getFeedbackResultColor(record.feedback.result)" size="small">
              {{ getFeedbackResultText(record.feedback.result) }}
            </a-tag>
            <span v-else class="no-feedback">-</span>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" size="small" @click="viewCompletionDetail(record)" v-if="hasSubmission(record)">
              <EyeOutlined /> 详情
            </a-button>
          </template>
        </template>
      </a-table>

      <div class="pagination-section" v-if="completionTotal > completionPageSize" style="margin-top: 16px;">
        <a-pagination
          v-model:current="completionPage"
          :total="completionTotal"
          :page-size="completionPageSize"
          size="small"
          @change="onCompletionPageChange"
        />
      </div>
    </a-modal>

    <!-- 提交详情弹窗 -->
    <a-modal
      v-model:open="completionDetailVisible"
      title="提交详情"
      width="700px"
      :footer="null"
    >
      <div class="completion-detail" v-if="selectedCompletion">
        <!-- 学生信息 -->
        <div class="student-section">
          <a-avatar :size="48" :style="{ backgroundColor: selectedCompletion.student?.gender === 'MALE' ? '#1890ff' : '#eb2f96' }">
            {{ selectedCompletion.student?.name?.charAt(0) || '?' }}
          </a-avatar>
          <div class="student-detail">
            <h3>{{ selectedCompletion.student?.name }}</h3>
            <p>{{ selectedCompletion.student?.classInfo?.name }} | {{ selectedCompletion.student?.gender === 'MALE' ? '男' : '女' }}</p>
          </div>
          <a-tag :color="getCompletionStatusColor(selectedCompletion.status)" size="large">
            {{ getCompletionStatusText(selectedCompletion.status) }}
          </a-tag>
        </div>

        <!-- 提交内容 -->
        <div class="submission-content" v-if="hasSubmission(selectedCompletion)">
          <h4><FileTextOutlined /> 提交内容</h4>

          <div class="content-section" v-if="selectedCompletion.photos?.length">
            <div class="section-label">照片</div>
            <div class="photos-grid">
              <a-image-preview-group>
                <a-image
                  v-for="(photo, idx) in selectedCompletion.photos"
                  :key="idx"
                  :src="photo"
                  :width="100"
                  :height="100"
                  style="object-fit: cover; border-radius: 8px;"
                />
              </a-image-preview-group>
            </div>
          </div>

          <div class="content-section" v-if="selectedCompletion.videoUrl">
            <div class="section-label">视频</div>
            <a :href="selectedCompletion.videoUrl" target="_blank">
              <VideoCameraOutlined /> 查看视频
            </a>
          </div>

          <div class="content-section" v-if="selectedCompletion.audioUrl">
            <div class="section-label">音频</div>
            <a :href="selectedCompletion.audioUrl" target="_blank">
              <SoundOutlined /> 收听音频
            </a>
          </div>

          <div class="content-section" v-if="selectedCompletion.content">
            <div class="section-label">阅读心得</div>
            <p class="content-text">{{ selectedCompletion.content }}</p>
          </div>

          <div class="submission-time">
            提交于: {{ formatDateTime(selectedCompletion.submittedAt) }}
          </div>
        </div>

        <!-- 教师评价 -->
        <div class="teacher-feedback-section" v-if="selectedCompletion.feedback">
          <h4><StarFilled style="color: #faad14;" /> 教师评价</h4>
          <div class="feedback-card">
            <div class="feedback-result">
              <a-tag :color="getFeedbackResultColor(selectedCompletion.feedback.result)" size="large">
                {{ getFeedbackResultText(selectedCompletion.feedback.result) }}
              </a-tag>
              <span v-if="selectedCompletion.feedback.rating" class="rating">
                <a-rate :value="selectedCompletion.feedback.rating" disabled :count="5" />
                <span class="rating-num">{{ selectedCompletion.feedback.rating }} 分</span>
              </span>
            </div>
            <div class="feedback-comment" v-if="selectedCompletion.feedback.comment">
              {{ selectedCompletion.feedback.comment }}
            </div>
            <div class="feedback-time">
              评价时间: {{ formatDateTime(selectedCompletion.feedback.createdAt) }}
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import {
  ReadOutlined,
  FileTextOutlined,
  SyncOutlined,
  CheckCircleOutlined,
  StarFilled,
  BookOutlined,
  CalendarOutlined,
  TeamOutlined,
  UserOutlined,
  EyeOutlined,
  InboxOutlined,
  PictureOutlined,
  VideoCameraOutlined,
  SoundOutlined,
  UnorderedListOutlined,
} from '@ant-design/icons-vue';
import {
  getReadingTaskList,
  getReadingTaskCompletions,
  getCompletionDetail,
  type SchoolTask,
  type TaskCompletionRecord,
  type TaskCompletionStatus,
} from '@/api/school';
import dayjs, { Dayjs } from 'dayjs';
import { translateTaskCompletionStatus, getTaskCompletionStatusStyle } from '@/utils/tagMaps';

const loading = ref(false);
const tasks = ref<SchoolTask[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

// 筛选条件
const filters = reactive({
  keyword: undefined as string | undefined,
  type: undefined as string | undefined,
  status: undefined as string | undefined,
  sortBy: 'createdAt' as string,
});
const dateRange = ref<[Dayjs, Dayjs] | null>(null);

// 统计数据
const stats = reactive({
  totalTasks: 0,
  publishedTasks: 0,
  submittedCount: 0,
  reviewedCount: 0,
});

// 任务详情
const taskDetailVisible = ref(false);
const selectedTask = ref<SchoolTask | null>(null);

// 完成情况列表
const completionModalVisible = ref(false);
const completions = ref<TaskCompletionRecord[]>([]);
const completionTotal = ref(0);
const completionPage = ref(1);
const completionPageSize = ref(10);
const loadingCompletions = ref(false);
const completionFilter = reactive({
  status: undefined as string | undefined,
});
const completionStats = reactive({
  pending: 0,
  submitted: 0,
  reviewed: 0,
});

// 提交详情
const completionDetailVisible = ref(false);
const selectedCompletion = ref<TaskCompletionRecord | null>(null);

// 表格列定义
const completionColumns = [
  { title: '学生', key: 'student', width: 180 },
  { title: '状态', key: 'status', width: 100 },
  { title: '提交内容', key: 'submission', width: 120 },
  { title: '教师评价', key: 'feedback', width: 100 },
  { title: '操作', key: 'action', width: 80, fixed: 'right' as const },
];

// 类型/状态映射 - 使用统一工具函数
const typeColors: Record<string, string> = {
  READING: 'blue',
  ACTIVITY: 'green',
  HOMEWORK: 'orange',
};

const typeTexts: Record<string, string> = {
  READING: '阅读',
  ACTIVITY: '活动',
  HOMEWORK: '作业',
};

const statusColors: Record<string, string> = {
  PUBLISHED: 'green',
  ACTIVE: 'green',
  PENDING: 'orange',
  COMPLETED: 'blue',
  DRAFT: 'default',
  ARCHIVED: 'default',
};

const statusTexts: Record<string, string> = {
  PUBLISHED: '进行中',
  ACTIVE: '进行中',
  PENDING: '待审核',
  COMPLETED: '已完成',
  DRAFT: '草稿',
  ARCHIVED: '已归档',
};

const getTypeColor = (type: string) => typeColors[type] || 'default';
const getTypeText = (type: string) => typeTexts[type] || type;
const getStatusColor = (status: string) => statusColors[status] || 'default';
const getStatusText = (status: string) => statusTexts[status] || status;

// 任务完成状态 - 使用统一工具函数
const getCompletionStatusColor = (status: string) => {
  const style = getTaskCompletionStatusStyle(status);
  const colorMap: Record<string, string> = {
    '待提交': 'orange',
    '已提交': 'blue',
    '已评价': 'green',
  };
  return colorMap[translateTaskCompletionStatus(status)] || 'default';
};
const getCompletionStatusText = (status: string) => translateTaskCompletionStatus(status);

const feedbackResultColors: Record<string, string> = {
  EXCELLENT: 'gold',
  PASSED: 'green',
  NEEDS_WORK: 'orange',
};

const feedbackResultTexts: Record<string, string> = {
  EXCELLENT: '优秀',
  PASSED: '通过',
  NEEDS_WORK: '需改进',
};
const getFeedbackResultColor = (result: string) => feedbackResultColors[result] || 'default';
const getFeedbackResultText = (result: string) => feedbackResultTexts[result] || result;

const formatDate = (date?: string | number[] | null) => {
  if (date == null || date === '') return '-';
  if (Array.isArray(date) && date.length >= 3) {
    const [y, m, d] = date;
    return dayjs(`${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`).format('YYYY-MM-DD');
  }
  return dayjs(date as string).format('YYYY-MM-DD');
};

/** 列表展示：与后端 startDate/endDate 对齐，避免仅一端有值时出现「日期 --」 */
const formatTaskRange = (task: SchoolTask) => {
  const s = formatDate(task.startDate as any);
  const e = formatDate((task as any).endDate ?? (task as any).dueDate);
  if (e === '-') return s;
  if (s === '-') return e;
  return `${s} 至 ${e}`;
};

const formatDateTime = (date?: string) => date ? dayjs(date).format('YYYY-MM-DD HH:mm') : '-';

// 模拟任务统计数据（实际应该从后端获取）
const getTaskStat = (task: SchoolTask, status: TaskCompletionStatus): number => {
  // 这里应该从后端获取，暂时返回模拟数据
  if (status === 'PENDING') return Math.max(0, (task.targetCount || 0) - (task.completionCount || 0));
  if (status === 'SUBMITTED') return task.completionCount || 0;
  if (status === 'REVIEWED') return Math.floor((task.completionCount || 0) * 0.6);
  return 0;
};

const getCompletionRate = (task: SchoolTask) => {
  if (!task.targetCount) return 0;
  return Math.round(((task.completionCount || 0) / task.targetCount) * 100);
};

const hasSubmission = (record: any): boolean => {
  return !!(record.photos?.length || record.videoUrl || record.audioUrl || record.content);
};

// 加载任务列表
const loadTasks = async () => {
  loading.value = true;
  try {
    const params: any = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      keyword: filters.keyword,
      type: filters.type,
      status: filters.status,
      sortBy: filters.sortBy,
      sortOrder: 'desc',
    };

    if (dateRange.value) {
      params.startDate = dateRange.value[0].format('YYYY-MM-DD');
      params.endDate = dateRange.value[1].format('YYYY-MM-DD');
    }

    const result = await getReadingTaskList(params);
    tasks.value = result.items;
    total.value = result.total;

    // 更新统计
    stats.totalTasks = result.total;
    stats.publishedTasks = tasks.value.filter(t => t.status === 'PUBLISHED').length;
  } catch (error: any) {
    message.error(error.response?.data?.message || '获取任务列表失败');
  } finally {
    loading.value = false;
  }
};

const onDateRangeChange = () => {
  loadTasks();
};

const onPageChange = (page: number) => {
  currentPage.value = page;
  loadTasks();
};

// 查看任务详情
const viewTaskDetail = async (task: SchoolTask) => {
  selectedTask.value = task;
  taskDetailVisible.value = true;

  // 加载完成统计
  await loadCompletionStats(task.id);
};

// 加载完成统计
const loadCompletionStats = async (taskId: number) => {
  try {
    const result = await getReadingTaskCompletions(taskId, { pageSize: 1000 });
    const items = result.items;

    completionStats.pending = items.filter(c => c.status === 'PENDING').length;
    completionStats.submitted = items.filter(c => c.status === 'SUBMITTED').length;
    completionStats.reviewed = items.filter(c => c.status === 'REVIEWED').length;

    stats.submittedCount = completionStats.submitted;
    stats.reviewedCount = completionStats.reviewed;
  } catch (error) {
    console.error('加载完成统计失败', error);
  }
};

// 查看完成情况列表
const viewCompletionList = async (task: SchoolTask) => {
  selectedTask.value = task;
  completionModalVisible.value = true;
  completionPage.value = 1;
  completionFilter.status = undefined;
  taskDetailVisible.value = false;
  loadCompletions();
};

// 加载完成情况
const loadCompletions = async () => {
  if (!selectedTask.value) return;

  loadingCompletions.value = true;
  try {
    const result = await getReadingTaskCompletions(selectedTask.value.id, {
      pageNum: completionPage.value,
      pageSize: completionPageSize.value,
      status: completionFilter.status,
    });

    completions.value = result.items;
    completionTotal.value = result.total;

    // 更新统计
    if (completionPage.value === 1 && !completionFilter.status) {
      completionStats.pending = result.items.filter(c => c.status === 'PENDING').length;
      completionStats.submitted = result.items.filter(c => c.status === 'SUBMITTED').length;
      completionStats.reviewed = result.items.filter(c => c.status === 'REVIEWED').length;
    }
  } catch (error: any) {
    message.error(error.response?.data?.message || '获取完成情况失败');
  } finally {
    loadingCompletions.value = false;
  }
};

const onCompletionPageChange = (page: number) => {
  completionPage.value = page;
  loadCompletions();
};

// 查看提交详情
const viewCompletionDetail = async (record: any) => {
  try {
    const detail = await getCompletionDetail(record.id);
    selectedCompletion.value = detail;
    completionDetailVisible.value = true;
  } catch (error: any) {
    message.error(error.response?.data?.message || '获取详情失败');
  }
};

onMounted(() => {
  loadTasks();
});
</script>

<style scoped lang="scss">
.task-list-view {
  padding: 24px;
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFFFFF 100%);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;

    .header-left {
      h2 {
        margin: 0 0 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 24px;
        font-weight: 600;
        color: #333;
      }

      .page-desc {
        margin: 0;
        color: #999;
        font-size: 14px;
      }
    }
  }

  .stats-cards {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;

    .stat-card {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;

        &.total { background: #e6f7ff; color: #1890ff; }
        &.active { background: #fff7e6; color: #fa8c16; }
        &.submitted { background: #f0f5ff; color: #2f54eb; }
        &.done { background: #f6ffed; color: #52c41a; }
      }

      .stat-info {
        .stat-value {
          display: block;
          font-size: 28px;
          font-weight: 600;
          color: #333;
        }
        .stat-label {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }

  .filter-section {
    margin-bottom: 24px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .task-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .task-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: #1890ff;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .task-title {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;

        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
      }
    }

    .card-body {
      margin-bottom: 12px;

      p {
        color: #666;
        margin: 0 0 12px;
        line-height: 1.6;
      }

      .task-meta {
        display: flex;
        gap: 24px;
        color: #999;
        font-size: 13px;

        span {
          display: flex;
          align-items: center;
          gap: 6px;
        }
      }
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid #f0f0f0;

      .completion-stats {
        display: flex;
        align-items: center;
        gap: 16px;

        .stat-item {
          text-align: center;

          .stat-num {
            display: block;
            font-size: 18px;
            font-weight: 600;
          }
          .stat-label {
            font-size: 12px;
            color: #999;
          }

          &.pending .stat-num { color: #fa8c16; }
          &.submitted .stat-num { color: #1890ff; }
          &.reviewed .stat-num { color: #52c41a; }
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    background: white;
    border-radius: 12px;

    .empty-icon {
      font-size: 64px;
      color: #d9d9d9;
      margin-bottom: 16px;
    }
  }

  .pagination-section {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
}

// 完成情况筛选
.completion-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;

  .completion-stats-tags {
    display: flex;
    gap: 8px;
  }
}

// 学生单元格
.student-cell {
  display: flex;
  align-items: center;
  gap: 12px;

  .student-info {
    .name {
      display: block;
      font-weight: 500;
    }
    .class {
      font-size: 12px;
      color: #999;
    }
  }
}

// 提交预览
.submission-preview {
  display: flex;
  gap: 8px;

  span {
    color: #1890ff;
  }
}

.no-feedback {
  color: #bfbfbf;
}

// 提交详情弹窗
.completion-detail {
  .student-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;

    .student-detail {
      flex: 1;

      h3 {
        margin: 0 0 4px;
      }
      p {
        margin: 0;
        color: #999;
        font-size: 13px;
      }
    }
  }

  .submission-content {
    h4 {
      margin: 0 0 16px;
      color: #333;
    }

    .content-section {
      margin-bottom: 16px;

      .section-label {
        font-size: 13px;
        color: #999;
        margin-bottom: 8px;
      }

      a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }
    }

    .photos-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .content-text {
      background: #fafafa;
      padding: 12px;
      border-radius: 8px;
      line-height: 1.6;
      white-space: pre-wrap;
      margin: 0;
    }

    .submission-time {
      font-size: 12px;
      color: #999;
      margin-top: 12px;
    }
  }

  .teacher-feedback-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;

    h4 {
      margin: 0 0 16px;
    }

    .feedback-card {
      background: #fffbe6;
      border-radius: 8px;
      padding: 16px;

      .feedback-result {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 12px;

        .rating {
          display: flex;
          align-items: center;
          gap: 8px;

          .rating-num {
            color: #faad14;
          }
        }
      }

      .feedback-comment {
        line-height: 1.6;
        margin-bottom: 12px;
      }

      .feedback-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
