<template>
  <div class="parent-list-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-title">
          <div class="title-icon">
            <IdcardOutlined />
          </div>
          <div class="title-text">
            <h2>家长管理</h2>
            <p>管理家长账号与孩子关联</p>
          </div>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-value">{{ parents.length }}</span>
            <span class="stat-label">家长总数</span>
          </div>
          <div class="stat-item">
            <span class="stat-value active">{{ activeCount }}</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: 280px;"
          @search="handleSearch"
          allow-clear
        >
          <template #prefix>
            <SearchOutlined style="color: #B2BEC3;" />
          </template>
        </a-input-search>
      </div>
      <a-button type="primary" class="add-btn" @click="showAddModal">
        <PlusOutlined class="btn-icon" />
        添加家长
      </a-button>
    </div>

    <!-- 家长卡片列表 -->
    <div class="parent-grid" v-if="!loading && parents.length > 0">
      <div
        v-for="parent in parents"
        :key="parent.id"
        class="parent-card"
        :class="{ 'inactive': parent.status !== 'ACTIVE' }"
      >
        <div class="card-header">
          <div class="parent-avatar">
            <IdcardOutlined class="avatar-icon" />
          </div>
          <div class="parent-basic">
            <div class="parent-name">{{ parent.name }}</div>
            <div class="parent-account">@{{ parent.loginAccount }}</div>
          </div>
          <div class="status-badge" :class="parent.status === 'ACTIVE' ? 'active' : 'inactive'">
            {{ parent.status === 'ACTIVE' ? '活跃' : '停用' }}
          </div>
        </div>

        <div class="card-body">
          <div class="info-row">
            <PhoneOutlined class="info-icon" />
            <span class="info-value">{{ parent.phone || '未设置' }}</span>
          </div>
          <div class="info-row">
            <MailOutlined class="info-icon" />
            <span class="info-value">{{ parent.email || '未设置' }}</span>
          </div>
          <div class="info-row">
            <TeamOutlined class="info-icon" />
            <span class="info-value children-tag">
              <span v-if="parent.childrenCount > 0">
                关联 <strong>{{ parent.childrenCount }}</strong> 个孩子
              </span>
              <span v-else class="no-children">未关联孩子</span>
            </span>
          </div>
        </div>

        <div class="card-actions">
          <a-button type="link" size="small" @click="handleEdit(parent)">
            <EditOutlined /> 编辑
          </a-button>
          <a-button type="link" size="small" @click="handleManageChildren(parent)">
            <UserAddOutlined /> 孩子
          </a-button>
          <a-button type="link" size="small" @click="handleResetPassword(parent)">
            <KeyOutlined /> 重置
          </a-button>
          <a-popconfirm
            title="确定要删除这位家长吗？"
            @confirm="handleDelete(parent.id)"
          >
            <a-button type="link" size="small" danger>
              <DeleteOutlined /> 删除
            </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-if="!loading && parents.length === 0">
      <InboxOutlined class="empty-icon" />
      <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>

    <!-- 分页 -->
    <div class="pagination-wrapper" v-if="parents.length > 0">
      <a-pagination
        v-model:current="pagination.current"
        v-model:pageSize="pagination.pageSize"
        :total="pagination.total"
        :show-size-changer="true"
        :show-total="(total: number) => `共 ${total} 条`"
        @change="handlePageChange"
      />
    </div>

    <!-- 添加/编辑家长模态框 -->
    <a-modal
      v-model:open="modalVisible"
      :title="isEdit ? '编辑家长' : '添加家长'"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      :confirm-loading="submitting"
      :width="520"
      class="parent-modal"
    >
      <template #title>
        <span class="modal-title">
          <EditOutlined v-if="isEdit" class="modal-title-icon" />
          <PlusOutlined v-else class="modal-title-icon" />
          {{ isEdit ? '编辑家长' : '添加家长' }}
        </span>
      </template>
      <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><UserOutlined style="color: #B2BEC3;" /></template>
          </a-input>
        </a-form-item>
        <a-form-item label="手机号" name="phone">
          <a-input v-model:value="formState.phone" placeholder="请输入手机号">
            <template #prefix><PhoneOutlined style="color: #B2BEC3;" /></template>
          </a-input>
        </a-form-item>
        <a-form-item label="邮箱" name="email">
          <a-input v-model:value="formState.email" placeholder="请输入邮箱（可选）">
            <template #prefix><MailOutlined style="color: #B2BEC3;" /></template>
          </a-input>
        </a-form-item>
        <a-form-item label="登录账号" name="loginAccount">
          <a-input
            v-model:value="formState.loginAccount"
            placeholder="请输入登录账号"
            :disabled="isEdit"
          >
            <template #prefix><KeyOutlined style="color: #B2BEC3;" /></template>
          </a-input>
        </a-form-item>
        <a-form-item v-if="!isEdit" label="密码" name="password">
          <a-input-password v-model:value="formState.password" placeholder="请输入密码（默认123456）">
            <template #prefix><LockOutlined style="color: #B2BEC3;" /></template>
          </a-input-password>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 管理孩子模态框 -->
    <a-modal
      v-model:open="childrenModalVisible"
      title="管理关联孩子"
      :width="650"
      :footer="null"
      class="children-modal"
    >
      <template #title>
        <span class="modal-title">
          <TeamOutlined class="modal-title-icon" />
          管理关联孩子 - {{ currentParent?.name }}
        </span>
      </template>

      <!-- 添加孩子按钮 -->
      <div class="add-child-section">
        <a-button type="dashed" block @click="openSelectStudentModal" style="height: 48px;">
          <PlusOutlined /> 添加孩子
        </a-button>
      </div>

      <!-- 已关联孩子列表 -->
      <div class="children-list">
        <div class="list-header">
          <span>已关联孩子 ({{ parentChildren.length }})</span>
        </div>
        <a-list
          :data-source="parentChildren"
          :loading="childrenLoading"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar style="background-color: #FF8C42;">
                    <UserOutlined />
                  </a-avatar>
                </template>
                <template #title>
                  <span>{{ item.name }}</span>
                  <span v-if="item.class?.name" class="child-class-text">（{{ item.class.name }}）</span>
                  <a-tag :color="getRelationshipColor(item.relationship)" class="child-relationship-tag">
                    关系：{{ getRelationshipLabel(item.relationship) }}
                  </a-tag>
                </template>
              </a-list-item-meta>
              <template #actions>
                <a-popconfirm
                  title="确定要解除关联吗？"
                  @confirm="handleRemoveChild(item.id)"
                >
                  <a-button type="link" size="small" danger>
                    <DisconnectOutlined /> 解除
                  </a-button>
                </a-popconfirm>
              </template>
            </a-list-item>
          </template>
        </a-list>
        <div v-if="parentChildren.length === 0 && !childrenLoading" class="empty-children">
          <span>暂无关联的孩子</span>
        </div>
      </div>
    </a-modal>

    <!-- 选择学生弹窗 -->
    <a-modal
      v-model:open="selectStudentModalVisible"
      title="选择孩子"
      :width="800"
      :footer="null"
      class="select-student-modal"
    >
      <template #title>
        <span class="modal-title">
          <UserAddOutlined class="modal-title-icon" />
          选择要关联的孩子
        </span>
      </template>

      <!-- 搜索和筛选 -->
      <div class="select-search-bar">
        <a-input-search
          v-model:value="studentSearchKeyword"
          placeholder="搜索学生姓名"
          style="width: 240px;"
          @search="handleStudentSearch"
          allow-clear
        />
        <a-select
          v-model:value="studentClassFilter"
          placeholder="按班级筛选"
          style="width: 160px;"
          allow-clear
          @change="handleStudentSearch"
        >
          <a-select-option v-for="cls in classOptions" :key="cls.id" :value="cls.id">
            {{ cls.name }}
          </a-select-option>
        </a-select>
      </div>

      <!-- 学生表格 -->
      <a-table
        :columns="studentTableColumns"
        :data-source="studentTableData"
        :loading="studentsLoading"
        :pagination="studentPagination"
        :row-selection="studentRowSelection"
        row-key="id"
        size="small"
        @change="handleStudentTableChange"
        style="margin-top: 16px;"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'gender'">
            {{ record.gender === 'MALE' ? '男' : record.gender === 'FEMALE' ? '女' : '-' }}
          </template>
        </template>
      </a-table>

      <!-- 选择关系并确认 -->
      <div class="select-footer" v-if="selectedStudent">
        <div class="selected-info">
          <span>已选择：</span>
          <a-tag color="orange">{{ selectedStudent.name }}</a-tag>
          <span class="selected-class">{{ selectedStudent.className }}</span>
        </div>
        <div class="select-actions">
          <a-select v-model:value="addChildForm.relationship" style="width: 100px; margin-right: 12px;">
            <a-select-option value="FATHER">父亲</a-select-option>
            <a-select-option value="MOTHER">母亲</a-select-option>
            <a-select-option value="GRANDFATHER">祖父</a-select-option>
            <a-select-option value="GRANDMOTHER">祖母</a-select-option>
            <a-select-option value="OTHER">其他</a-select-option>
          </a-select>
          <a-button @click="cancelSelectStudent">取消</a-button>
          <a-button type="primary" @click="confirmAddChild" :loading="addChildLoading">
            确认添加
          </a-button>
        </div>
      </div>
    </a-modal>

    <!-- 重置密码确认模态框 -->
    <a-modal
      v-model:open="resetPasswordVisible"
      @ok="confirmResetPassword"
      :confirm-loading="resetting"
      :width="400"
    >
      <template #title>
        <span class="modal-title">
          <KeyOutlined class="modal-title-icon" />
          重置密码
        </span>
      </template>
      <div class="reset-password-content">
        <div class="reset-warning">
          <WarningOutlined class="warning-icon" />
          <p>确定要重置 <strong>{{ currentParent?.name }}</strong> 的密码吗？</p>
        </div>
        <div v-if="newPassword" class="new-password-box">
          <p>新密码：</p>
          <div class="password-display">
            <a-typography-text copyable>{{ newPassword }}</a-typography-text>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import {
  SearchOutlined,
  IdcardOutlined,
  PlusOutlined,
  PhoneOutlined,
  MailOutlined,
  TeamOutlined,
  EditOutlined,
  KeyOutlined,
  DeleteOutlined,
  InboxOutlined,
  UserOutlined,
  LockOutlined,
  WarningOutlined,
  UserAddOutlined,
  DisconnectOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import {
  getParents,
  createParent,
  updateParent,
  deleteParent,
  resetParentPassword,
  getParentChildren,
  addChildToParent,
  removeChildFromParent,
  getStudents,
  getClasses,
} from '@/api/school';
import type { Parent, CreateParentDto, ParentChild, Student } from '@/api/school';

const loading = ref(false);
const submitting = ref(false);
const resetting = ref(false);
const modalVisible = ref(false);
const resetPasswordVisible = ref(false);
const childrenModalVisible = ref(false);
const isEdit = ref(false);
const formRef = ref<FormInstance>();
const searchKeyword = ref('');
const currentParent = ref<Parent | null>(null);
const newPassword = ref('');

// 孩子管理相关
const parentChildren = ref<ParentChild[]>([]);
const childrenLoading = ref(false);
const addChildLoading = ref(false);
const studentsLoading = ref(false);

const addChildForm = reactive({
  studentId: undefined as number | undefined,
  relationship: 'FATHER',
});

// === 选择学生弹窗相关 ===
const selectStudentModalVisible = ref(false);
const studentSearchKeyword = ref('');
const studentClassFilter = ref<number | undefined>();
const selectedStudent = ref<Student | null>(null);
const studentTableData = ref<Student[]>([]);
const studentPagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
});
const classOptions = ref<{ id: number; name: string }[]>([]);

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

const parents = ref<Parent[]>([]);

const activeCount = computed(() => {
  return parents.value.filter(p => p.status === 'ACTIVE').length;
});

const formState = reactive<CreateParentDto & { id?: number }>({
  name: '',
  phone: '',
  email: '',
  loginAccount: '',
  password: '',
});

const rules: Record<string, any[]> = {
  name: [{ required: true, message: '请输入家长姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  loginAccount: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
};

const loadParents = async () => {
  loading.value = true;
  try {
    const result = await getParents({
      page: pagination.current,
      pageSize: pagination.pageSize,
      keyword: searchKeyword.value || undefined,
    });
    parents.value = result.items;
    pagination.total = result.total;
  } catch (error) {
    console.error('Failed to load parents:', error);
  } finally {
    loading.value = false;
  }
};

const loadParentChildren = async (parentId: number) => {
  childrenLoading.value = true;
  try {
    parentChildren.value = await getParentChildren(parentId);
  } catch (error) {
    console.error('Failed to load children:', error);
    parentChildren.value = [];
  } finally {
    childrenLoading.value = false;
  }
};

const handlePageChange = (page: number, pageSize: number) => {
  pagination.current = page;
  pagination.pageSize = pageSize;
  loadParents();
};

const handleSearch = () => {
  pagination.current = 1;
  loadParents();
};

const resetForm = () => {
  formState.id = undefined;
  formState.name = '';
  formState.phone = '';
  formState.email = '';
  formState.loginAccount = '';
  formState.password = '';
};

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

const handleEdit = (record: Parent) => {
  isEdit.value = true;
  formState.id = record.id;
  formState.name = record.name;
  formState.phone = record.phone;
  formState.email = record.email || '';
  formState.loginAccount = record.loginAccount;
  modalVisible.value = true;
};

const handleModalOk = async () => {
  try {
    await formRef.value?.validate();
    submitting.value = true;

    if (isEdit.value && formState.id) {
      await updateParent(formState.id, {
        name: formState.name,
        phone: formState.phone,
        email: formState.email,
      });
      message.success('更新成功');
    } else {
      await createParent({
        name: formState.name,
        phone: formState.phone,
        email: formState.email,
        loginAccount: formState.loginAccount,
        password: formState.password || '123456',
      });
      message.success('添加成功');
    }

    modalVisible.value = false;
    loadParents();
  } 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 handleManageChildren = async (parent: Parent) => {
  currentParent.value = parent;
  childrenModalVisible.value = true;
  await loadParentChildren(parent.id);
};

const handleRemoveChild = async (studentId: number) => {
  if (!currentParent.value) return;

  try {
    await removeChildFromParent(currentParent.value.id, studentId);
    message.success('解除关联成功');
    await loadParentChildren(currentParent.value.id);
    loadParents(); // 刷新家长列表更新孩子数量
  } catch (error: any) {
    message.error(error?.response?.data?.message || '解除关联失败');
  }
};

const getRelationshipLabel = (relationship: string) => {
  const labels: Record<string, string> = {
    FATHER: '父亲',
    MOTHER: '母亲',
    GRANDFATHER: '祖父',
    GRANDMOTHER: '祖母',
    OTHER: '其他'
  };
  return labels[relationship] || relationship;
};

const getRelationshipColor = (relationship: string) => {
  const colors: Record<string, string> = {
    FATHER: 'blue',
    MOTHER: 'pink',
    GRANDFATHER: 'green',
    GRANDMOTHER: 'orange',
    OTHER: 'default',
  };
  return colors[relationship] || 'default';
};

const handleResetPassword = (record: Parent) => {
  currentParent.value = record;
  newPassword.value = '';
  resetPasswordVisible.value = true;
};

const confirmResetPassword = async () => {
  if (!currentParent.value) return;

  resetting.value = true;
  try {
    const result = await resetParentPassword(currentParent.value.id);
    newPassword.value = result.tempPassword;
    message.success('密码重置成功');
  } catch (error: any) {
    message.error(error?.response?.data?.message || '重置密码失败');
  } finally {
    resetting.value = false;
  }
};

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

const studentTableColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name', width: 120 },
  { title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
  { title: '班级', dataIndex: 'className', key: 'className', width: 120 },
];

const studentRowSelection = computed(() => ({
  type: 'radio' as 'radio',
  selectedRowKeys: selectedStudent.value ? [selectedStudent.value.id] : [],
  onChange: (selectedRowKeys: (string | number)[]) => {
    if (selectedRowKeys.length > 0) {
      const student = studentTableData.value.find(s => s.id === selectedRowKeys[0]);
      selectedStudent.value = student || null;
    } else {
      selectedStudent.value = null;
    }
  },
}));

const openSelectStudentModal = async () => {
  selectStudentModalVisible.value = true;
  studentSearchKeyword.value = '';
  studentClassFilter.value = undefined;
  selectedStudent.value = null;
  studentPagination.current = 1;
  await loadStudentsForSelect();
  await loadClassOptions();
};

const loadStudentsForSelect = async () => {
  studentsLoading.value = true;
  try {
    const result = await getStudents({
    page: studentPagination.current,
    pageSize: studentPagination.pageSize,
    keyword: studentSearchKeyword.value || undefined,
    classId: studentClassFilter.value || undefined,
  });
    studentTableData.value = result.items;
    studentPagination.total = result.total;
  } catch (error) {
    console.error('Failed to load students:', error);
    studentTableData.value = [];
  } finally {
    studentsLoading.value = false;
  }
};

const loadClassOptions = async () => {
  try {
    const classes = await getClasses();
    classOptions.value = classes;
  } catch (error) {
    console.error('Failed to load classes:', error);
  }
};

const handleStudentSearch = () => {
  studentPagination.current = 1;
  loadStudentsForSelect();
};

const handleStudentTableChange = (pagination: any) => {
  studentPagination.current = pagination.current;
  studentPagination.pageSize = pagination.pageSize;
  loadStudentsForSelect();
};

const cancelSelectStudent = () => {
  selectStudentModalVisible.value = false;
  selectedStudent.value = null;
};

const confirmAddChild = async () => {
  if (!selectedStudent.value || !currentParent.value) return;

  addChildLoading.value = true;
  try {
    await addChildToParent(currentParent.value.id, {
      studentId: selectedStudent.value.id,
      relationship: addChildForm.relationship,
    });
    message.success('添加成功');
    selectStudentModalVisible.value = false;
    selectedStudent.value = null;
    addChildForm.relationship = 'FATHER';
    await loadParentChildren(currentParent.value.id);
    loadParents(); // 刷新家长列表更新孩子数量
  } catch (error: any) {
    message.error(error?.response?.data?.message || '添加失败');
  } finally {
    addChildLoading.value = false;
  }
};

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

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

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

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

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

.title-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  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) {
  border-radius: 12px;
  border: 2px solid #F0F0F0;
}

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

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

.add-btn:hover {
  background: linear-gradient(135deg, #FF7A2A 0%, #FFA030 100%);
}

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

/* 家长卡片网格 */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.parent-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;
}

.parent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #FF8C42;
}

.parent-card.inactive {
  opacity: 0.7;
}

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

.parent-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.parent-basic {
  flex: 1;
}

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

.parent-account {
  font-size: 12px;
  color: #636E72;
  margin-top: 2px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #E8F5E9;
  color: #43A047;
}

.status-badge.inactive {
  background: #FFEBEE;
  color: #E53935;
}

.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 {
  font-size: 14px;
  color: #FF8C42;
  margin-right: 4px;
}

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

.info-value strong {
  color: #FF8C42;
}

.no-children {
  color: #B2BEC3;
  font-style: italic;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px 16px;
  border-top: 1px solid #F0F0F0;
  background: #FAFAFA;
}

.card-actions :deep(.ant-btn-link) {
  padding: 4px 8px;
  height: auto;
  font-size: 12px;
}

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

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

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

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

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

/* 分页 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 24px;
  background: white;
  border-radius: 16px;
}

/* 重置密码弹窗 */
.reset-password-content {
  text-align: center;
}

.reset-warning {
  padding: 20px;
  background: #FFF8F0;
  border-radius: 12px;
  margin-bottom: 20px;
}

.warning-icon {
  font-size: 32px;
  color: #FF8C42;
  display: block;
  margin-bottom: 8px;
}

.reset-warning p {
  margin: 0;
  color: #636E72;
}

.new-password-box p {
  margin-bottom: 8px;
  color: #636E72;
}

.password-display {
  padding: 16px;
  background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
  border-radius: 12px;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

/* Modal title styling */
.modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-title-icon {
  color: #FF8C42;
}

/* 管理孩子弹窗 */
.add-child-section {
  padding: 16px;
  background: #F8F9FA;
  border-radius: 12px;
  margin-bottom: 16px;
}

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

.children-list {
  border: 1px solid #F0F0F0;
  border-radius: 12px;
  overflow: hidden;
}

.children-list :deep(.ant-list-item) {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.children-list :deep(.ant-list-item-meta) {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.children-list :deep(.ant-list-item-meta-content) {
  display: flex;
  align-items: center;
}

.children-list :deep(.ant-list-item-meta-title) {
  margin-bottom: 0;
  line-height: 1;
}

.list-header {
  padding: 12px 16px;
  background: #FAFAFA;
  border-bottom: 1px solid #F0F0F0;
  font-weight: 500;
  color: #2D3436;
}

.empty-children {
  padding: 40px;
  text-align: center;
  color: #B2BEC3;
}

.child-class-name {
  margin-left: 12px;
  padding: 2px 8px;
  background: #F0F5FF;
  border-radius: 4px;
  font-size: 12px;
  color: #1890FF;
  font-weight: normal;
}

.child-class-text {
  margin-left: 4px;
  font-size: 13px;
  color: #999;
  font-weight: normal;
}

.child-relationship-tag {
  margin-left: 8px;
  font-size: 12px;
}

.child-relationship {
  font-size: 13px;
  color: #666;
}

/* 选择学生弹窗 */
.select-search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.select-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  background: #F8F9FA;
  border-radius: 12px;
}

.selected-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selected-class {
  color: #666;
  font-size: 13px;
}

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

.select-student-modal :deep(.ant-table-wrapper) {
  max-height: 400px;
  overflow: auto;
}

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

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

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

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

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

  .card-actions {
    flex-wrap: wrap;
  }
}
</style>
