<template>
  <div class="class-list-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-title">
          <div class="title-icon">
            <HomeOutlined />
          </div>
          <div class="title-text">
            <h2>班级管理</h2>
            <p>管理学校班级信息与学生分配</p>
          </div>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-value">{{ classes.length }}</span>
            <span class="stat-label">班级总数</span>
          </div>
          <div class="stat-item">
            <span class="stat-value active">{{ totalStudents }}</span>
            <span class="stat-label">学生总数</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作栏 -->
    <div class="action-bar">
      <div class="search-box">
        <a-input-search v-model:value="searchKeyword" placeholder="搜索班级名称" style="width: 250px;" @search="handleSearch"
          allow-clear />
      </div>
      <a-button type="primary" class="add-btn" @click="showAddModal">
        <PlusOutlined class="btn-icon" />
        添加班级
      </a-button>
    </div>

    <!-- 班级卡片网格 -->
    <div class="class-grid" v-if="!loading && classes.length > 0">
      <div v-for="cls in classes" :key="cls.id" class="class-card" :class="'grade-' + getGradeKey(cls.grade)">
        <div class="card-header">
          <div class="class-icon">
            <component :is="getGradeIcon(cls.grade)" class="icon-component" />
          </div>
          <div class="class-basic">
            <div class="class-name">{{ cls.name }}</div>
            <div class="class-grade">
              <span class="grade-badge" :class="'grade-' + getGradeKey(cls.grade)">
                {{ cls.grade }}
              </span>
            </div>
          </div>
        </div>

        <div class="card-body">
          <div class="info-row">
            <div class="info-icon-wrapper">
              <UserOutlined class="info-icon" />
            </div>
            <div class="info-value teachers-value">
              <template v-if="cls.teachers && cls.teachers.length > 0">
                <span v-for="(teacher, index) in cls.teachers.slice(0, 3)" :key="teacher.teacherId">
                  {{ teacher.teacherName }}<span v-if="teacher.isPrimary" class="primary-badge">班主任</span>
                  <span v-if="index < Math.min(cls.teachers.length, 3) - 1">、</span>
                </span>
                <span v-if="cls.teachers.length > 3" class="more-teachers">等{{ cls.teachers.length }}人</span>
              </template>
              <span v-else class="no-teacher">未指定教师</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-icon-wrapper">
              <TeamOutlined class="info-icon" />
            </div>
            <span class="info-value">
              <strong>{{ cls.studentCount || 0 }}</strong> 名学生
            </span>
          </div>
          <div class="info-row">
            <div class="info-icon-wrapper">
              <BookOutlined class="info-icon" />
            </div>
            <span class="info-value">
              已授课 <strong>{{ cls.lessonCount || 0 }}</strong> 次
            </span>
          </div>
        </div>

        <div class="card-footer">
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: getProgressWidth(cls.studentCount) }"></div>
          </div>
          <div class="progress-label">班级活跃度</div>
        </div>

        <div class="card-actions">
          <a-button type="link" size="small" @click="handleViewStudents(cls)">
            <TeamOutlined />
            学生
          </a-button>
          <a-button type="link" size="small" @click="handleManageTeachers(cls)">
            <UsergroupAddOutlined />
            教师
          </a-button>
          <a-button type="link" size="small" @click="handleEdit(cls)">
            <EditOutlined />
            编辑
          </a-button>
          <a-popconfirm title="确定要删除这个班级吗？" :disabled="cls.studentCount > 0" @confirm="handleDelete(cls.id)">
            <a-tooltip v-if="cls.studentCount > 0" title="班级内有学生，无法删除">
              <a-button type="link" size="small" disabled class="disabled-btn">
                <DeleteOutlined />
                删除
              </a-button>
            </a-tooltip>
            <a-button v-else type="link" size="small" danger>
              <DeleteOutlined />
              删除
            </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-if="!loading && classes.length === 0">
      <div class="empty-icon">
        <BankOutlined />
      </div>
      <p>暂无班级数据</p>
      <a-button type="primary" @click="showAddModal">
        创建第一个班级
      </a-button>
    </div>

    <!-- 加载状态 -->
    <div class="loading-state" v-if="loading">
      <a-spin size="large" />
      <p>加载中...</p>
    </div>

    <!-- 添加/编辑班级模态框 -->
    <a-modal v-model:open="modalVisible" :title="isEdit ? modalEditTitle : modalAddTitle" @ok="handleModalOk"
      @cancel="handleModalCancel" :confirm-loading="submitting" :width="480">
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="班级名称" name="name">
          <a-input v-model:value="formState.name" placeholder="请输入班级名称">
            <template #prefix>
              <HomeOutlined style="color: #B2BEC3;" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item label="年级" name="grade">
          <a-select v-model:value="formState.grade" placeholder="请选择年级">
            <a-select-option value="小班">
              <div class="grade-option">
                <TagsOutlined class="grade-option-icon small" />
                小班
              </div>
            </a-select-option>
            <a-select-option value="中班">
              <div class="grade-option">
                <TagsOutlined class="grade-option-icon middle" />
                中班
              </div>
            </a-select-option>
            <a-select-option value="大班">
              <div class="grade-option">
                <TagsOutlined class="grade-option-icon big" />
                大班
              </div>
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="班主任" name="teacherId">
          <a-select v-model:value="formState.teacherId" placeholder="请选择班主任" :loading="teachersLoading" allow-clear>
            <a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id">
              {{ teacher.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 班级学生列表模态框 -->
    <a-modal v-model:open="studentsModalVisible" :title="studentsModalTitle" :footer="null" width="700px">
      <div class="students-modal-content">
        <div class="class-info-header">
          <div class="class-emoji">
            <component :is="getGradeIcon(currentClass?.grade || '')" class="modal-grade-icon" />
          </div>
          <div class="class-details">
            <div class="class-name-large">{{ currentClass?.name }}</div>
            <div class="class-meta">
              <span>{{ currentClass?.grade }}</span>
              <span class="separator">|</span>
              <span>班主任：{{ currentClass?.teacherName || '未指定' }}</span>
              <span class="separator">|</span>
              <span>{{ classStudents.length }} 名学生</span>
            </div>
          </div>
        </div>

        <div class="students-list" v-if="!studentsLoading && classStudents.length > 0">
          <div v-for="student in classStudents" :key="student.id" class="student-item">
            <div class="student-avatar" :class="student.gender === '男' ? 'boy' : 'girl'">
              <BoyOutlined v-if="student.gender === '男'" class="student-gender-icon" />
              <GirlOutlined v-else class="student-gender-icon" />
            </div>
            <div class="student-info">
              <div class="student-name">{{ student.name }}</div>
              <div class="student-contact">
                <span v-if="student.parentName">家长：{{ student.parentName }}</span>
                <span v-if="student.parentPhone"> | {{ student.parentPhone }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="empty-students" v-if="!studentsLoading && classStudents.length === 0">
          <div class="empty-icon">
            <InboxOutlined />
          </div>
          <p>该班级暂无学生</p>
        </div>

        <div class="loading-students" v-if="studentsLoading">
          <a-spin />
          <p>加载学生列表...</p>
        </div>

        <div class="pagination-wrapper" v-if="studentsPagination.total > studentsPagination.pageSize">
          <a-pagination v-model:current="studentsPagination.current" v-model:pageSize="studentsPagination.pageSize"
            :total="studentsPagination.total" :show-total="(total: number) => `共 ${total} 条`" size="small"
            @change="handleStudentsPageChange" />
        </div>
      </div>
    </a-modal>

    <!-- 班级教师管理模态框 -->
    <a-modal v-model:open="teachersModalVisible" :title="`管理 ${currentClass?.name || ''} 教师团队`" :footer="null"
      width="600px">
      <div class="teachers-modal-content">
        <!-- 添加教师表单 -->
        <div class="add-teacher-form">
          <div class="form-row">
            <a-select v-model:value="teacherFormState.teacherId" placeholder="选择教师" style="width: 150px;"
              :loading="teachersLoading">
              <a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id">
                {{ teacher.name }}
              </a-select-option>
            </a-select>
            <a-select v-model:value="teacherFormState.role" style="width: 100px;">
              <a-select-option value="MAIN">主班</a-select-option>
              <a-select-option value="ASSIST">配班</a-select-option>
              <a-select-option value="CARE">保育员</a-select-option>
            </a-select>
            <a-button type="primary" size="small" :loading="teachersSubmitting" @click="handleAddTeacher">
              添加
            </a-button>
          </div>
        </div>

        <!-- 教师列表 -->
        <div class="teachers-list" v-if="classTeachers.length > 0">
          <div v-for="teacher in classTeachers" :key="teacher.teacherId" class="teacher-item">
            <div class="teacher-info">
              <span class="teacher-name">{{ teacher.teacherName }}</span>
              <span class="teacher-role-badge" :class="'role-' + teacher.role.toLowerCase()">{{ getRoleLabel(teacher.role) }}</span>
              <span v-if="teacher.role === 'MAIN'" class="principal-badge">班主任</span>
            </div>
            <div class="teacher-actions">
              <a-select v-model:value="teacher.role" size="small" style="width: 80px;"
                @change="handleUpdateTeacherRole(teacher)">
                <a-select-option value="MAIN">主班</a-select-option>
                <a-select-option value="ASSIST">配班</a-select-option>
                <a-select-option value="CARE">保育员</a-select-option>
              </a-select>
              <a-button type="link" danger size="small" @click="handleRemoveTeacher(teacher.teacherId)">
                移除
              </a-button>
            </div>
          </div>
        </div>

        <div class="empty-teachers" v-else>
          <p>暂无教师，请添加</p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, h } from 'vue';
import {
  HomeOutlined,
  BankOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  TeamOutlined,
  UserOutlined,
  UsergroupAddOutlined,
  BookOutlined,
  TagsOutlined,
  InboxOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import {
  getClasses,
  getClass,
  createClass,
  updateClass,
  deleteClass,
  getClassStudents,
  getTeachers,
  getClassTeachers,
  addClassTeacher,
  updateClassTeacher,
  removeClassTeacher,
} from '@/api/school';
import type { ClassInfo, CreateClassDto, Teacher, Student, ClassTeacher, AddClassTeacherDto } from '@/api/school';
import { trimFormModel } from '@/utils/trimFormModel';

// Custom gender icons as components
const BoyOutlined = {
  template: `<svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em">
    <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z"/>
  </svg>`
};

const GirlOutlined = {
  template: `<svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em">
    <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM12 8C14.21 8 16 9.79 16 12V22H14V18H10V22H8V12C8 9.79 9.79 8 12 8Z"/>
  </svg>`
};

const loading = ref(false);
const teachersLoading = ref(false);
const submitting = ref(false);
const modalVisible = ref(false);
const studentsModalVisible = ref(false);
const teachersModalVisible = ref(false);
const isEdit = ref(false);
const formRef = ref<FormInstance>();
const searchKeyword = ref('');

const classes = ref<ClassInfo[]>([]);
const teachers = ref<Teacher[]>([]);
const currentClass = ref<ClassInfo | null>(null);
const classStudents = ref<Student[]>([]);
const studentsLoading = ref(false);
const classTeachers = ref<ClassTeacher[]>([]);
const teachersSubmitting = ref(false);

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

const modalEditTitle = computed(() => h('span', { class: 'modal-title' }, [
  h(EditOutlined, { class: 'modal-title-icon' }),
  ' 编辑班级'
]));

const modalAddTitle = computed(() => h('span', { class: 'modal-title' }, [
  h(PlusOutlined, { class: 'modal-title-icon' }),
  ' 添加班级'
]));

const studentsModalTitle = computed(() => {
  return h('span', { class: 'modal-title' }, [
    h(TeamOutlined, { class: 'modal-title-icon' }),
    ` ${currentClass.value?.name || ''} - 学生列表`
  ]);
});

const studentsPagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`,
});

const columns = [
  { title: '班级名称', dataIndex: 'name', key: 'name' },
  { title: '年级', dataIndex: 'grade', key: 'grade' },
  { title: '班主任', dataIndex: 'teacherName', key: 'teacherName' },
  { title: '学生数', dataIndex: 'studentCount', key: 'studentCount' },
  { title: '授课次数', dataIndex: 'lessonCount', key: 'lessonCount' },
  { title: '操作', key: 'action', width: 200 },
];

const studentColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '性别', dataIndex: 'gender', key: 'gender' },
  { title: '家长姓名', dataIndex: 'parentName', key: 'parentName' },
  { title: '家长电话', dataIndex: 'parentPhone', key: 'parentPhone' },
];

interface FormState {
  id?: number;
  name: string;
  grade: string;
  teacherId?: number | null;
}

const formState = reactive<FormState>({
  name: '',
  grade: '',
  teacherId: null,
});

const rules: Record<string, any[]> = {
  name: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
  grade: [{ required: true, message: '请选择年级', trigger: 'change' }],
};

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

const getGradeIcon = (grade: string) => {
  const iconMap: Record<string, any> = {
    '小班': TagsOutlined,
    '中班': TagsOutlined,
    '大班': TagsOutlined,
  };
  return iconMap[grade] || HomeOutlined;
};

const getProgressWidth = (count: number) => {
  if (!count) return '0%';
  const max = Math.max(...classes.value.map(c => c.studentCount || 0));
  return max > 0 ? Math.round((count / max) * 100) + '%' : '0%';
};

const loadClasses = async () => {
  loading.value = true;
  try {
    const result = await getClasses();
    let classList = result;
    if (searchKeyword.value) {
      classList = classList.filter((cls: ClassInfo) =>
        cls.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
      );
    }
    classes.value = classList;
  } catch (error) {
    console.error('Failed to load classes:', error);
  } finally {
    loading.value = false;
  }
};

const loadTeachers = async () => {
  teachersLoading.value = true;
  try {
    const result = await getTeachers({ pageSize: 100 });
    teachers.value = result.list;
  } catch (error) {
    console.error('Failed to load teachers:', error);
  } finally {
    teachersLoading.value = false;
  }
};

const handleSearch = () => {
  loadClasses();
};

const resetForm = () => {
  formState.id = undefined;
  formState.name = '';
  formState.grade = '';
  formState.teacherId = null;
};

const showAddModal = () => {
  isEdit.value = false;
  resetForm();
  modalVisible.value = true;
};

const handleEdit = (record: ClassInfo) => {
  isEdit.value = true;
  formState.id = record.id;
  formState.name = record.name;
  formState.grade = record.grade;
  // 从 teachers 数组中提取班主任 ID
  formState.teacherId = getPrimaryTeacherId(record.teachers) || null;
  modalVisible.value = true;
};

// 从教师数组中获取班主任 ID
const getPrimaryTeacherId = (teachers?: ClassTeacher[]): number | undefined => {
  if (!teachers || teachers.length === 0) {
    return undefined;
  }
  const primaryTeacher = teachers.find(t => t.isPrimary || t.role === 'MAIN');
  return primaryTeacher?.teacherId;
};

const handleModalOk = async () => {
  try {
    // 提交前移除字符串字段首尾空格，避免空格导致的误校验
    trimFormModel(formState as any);
    await formRef.value?.validate();
    submitting.value = true;

    const data: CreateClassDto = {
      name: formState.name,
      grade: formState.grade,
      teacherId: formState.teacherId || undefined,
    };

    if (isEdit.value && formState.id) {
      await updateClass(formState.id, data);
      message.success('更新成功');
    } else {
      await createClass(data);
      message.success('添加成功');
    }

    modalVisible.value = false;
    loadClasses();
  } catch (error: any) {
    if (error?.response?.data?.message) {
      message.error(error.response.data.message);
    }
  } finally {
    submitting.value = false;
  }
};

const handleModalCancel = () => {
  modalVisible.value = false;
  formRef.value?.resetFields();
};

const handleDelete = async (id: number) => {
  try {
    await deleteClass(id);
    message.success('删除成功');
    loadClasses();
  } catch (error: any) {
    message.error(error?.response?.data?.message || '删除失败');
  }
};

const handleViewStudents = async (classInfo: ClassInfo) => {
  currentClass.value = classInfo;
  studentsModalVisible.value = true;
  studentsPagination.current = 1;
  loadClassStudents(classInfo.id);
};

const loadClassStudents = async (classId: number) => {
  studentsLoading.value = true;
  try {
    const result = await getClassStudents(classId, {
      page: studentsPagination.current,
      pageSize: studentsPagination.pageSize,
    });
    classStudents.value = result.list;
    studentsPagination.total = Number(result.total);
  } catch (error) {
    console.error('Failed to load class students:', error);
  } finally {
    studentsLoading.value = false;
  }
};

const handleStudentsPageChange = (page: number, pageSize: number) => {
  studentsPagination.current = page;
  studentsPagination.pageSize = pageSize;
  if (currentClass.value) {
    loadClassStudents(currentClass.value.id);
  }
};

const handleStudentsTableChange = (pag: any) => {
  handleStudentsPageChange(pag.current, pag.pageSize);
};

// ==================== 教师管理 ====================

const teacherFormState = reactive<{
  teacherId: number | null;
  role: 'MAIN' | 'ASSIST' | 'CARE';
}>({
  teacherId: null,
  role: 'MAIN',
});

const editingTeacherId = ref<number | null>(null);

const handleManageTeachers = async (classInfo: ClassInfo) => {
  currentClass.value = classInfo;
  teachersModalVisible.value = true;
  loadClassTeachers(classInfo.id);
};

const loadClassTeachers = async (classId: number) => {
  try {
    const result = await getClassTeachers(classId);
    classTeachers.value = result;
  } catch (error) {
    console.error('Failed to load class teachers:', error);
    message.error('加载教师列表失败');
  }
};

const resetTeacherForm = () => {
  teacherFormState.teacherId = null;
  teacherFormState.role = 'MAIN';
  editingTeacherId.value = null;
};

const handleAddTeacher = async () => {
  if (!teacherFormState.teacherId) {
    message.warning('请选择教师');
    return;
  }

  teachersSubmitting.value = true;
  try {
    const dto: AddClassTeacherDto = {
      teacherId: teacherFormState.teacherId,
      role: teacherFormState.role,
    };
    await addClassTeacher(currentClass.value!.id, dto);
    message.success('添加成功');
    resetTeacherForm();
    loadClassTeachers(currentClass.value!.id);
    loadClasses(); // 刷新班级列表
  } catch (error: any) {
    message.error(error?.response?.data?.message || '添加失败');
  } finally {
    teachersSubmitting.value = false;
  }
};

const handleUpdateTeacherRole = async (teacher: ClassTeacher) => {
  try {
    await updateClassTeacher(currentClass.value!.id, teacher.teacherId, {
      role: teacher.role,
    });
    message.success('更新成功');
    loadClassTeachers(currentClass.value!.id);
    loadClasses();
  } catch (error: any) {
    message.error(error?.response?.data?.message || '更新失败');
  }
};

const handleRemoveTeacher = async (teacherId: number) => {
  try {
    await removeClassTeacher(currentClass.value!.id, teacherId);
    message.success('移除成功');
    loadClassTeachers(currentClass.value!.id);
    loadClasses();
  } catch (error: any) {
    message.error(error?.response?.data?.message || '移除失败');
  }
};

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

onMounted(() => {
  loadClasses();
  loadTeachers();
});
</script>

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

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 20px;
  padding: 24px 32px;
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-icon :deep(svg) {
  font-size: 28px;
  color: white;
}

.title-text h2 {
  color: white;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.title-text p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin: 4px 0 0 0;
}

.header-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: white;
}

.stat-value.active {
  color: #FFD93D;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* 操作栏 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}


.search-box :deep(.ant-input-affix-wrapper:hover) {
  border-color: #4facfe;
}

.add-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 12px;
  height: 40px;
  padding: 0 24px;
  font-weight: 600;
}

.add-btn:hover {
  background: linear-gradient(135deg, #3d9be8 0%, #00d8e4 100%);
}

.btn-icon {
  margin-right: 8px;
}

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

.class-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.class-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.class-card.grade-small {
  border-top: 4px solid #43e97b;
}

.class-card.grade-middle {
  border-top: 4px solid #4facfe;
}

.class-card.grade-big {
  border-top: 4px solid #FF8C42;
}

.class-card .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%);
}

.class-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.class-card.grade-small .class-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.class-card.grade-middle .class-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.class-card.grade-big .class-icon {
  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
}

.icon-component {
  font-size: 24px;
  color: white;
}

.class-basic {
  flex: 1;
}

.class-name {
  font-size: 16px;
  font-weight: 600;
  color: #2D3436;
}

.class-grade {
  margin-top: 4px;
}

.grade-badge {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.grade-badge.grade-small {
  background: #E8F5E9;
  color: #43A047;
}

.grade-badge.grade-middle {
  background: #E3F2FD;
  color: #1976D2;
}

.grade-badge.grade-big {
  background: #FFF8F0;
  color: #FF8C42;
}

.card-body {
  padding: 16px 20px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-icon-wrapper {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #F0F4F8 0%, #E8EDF2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-icon {
  font-size: 12px;
  color: #4facfe;
}

.info-value {
  color: #636E72;
}

.info-value strong {
  color: #4facfe;
}

.card-footer {
  padding: 12px 20px;
  background: #FAFAFA;
}

.progress-bar {
  height: 6px;
  background: #E0E0E0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-label {
  font-size: 11px;
  color: #B2BEC3;
  margin-top: 4px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F0F0F0;
}

.card-actions :deep(.ant-btn-link) {
  padding: 4px 8px;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.disabled-btn {
  opacity: 0.5;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  background: white;
  border-radius: 16px;
}

.empty-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.empty-icon :deep(.anticon) {
  font-size: 40px;
  color: white;
}

.empty-state p {
  color: #636E72;
  font-size: 16px;
  margin-bottom: 24px;
}

.empty-state :deep(.ant-btn-primary) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

.loading-state p {
  color: #636E72;
  margin-top: 16px;
}

/* 模态框标题 */
.modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.modal-title-icon {
  color: #4facfe;
}

/* 年级选择选项 */
.grade-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grade-option-icon {
  font-size: 14px;
}

.grade-option-icon.small {
  color: #43e97b;
}

.grade-option-icon.middle {
  color: #4facfe;
}

.grade-option-icon.big {
  color: #FF8C42;
}

/* 学生模态框 */
.students-modal-content {
  padding: 0;
}

.class-info-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 16px;
  margin-bottom: 20px;
}

.class-emoji {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-grade-icon {
  font-size: 32px;
  color: white;
}

.class-details {
  flex: 1;
}

.class-name-large {
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.class-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4px;
}

.class-meta .separator {
  margin: 0 8px;
}

.students-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.student-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #F8F9FA;
  border-radius: 12px;
}

.student-item .student-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-item .student-avatar.boy {
  background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
}

.student-item .student-avatar.girl {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.student-gender-icon {
  font-size: 16px;
  color: white;
}

.student-item .student-name {
  font-size: 14px;
  font-weight: 500;
  color: #2D3436;
}

.student-item .student-contact {
  font-size: 11px;
  color: #636E72;
  margin-top: 2px;
}

.empty-students,
.loading-students {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.empty-students .empty-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #E8EDF2 0%, #D4DAE0 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.empty-students .empty-icon :deep(.anticon) {
  font-size: 32px;
  color: #B2BEC3;
}

.empty-students p,
.loading-students p {
  color: #636E72;
  margin-top: 8px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #F0F0F0;
}

/* 教师团队显示 */
.teachers-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.primary-badge {
  font-size: 10px;
  padding: 1px 4px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-radius: 4px;
  margin-left: 4px;
}

.more-teachers {
  color: #888;
  font-size: 12px;
  margin-left: 4px;
}

.no-teacher {
  color: #999;
}

/* 教师管理模态框 */
.teachers-modal-content {
  padding: 0;
}

.add-teacher-form {
  padding: 16px;
  background: #F8F9FA;
  border-radius: 12px;
  margin-bottom: 16px;
}

.add-teacher-form .form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.teachers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.teachers-list .teacher-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #F8F9FA;
  border-radius: 10px;
}

.teachers-list .teacher-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.teachers-list .teacher-name {
  font-weight: 500;
  color: #2D3436;
}

.teacher-role-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.teacher-role-badge.role-main {
  background: #E3F2FD;
  color: #1976D2;
}

.teacher-role-badge.role-assist {
  background: #E8F5E9;
  color: #388E3C;
}

.teacher-role-badge.role-care {
  background: #FFF3E0;
  color: #F57C00;
}

.principal-badge {
  padding: 2px 6px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.teacher-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.empty-teachers {
  text-align: center;
  padding: 40px;
  color: #888;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    min-height: auto;
  }

  .header-stats {
    width: 100%;
    justify-content: center;
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;
  }

  .search-box :deep(.ant-input-search) {
    width: 100% !important;
  }

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

  .students-list {
    grid-template-columns: 1fr;
  }
}
</style>
