<template>
  <div class="children-view">
    <div class="page-header">
      <h2><TeamOutlined /> 我的孩子</h2>
      <p class="page-desc">查看孩子的学习信息和成长记录</p>
    </div>

    <a-spin :spinning="loading">
      <div class="children-list" v-if="children.length > 0">
        <div
          v-for="child in children"
          :key="child.id"
          class="child-card"
          @click="goToChildDetail(child.id)"
        >
          <div class="card-avatar">
            <a-avatar :size="80" :style="{ backgroundColor: getAvatarColor(child.id) }">
              {{ child.name.charAt(0) }}
            </a-avatar>
            <span class="gender-badge" v-if="child.gender">
              {{ child.gender === '男' ? '👦' : '👧' }}
            </span>
          </div>

          <div class="card-content">
            <div class="card-header">
              <h3 class="child-name">{{ child.name }}</h3>
              <a-tag color="green">{{ getRelationshipText(child.relationship) }}</a-tag>
            </div>

            <div class="card-info">
              <div class="info-item">
                <span class="label">班级</span>
                <span class="value">{{ child.class?.name || '未分班' }}</span>
              </div>
              <div class="info-item">
                <span class="label">年级</span>
                <span class="value">{{ child.class?.grade || '-' }}</span>
              </div>
              <div class="info-item" v-if="child.birthDate">
                <span class="label">生日</span>
                <span class="value">{{ formatDate(child.birthDate) }}</span>
              </div>
            </div>

            <div class="card-stats">
              <div class="stat-item">
                <BookOutlined />
                <span class="stat-value">{{ child.readingCount }}</span>
                <span class="stat-label">阅读次数</span>
              </div>
              <div class="stat-item">
                <ReadOutlined />
                <span class="stat-value">{{ child.lessonCount }}</span>
                <span class="stat-label">上课次数</span>
              </div>
            </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>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  TeamOutlined,
  BookOutlined,
  ReadOutlined,
  RightOutlined,
  InboxOutlined,
} from '@ant-design/icons-vue';
import { getChildren, type ChildInfo } from '@/api/parent';
import dayjs from 'dayjs';

const router = useRouter();
const loading = ref(false);
const children = ref<ChildInfo[]>([]);

const avatarColors = ['#52c41a', '#1890ff', '#fa8c16', '#eb2f96', '#722ed1'];

const getAvatarColor = (id: number) => avatarColors[id % avatarColors.length];

const getRelationshipText = (relationship: string) => {
  const map: Record<string, string> = {
    FATHER: '爸爸',
    MOTHER: '妈妈',
    GRANDFATHER: '爷爷',
    GRANDMOTHER: '奶奶',
    OTHER: '监护人',
  };
  return map[relationship] || relationship;
};

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

const goToChildDetail = (childId: number) => {
  router.push(`/parent/children/${childId}`);
};

const loadChildren = async () => {
  loading.value = true;
  try {
    children.value = await getChildren();
  } catch (error: any) {
    message.error(error.response?.data?.message || '加载数据失败');
  } finally {
    loading.value = false;
  }
};

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

<style scoped lang="scss">
$primary-color: #52c41a;
$primary-light: #f6ffed;

.children-view {
  .page-header {
    margin-bottom: 24px;

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

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

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

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

    &:hover {
      border-color: $primary-color;
      box-shadow: 0 4px 12px rgba(82, 196, 26, 0.1);

      .card-action {
        color: $primary-color;
      }
    }

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

    .card-avatar {
      position: relative;
      margin-right: 24px;

      .gender-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 20px;
      }
    }

    .card-content {
      flex: 1;

      .card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;

        .child-name {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
        }
      }

      .card-info {
        display: flex;
        gap: 24px;
        margin-bottom: 16px;

        .info-item {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .label {
            font-size: 12px;
            color: #999;
          }

          .value {
            font-size: 14px;
            color: #333;
          }
        }
      }

      .card-stats {
        display: flex;
        gap: 32px;

        .stat-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          background: #fafafa;
          border-radius: 8px;

          .anticon {
            color: $primary-color;
            font-size: 18px;
          }

          .stat-value {
            font-size: 20px;
            font-weight: 600;
            color: #333;
          }

          .stat-label {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }

    .card-action {
      font-size: 20px;
      color: #d9d9d9;
      padding: 0 12px;
      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;
    }
  }
}

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

      h2 {
        font-size: 18px;
      }

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

    .children-list {
      gap: 12px;
    }

    .child-card {
      padding: 16px;
      border-radius: 12px;

      .card-avatar {
        margin-right: 14px;

        :deep(.ant-avatar) {
          width: 56px !important;
          height: 56px !important;
          line-height: 56px !important;
        }

        .gender-badge {
          font-size: 16px;
        }
      }

      .card-content {
        .card-header {
          margin-bottom: 8px;
          flex-wrap: wrap;

          .child-name {
            font-size: 16px;
          }
        }

        .card-info {
          gap: 16px;
          margin-bottom: 10px;
          flex-wrap: wrap;

          .info-item {
            .label {
              font-size: 11px;
            }

            .value {
              font-size: 13px;
            }
          }
        }

        .card-stats {
          gap: 12px;
          flex-wrap: wrap;

          .stat-item {
            padding: 6px 12px;
            gap: 6px;

            .anticon {
              font-size: 14px;
            }

            .stat-value {
              font-size: 16px;
            }

            .stat-label {
              font-size: 11px;
            }
          }
        }
      }

      .card-action {
        font-size: 16px;
        padding: 0 8px;
      }
    }

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

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

      .empty-hint {
        font-size: 12px;
      }
    }
  }
}

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