<template>
  <div class="lesson-history-view">
    <div class="page-header">
      <div class="header-left">
        <h2>
          <BookOutlined /> 阅读记录
        </h2>
        <p class="page-desc">查看孩子的阅读学习记录</p>
      </div>
      <a-select
        v-if="children.length > 1"
        v-model:value="selectedChildId"
        placeholder="选择孩子"
        style="width: 140px;"
        @change="onChildChange"
      >
        <a-select-option v-for="c in children" :key="c.id" :value="c.id">
          {{ c.name }}
        </a-select-option>
      </a-select>
    </div>

    <a-spin :spinning="loading">
      <div class="lesson-list" v-if="records.length > 0">
        <div v-for="record in records" :key="record.id" class="lesson-card">
          <div class="card-header">
            <div class="course-info">
              <h3>{{ record.lesson.course?.name }}</h3>
              <span class="picture-book" v-if="record.lesson.course?.pictureBookName">
                《{{ record.lesson.course.pictureBookName }}》
              </span>
            </div>
            <div class="lesson-date">
              <ClockCircleOutlined />
              {{ formatDateTime(record.lesson.startDatetime) }}
            </div>
          </div>

          <div class="card-body">
            <div class="rating-grid">
              <div class="rating-item" v-if="record.focus">
                <span class="label">专注度</span>
                <a-rate :value="record.focus" disabled allow-half />
              </div>
              <div class="rating-item" v-if="record.participation">
                <span class="label">参与度</span>
                <a-rate :value="record.participation" disabled allow-half />
              </div>
              <div class="rating-item" v-if="record.interest">
                <span class="label">兴趣度</span>
                <a-rate :value="record.interest" disabled allow-half />
              </div>
              <div class="rating-item" v-if="record.understanding">
                <span class="label">理解度</span>
                <a-rate :value="record.understanding" disabled allow-half />
              </div>
            </div>

            <div class="notes" v-if="record.notes">
              <FileTextOutlined />
              <span>{{ record.notes }}</span>
            </div>
          </div>

          <div class="card-footer" v-if="record.lesson.actualDuration">
            <FieldTimeOutlined />
            <span>课程时长: {{ record.lesson.actualDuration }} 分钟</span>
          </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" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  BookOutlined,
  ClockCircleOutlined,
  FieldTimeOutlined,
  FileTextOutlined,
  InboxOutlined,
} from '@ant-design/icons-vue';
import { getChildLessons, getChildren, type LessonRecord, type ChildInfo } from '@/api/parent';
import dayjs from 'dayjs';

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const records = ref<LessonRecord[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const children = ref<ChildInfo[]>([]);
const currentChildId = ref<number | null>(null);
const selectedChildId = ref<number | null>(null);

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

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

const onChildChange = (val: number) => {
  router.replace({ query: { childId: String(val) } });
  currentPage.value = 1;
  loadRecords();
};

const loadRecords = async () => {
  loading.value = true;
  try {
    let childId = route.query.childId ? Number(route.query.childId) : null;

    // 加载孩子列表
    children.value = await getChildren();
    if (children.value.length === 0) {
      records.value = [];
      total.value = 0;
      loading.value = false;
      return;
    }

    // 如果没有指定 childId，使用第一个孩子
    if (!childId) {
      childId = children.value[0].id;
      router.replace({ query: { childId: String(childId) } });
    }
    selectedChildId.value = childId;
    currentChildId.value = childId;

    const data = await getChildLessons(childId, {
      page: currentPage.value,
      pageSize: pageSize.value,
    });
    records.value = data.items;
    total.value = data.total;
  } catch (error: any) {
    message.error(error.response?.data?.message || '加载数据失败');
  } finally {
    loading.value = false;
  }
};

watch(() => route.query.childId, () => loadRecords());

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

<style scoped lang="scss">
.lesson-history-view {
  .page-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;

    .header-left {
      flex: 1;
    }

    h2 {
      margin: 0 0 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .page-desc {
      margin: 0;
      color: #999;
    }
  }

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

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

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

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

      h3 {
        margin: 0;
        font-size: 16px;
      }

      .picture-book {
        display: block;
        font-size: 13px;
        color: #666;
        margin-top: 4px;
      }

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

    .card-body {
      .rating-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 12px;

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

          .label {
            font-size: 13px;
            color: #666;
            min-width: 60px;
          }
        }
      }

      .notes {
        display: flex;
        gap: 8px;
        padding: 12px;
        background: #fafafa;
        border-radius: 8px;
        font-size: 13px;
        color: #666;
      }
    }

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

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

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

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

// =============== 移动端响应式 ===============
@media screen and (max-width: 768px) {
  .lesson-history-view {
    .page-header {
      margin-bottom: 16px;

      h2 {
        font-size: 18px;
      }

      .page-desc {
        font-size: 13px;
      }
    }

    .lesson-list {
      gap: 12px;
    }

    .lesson-card {
      padding: 14px;
      border-radius: 10px;

      .card-header {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;

        h3 {
          font-size: 15px;
        }

        .picture-book {
          font-size: 12px;
        }

        .lesson-date {
          font-size: 12px;
        }
      }

      .card-body {
        .rating-grid {
          grid-template-columns: 1fr;
          gap: 8px;
          margin-bottom: 10px;

          .rating-item {
            .label {
              font-size: 12px;
              min-width: 50px;
            }
          }
        }

        .notes {
          padding: 10px;
          font-size: 12px;
          flex-direction: column;
          gap: 6px;
        }
      }

      .card-footer {
        padding-top: 10px;
        font-size: 12px;
      }
    }

    .empty-state {
      padding: 40px 16px;

      .empty-icon {
        font-size: 48px;
      }
    }

    .pagination-section {
      margin-top: 16px;
    }
  }
}

// 平板适配
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .lesson-history-view {
    .lesson-card {
      padding: 18px;
    }
  }
}
</style>
