<template>
  <div class="lesson-list-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>上课记录</h2>
      <p class="page-desc">查看您的授课历史和课堂记录</p>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <a-space :size="16">
        <a-select
          v-model:value="filters.status"
          placeholder="课程状态"
          style="width: 140px;"
          allowClear
          @change="loadLessons"
        >
          <a-select-option value="PLANNED">已计划</a-select-option>
          <a-select-option value="IN_PROGRESS">进行中</a-select-option>
          <a-select-option value="COMPLETED">已完成</a-select-option>
          <a-select-option value="CANCELLED">已取消</a-select-option>
        </a-select>
        <a-range-picker
          v-model:value="filters.dateRange"
          style="width: 260px;"
          @change="loadLessons"
        />
        <a-button @click="resetFilters">重置</a-button>
      </a-space>
    </div>

    <!-- 记录列表 -->
    <a-spin :spinning="loading">
      <div class="lesson-list" v-if="lessons.length > 0">
        <div
          v-for="lesson in lessons"
          :key="lesson.id"
          class="lesson-card"
          @click="viewDetail(lesson)"
        >
          <div class="card-left">
            <div class="lesson-status" :class="getStatusClass(lesson.status)">
              {{ getStatusText(lesson.status) }}
            </div>
          </div>
          <div class="card-content">
            <div class="card-header">
              <h3 class="course-name">{{ lesson.course?.name || '未知课程' }}</h3>
              <span class="lesson-time">
                <ClockCircleOutlined />
                {{ formatDateTime(lesson.startDatetime || lesson.plannedDatetime) }}
              </span>
            </div>
            <div class="card-body">
              <div class="info-item">
                <TeamOutlined />
                <span>{{ lesson.class?.name || '未知班级' }}</span>
              </div>
              <div class="info-item" v-if="lesson.actualDuration">
                <FieldTimeOutlined />
                <span>实际时长: {{ lesson.actualDuration }} 分钟</span>
              </div>
              <div class="info-item" v-if="lesson.overallRating">
                <StarOutlined />
                <a-rate :value="Number(lesson.overallRating)" disabled :count="5" style="font-size: 12px;" />
              </div>
            </div>
            <div class="card-footer" v-if="lesson.completionNote">
              <FileTextOutlined />
              <span class="note-preview">{{ lesson.completionNote }}</span>
            </div>
          </div>
          <div class="card-action">
            <RightOutlined />
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-else>
        <InboxOutlined class="empty-icon" />
        <p>暂无上课记录</p>
        <p class="empty-hint">完成授课后，记录将显示在这里</p>
      </div>
    </a-spin>

    <!-- 分页 -->
    <div class="pagination-section" v-if="total > pageSize">
      <a-pagination
        v-model:current="currentPage"
        :total="total"
        :page-size="pageSize"
        show-size-changer
        :page-size-options="['10', '20', '50']"
        @change="onPageChange"
        @showSizeChange="onPageSizeChange"
      />
    </div>

    <!-- 详情抽屉 -->
    <a-drawer
      v-model:open="detailDrawerVisible"
      title="授课记录详情"
      placement="right"
      :width="520"
    >
      <div class="detail-content" v-if="selectedLesson">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="课程名称">
            {{ selectedLesson.course?.name }}
          </a-descriptions-item>
          <a-descriptions-item label="授课班级">
            {{ selectedLesson.class?.name }}
          </a-descriptions-item>
          <a-descriptions-item label="课程状态">
            <a-tag :color="getStatusColor(selectedLesson.status)">
              {{ getStatusText(selectedLesson.status) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="计划时间">
            {{ formatDateTime(selectedLesson.plannedDatetime) }}
          </a-descriptions-item>
          <a-descriptions-item label="开始时间" v-if="selectedLesson.startDatetime">
            {{ formatDateTime(selectedLesson.startDatetime) }}
          </a-descriptions-item>
          <a-descriptions-item label="结束时间" v-if="selectedLesson.endDatetime">
            {{ formatDateTime(selectedLesson.endDatetime) }}
          </a-descriptions-item>
          <a-descriptions-item label="实际时长" v-if="selectedLesson.actualDuration">
            {{ selectedLesson.actualDuration }} 分钟
          </a-descriptions-item>
        </a-descriptions>

        <!-- 评价信息 -->
        <div class="rating-section" v-if="selectedLesson.status === 'COMPLETED'">
          <h4>课堂评价</h4>
          <div class="rating-item" v-if="selectedLesson.overallRating">
            <span class="rating-label">整体评分</span>
            <a-rate :value="Number(selectedLesson.overallRating)" disabled />
          </div>
          <div class="rating-item" v-if="selectedLesson.participationRating">
            <span class="rating-label">参与度评分</span>
            <a-rate :value="Number(selectedLesson.participationRating)" disabled />
          </div>
          <div class="note-section" v-if="selectedLesson.completionNote">
            <h4>课堂备注</h4>
            <p class="note-content">{{ selectedLesson.completionNote }}</p>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-section">
          <!-- 已计划状态 -->
          <template v-if="selectedLesson.status === 'PLANNED'">
            <a-button type="primary" block @click="startPlannedLesson" style="margin-bottom: 12px;">
              开始上课
            </a-button>
            <a-button block @click="goToPrepare" style="margin-bottom: 12px;">
              进入备课
            </a-button>
            <a-button danger block @click="cancelLesson">
              取消预约
            </a-button>
          </template>
          <!-- 进行中状态 -->
          <a-button
            v-if="selectedLesson.status === 'IN_PROGRESS'"
            type="primary"
            block
            @click="goToLesson"
          >
            继续上课
          </a-button>
          <!-- 已完成状态 -->
          <a-button
            v-if="selectedLesson.status === 'COMPLETED'"
            type="primary"
            block
            @click="goToRecords"
            style="margin-bottom: 12px;"
          >
            课后记录
          </a-button>
          <a-button
            v-if="selectedLesson.status === 'COMPLETED'"
            block
            @click="goToCourseDetail"
          >
            查看课程
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {
  ClockCircleOutlined,
  TeamOutlined,
  FieldTimeOutlined,
  StarOutlined,
  FileTextOutlined,
  RightOutlined,
  InboxOutlined,
} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import * as teacherApi from '@/api/teacher';
import dayjs from 'dayjs';

const router = useRouter();
const loading = ref(false);
const lessons = ref<any[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

const filters = reactive({
  status: undefined as string | undefined,
  dateRange: undefined as [dayjs.Dayjs, dayjs.Dayjs] | undefined,
});

const detailDrawerVisible = ref(false);
const selectedLesson = ref<any>(null);

// 状态映射
const statusMap: Record<string, { text: string; color: string; class: string }> = {
  PLANNED: { text: '已计划', color: 'blue', class: 'status-planned' },
  IN_PROGRESS: { text: '进行中', color: 'orange', class: 'status-progress' },
  COMPLETED: { text: '已完成', color: 'green', class: 'status-completed' },
  CANCELLED: { text: '已取消', color: 'default', class: 'status-cancelled' },
};

const getStatusText = (status: string) => statusMap[status]?.text || status;
const getStatusColor = (status: string) => statusMap[status]?.color || 'default';
const getStatusClass = (status: string) => statusMap[status]?.class || '';

const formatDateTime = (date: string | Date | null) => {
  if (!date) return '-';
  return dayjs(date).format('YYYY-MM-DD HH:mm');
};

const loadLessons = async () => {
  loading.value = true;
  try {
    const params: any = {
      page: currentPage.value,
      pageSize: pageSize.value,
    };
    if (filters.status) {
      params.status = filters.status;
    }

    const data = await teacherApi.getLessons(params);
    lessons.value = data.items || [];
    total.value = data.total || 0;
  } catch (error: any) {
    message.error(error.response?.data?.message || '获取上课记录失败');
  } finally {
    loading.value = false;
  }
};

const resetFilters = () => {
  filters.status = undefined;
  filters.dateRange = null;
  currentPage.value = 1;
  loadLessons();
};

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

const onPageSizeChange = (current: number, size: number) => {
  currentPage.value = 1;
  pageSize.value = size;
  loadLessons();
};

const viewDetail = (lesson: any) => {
  selectedLesson.value = lesson;
  detailDrawerVisible.value = true;
};

const goToPrepare = () => {
  if (selectedLesson.value?.course?.id) {
    router.push(`/teacher/courses/${selectedLesson.value.course.id}/prepare`);
    detailDrawerVisible.value = false;
  }
};

const goToLesson = () => {
  if (selectedLesson.value?.id) {
    router.push(`/teacher/lessons/${selectedLesson.value.id}`);
    detailDrawerVisible.value = false;
  }
};

const goToRecords = () => {
  if (selectedLesson.value?.id) {
    router.push(`/teacher/lessons/${selectedLesson.value.id}/records`);
    detailDrawerVisible.value = false;
  }
};

const goToCourseDetail = () => {
  if (selectedLesson.value?.course?.id) {
    router.push(`/teacher/courses/${selectedLesson.value.course.id}`);
    detailDrawerVisible.value = false;
  }
};

// 开始已预约的课程
const startPlannedLesson = async () => {
  if (!selectedLesson.value?.id) return;

  Modal.confirm({
    title: '开始上课',
    content: '确认要开始上课吗？',
    okText: '确认开始',
    cancelText: '取消',
    onOk: async () => {
      try {
        await teacherApi.startLesson(selectedLesson.value.id);
        message.success('正在进入课堂...');
        detailDrawerVisible.value = false;
        router.push(`/teacher/lessons/${selectedLesson.value.id}`);
      } catch (error: any) {
        message.error(error.response?.data?.message || '开始上课失败');
      }
    },
  });
};

// 取消预约
const cancelLesson = () => {
  if (!selectedLesson.value?.id) return;

  Modal.confirm({
    title: '取消预约',
    content: '确定要取消这个预约吗？取消后可以在"上课记录"中查看。',
    okText: '确认取消',
    cancelText: '返回',
    okType: 'danger',
    onOk: async () => {
      try {
        await teacherApi.cancelLesson(selectedLesson.value.id);
        message.success('预约已取消');
        detailDrawerVisible.value = false;
        loadLessons();
      } catch (error: any) {
        message.error(error.response?.data?.message || '取消失败');
      }
    },
  });
};

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

<style scoped lang="scss">
.lesson-list-view {
  .page-header {
    margin-bottom: 24px;

    h2 {
      margin: 0 0 8px 0;
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }

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

  .filter-section {
    margin-bottom: 20px;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
  }

  .lesson-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .lesson-card {
    display: flex;
    align-items: stretch;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      border-color: #FF8C42;
      box-shadow: 0 4px 12px rgba(255, 140, 66, 0.1);

      .card-action {
        color: #FF8C42;
      }
    }

    .card-left {
      display: flex;
      align-items: center;
      padding-right: 16px;

      .lesson-status {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;

        &.status-planned {
          background: #E3F2FD;
          color: #1976D2;
        }

        &.status-progress {
          background: #FFF3E0;
          color: #F57C00;
        }

        &.status-completed {
          background: #E8F5E9;
          color: #388E3C;
        }

        &.status-cancelled {
          background: #F5F5F5;
          color: #999;
        }
      }
    }

    .card-content {
      flex: 1;
      min-width: 0;

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

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

        .lesson-time {
          font-size: 13px;
          color: #999;
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }

      .card-body {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 8px;

        .info-item {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 13px;
          color: #666;

          .anticon {
            color: #999;
          }
        }
      }

      .card-footer {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding-top: 8px;
        border-top: 1px dashed #f0f0f0;
        font-size: 13px;
        color: #999;

        .anticon {
          margin-top: 2px;
        }

        .note-preview {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .card-action {
      display: flex;
      align-items: center;
      padding-left: 16px;
      color: #d9d9d9;
      font-size: 16px;
      transition: color 0.2s;
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;

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

    p {
      margin: 4px 0;
    }

    .empty-hint {
      font-size: 13px;
      color: #bfbfbf;
    }
  }

  .pagination-section {
    margin-top: 24px;
    text-align: center;
  }
}

// 详情抽屉样式
.detail-content {
  .rating-section {
    margin-top: 24px;

    h4 {
      margin: 0 0 12px 0;
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }

    .rating-item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;

      .rating-label {
        width: 100px;
        font-size: 13px;
        color: #666;
      }
    }
  }

  .note-section {
    margin-top: 24px;

    h4 {
      margin: 0 0 12px 0;
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }

    .note-content {
      padding: 12px;
      background: #fafafa;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.6;
      color: #666;
      white-space: pre-wrap;
    }
  }

  .action-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
  }
}
</style>
