<template>
  <div class="class-list-view">
    <!-- 页面标题区域 -->
    <div class="page-header-wrapper">
      <div class="page-header-decoration">
        <div class="decoration-circle c1"></div>
        <div class="decoration-circle c2"></div>
        <div class="decoration-circle c3"></div>
      </div>
      <div class="page-header-content">
        <div class="icon-wrapper orange">
          <HomeOutlined />
        </div>
        <div class="header-text">
          <h1 class="page-title">我的班级</h1>
          <p class="page-subtitle">管理您的班级，开启精彩的阅读课堂</p>
        </div>
      </div>
      <div class="header-stats">
        <div class="stats-item">
          <span class="stats-value">{{ classes.length }}</span>
          <span class="stats-label">个班级</span>
        </div>
        <div class="stats-divider"></div>
        <div class="stats-item">
          <span class="stats-value">{{ totalStudents }}</span>
          <span class="stats-label">名学生</span>
        </div>
      </div>
    </div>

    <!-- 班级列表 -->
    <a-spin :spinning="loading">
      <div class="class-grid" v-if="classes.length > 0">
        <!-- 班级卡片 -->
      <div
        v-for="cls in classes"
        :key="cls.id"
        class="class-card"
        :class="'grade-' + getGradeKey(cls.grade)"
        @click="viewClassDetail(cls)"
      >
        <!-- 年级标签 -->
        <div class="grade-badge" :class="'badge-' + getGradeKey(cls.grade)">
          <span class="badge-icon">
            <TagsOutlined />
          </span>
          <span class="badge-text">{{ cls.grade }}</span>
        </div>

        <!-- 角色标签 -->
        <div class="role-badge" :class="'role-' + cls.myRole?.toLowerCase()">
          {{ getRoleLabel(cls.myRole) }}
          <span v-if="cls.isPrimary" class="primary-mark">班主任</span>
        </div>

        <!-- 班级信息 -->
        <div class="class-header">
          <div class="class-avatar" :style="{ background: getGradeGradient(cls.grade) }">
            <span class="avatar-text">{{ getGradeInitial(cls.grade) }}</span>
          </div>
          <div class="class-name">{{ cls.name || '未命名班级' }}</div>
        </div>

        <!-- 统计信息 -->
        <div class="class-stats">
          <div class="stat-item">
            <div class="stat-icon-wrapper pink">
              <TeamOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ cls.studentCount }}</div>
              <div class="stat-label">名学生</div>
            </div>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <div class="stat-icon-wrapper blue">
              <ReadOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ cls.lessonCount }}</div>
              <div class="stat-label">授课次数</div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="class-actions">
          <button class="action-btn primary" @click.stop="prepareLesson(cls)">
            <EditOutlined />
            备课
          </button>
          <button class="action-btn" @click.stop="viewStudents(cls)">
            <UsergroupAddOutlined />
            详情
          </button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && classes.length === 0" class="empty-state">
      <div class="empty-icon-wrapper">
        <HomeOutlined />
      </div>
      <h3 class="empty-title">暂无分配班级</h3>
      <p class="empty-desc">请联系学校管理员为您分配班级</p>
    </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  HomeOutlined,
  TeamOutlined,
  ReadOutlined,
  EditOutlined,
  UsergroupAddOutlined,
  BarChartOutlined,
  TagsOutlined,
} from '@ant-design/icons-vue';
import { getTeacherClasses } from '@/api/teacher';

const router = useRouter();
const loading = ref(false);

interface ClassInfo {
  id: number;
  name: string;
  grade: string;
  studentCount: number;
  lessonCount: number;
  myRole?: 'MAIN' | 'ASSIST' | 'CARE';  // 我在该班级的角色
  isPrimary?: boolean;                    // 是否班主任
}

const classes = ref<ClassInfo[]>([]);

const loadClasses = async () => {
  loading.value = true;
  try {
    const data = await getTeacherClasses();
    classes.value = data.map((cls: any) => ({
      id: cls.id,
      name: cls.name,
      grade: cls.grade,
      studentCount: cls.studentCount || 0,
      lessonCount: cls.lessonCount || 0,
      myRole: cls.myRole,
      isPrimary: cls.isPrimary,
    }));
  } catch (error: any) {
    console.error('Failed to load classes:', error);
    message.error(error.message || '加载班级失败');
  } finally {
    loading.value = false;
  }
};

const getRoleLabel = (role?: string) => {
  const roleMap: Record<string, string> = {
    'MAIN': '主班',
    'ASSIST': '配班',
    'CARE': '保育员',
  };
  return roleMap[role || ''] || '';
};

onMounted(() => {
  loadClasses();
});

const totalStudents = computed(() => {
  return classes.value.reduce((sum, cls) => sum + cls.studentCount, 0);
});

const getGradeKey = (grade: string) => {
  const map: Record<string, string> = {
    '小班': 'small',
    '中班': 'middle',
    '大班': 'big',
  };
  return map[grade] || 'middle';
};

const getGradeInitial = (grade: string) => {
  const map: Record<string, string> = {
    '小班': '小',
    '中班': '中',
    '大班': '大',
  };
  return map[grade] || '班';
};

const getGradeGradient = (grade: string) => {
  const map: Record<string, string> = {
    '小班': 'linear-gradient(135deg, #95DE64 0%, #B7EB8F 100%)',
    '中班': 'linear-gradient(135deg, #40A9FF 0%, #69C0FF 100%)',
    '大班': 'linear-gradient(135deg, #FFA940 0%, #FFC069 100%)',
  };
  return map[grade] || 'linear-gradient(135deg, #FF8C42 0%, #FFB347 100%)';
};

const viewClassDetail = (cls: ClassInfo) => {
  console.log('View class detail:', cls);
};

const prepareLesson = (cls: ClassInfo) => {
  router.push(`/teacher/courses?classId=${cls.id}`);
};

const viewStudents = (cls: ClassInfo) => {
  router.push(`/teacher/classes/${cls.id}/students`);
};

</script>

<style scoped>
/* 整体布局 */
.class-list-view {
  min-height: calc(100vh - 120px);
  background: linear-gradient(180deg, #FFF8F0 0%, #FFFFFF 100%);
  padding: 24px;
  border-radius: 16px;
}

/* 页面标题区域 */
.page-header-wrapper {
  position: relative;
  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
  border-radius: 16px;
  padding: 24px 32px;
  margin-bottom: 24px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  background: #fff;
}

.decoration-circle.c1 {
  width: 120px;
  height: 120px;
  top: -30px;
  right: 20px;
}

.decoration-circle.c2 {
  width: 80px;
  height: 80px;
  top: 40px;
  right: 80px;
}

.decoration-circle.c3 {
  width: 40px;
  height: 40px;
  bottom: 10px;
  right: 40px;
}

.page-header-content {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-right: 16px;
  flex-shrink: 0;
}

.icon-wrapper.orange {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
  color: #fff;
}

.header-text {
  color: #fff;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.page-subtitle {
  font-size: 14px;
  margin: 4px 0 0;
  opacity: 0.9;
  color: #fff;
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.stats-item {
  text-align: center;
  color: #fff;
}

.stats-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.stats-label {
  font-size: 13px;
  opacity: 0.85;
}

.stats-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
}

/* 班级网格 */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* 班级卡片 */
.class-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.class-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(255, 140, 66, 0.15);
  border-color: #FFD4B8;
}

/* 年级标签 */
.grade-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.badge-small {
  background: linear-gradient(135deg, #F6FFED 0%, #D9F7BE 100%);
  color: #52c41a;
}

.badge-middle {
  background: linear-gradient(135deg, #E6F7FF 0%, #BAE7FF 100%);
  color: #1890ff;
}

.badge-big {
  background: linear-gradient(135deg, #FFF7E6 0%, #FFD591 100%);
  color: #fa8c16;
}

.badge-icon {
  font-size: 14px;
}

/* 角色标签 */
.role-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.role-badge.role-main {
  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
  color: white;
}

.role-badge.role-assist {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.role-badge.role-care {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #666;
}

.primary-mark {
  margin-left: 4px;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 10px;
}

/* 班级头部 */
.class-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.class-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-text {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.class-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

/* 统计信息 */
.class-stats {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #FAFAFA;
  border-radius: 12px;
  margin-bottom: 16px;
}

.stat-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon-wrapper.pink {
  background: linear-gradient(135deg, #FFE4E1 0%, #FFF0EE 100%);
  color: #FF6B6B;
}

.stat-icon-wrapper.blue {
  background: linear-gradient(135deg, #D6E4FF 0%, #E8F0FF 100%);
  color: #1890ff;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: #E8E8E8;
  margin: 0 16px;
}

/* 操作按钮 */
.class-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  border-color: #FFD4B8;
  background: #FFF8F0;
  color: #FF8C42;
}

.action-btn.primary {
  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
  border: none;
  color: #fff;
}

.action-btn.primary:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3);
}

/* 添加班级卡片 */
.add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  border: 2px dashed #FFD4B8;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFFBF5 100%);
}

.add-card:hover {
  border-style: solid;
  background: linear-gradient(135deg, #FFECD9 0%, #FFF5EB 100%);
}

.add-card-content {
  text-align: center;
}

.add-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 140, 66, 0.3);
  transition: transform 0.3s ease;
}

.add-card:hover .add-icon {
  transform: scale(1.1);
}

.add-text {
  font-size: 16px;
  font-weight: 500;
  color: #FF8C42;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: #fff;
  border-radius: 20px;
}

.empty-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE4C9 0%, #FFF0E0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #FF8C42;
}

.empty-title {
  font-size: 20px;
  color: #333;
  margin: 0 0 8px;
}

.empty-desc {
  font-size: 14px;
  color: #888;
  margin: 0 0 24px;
}

.empty-action {
  padding: 12px 32px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.empty-action:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 140, 66, 0.3);
}

/* 模态框样式 */
.add-class-modal :deep(.ant-modal-content) {
  border-radius: 16px;
}

.add-class-modal :deep(.ant-modal-header) {
  border-radius: 16px 16px 0 0;
}

.grade-radio-group {
  width: 100%;
  display: flex;
  gap: 12px;
}

.grade-radio-group :deep(.ant-radio-button-wrapper) {
  flex: 1;
  height: auto;
  padding: 12px 16px;
  border-radius: 12px !important;
  border: 2px solid #E8E8E8 !important;
  text-align: center;
}

.grade-radio-group :deep(.ant-radio-button-wrapper-checked) {
  border-color: #FF8C42 !important;
  background: #FFF8F0;
}

.grade-radio-group :deep(.ant-radio-button-wrapper::before) {
  display: none;
}

.grade-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.grade-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.grade-initial.small {
  background: linear-gradient(135deg, #95DE64 0%, #B7EB8F 100%);
}

.grade-initial.middle {
  background: linear-gradient(135deg, #40A9FF 0%, #69C0FF 100%);
}

.grade-initial.big {
  background: linear-gradient(135deg, #FFA940 0%, #FFC069 100%);
}

.form-actions {
  margin-bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式 */
@media (max-width: 768px) {
  .class-list-view {
    padding: 16px;
  }

  .page-header-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .page-header-content {
    flex-direction: column;
  }

  .icon-wrapper {
    margin-right: 0;
    margin-bottom: 12px;
  }

  .class-grid {
    grid-template-columns: 1fr;
  }

  .class-stats {
    flex-direction: column;
    gap: 12px;
  }

  .stat-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
}
</style>
