<template>
  <div class="child-profile-view">
    <div class="page-header">
      <a-button type="text" @click="goBack">
        <ArrowLeftOutlined />
      </a-button>
      <h2>孩子详情</h2>
    </div>

    <a-spin :spinning="loading">
      <div class="profile-content" v-if="child">
        <!-- 基本信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <a-avatar :size="80" :style="{ backgroundColor: getAvatarColor(child.id) }">
              {{ child.name.charAt(0) }}
            </a-avatar>
            <div class="header-info">
              <h2>{{ child.name }}</h2>
              <div class="tags">
                <a-tag v-if="child.gender">{{ child.gender }}</a-tag>
                <a-tag color="green">{{ child.class?.name || '未分班' }}</a-tag>
              </div>
            </div>
          </div>

          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="班级">{{ child.class?.name || '-' }}</a-descriptions-item>
            <a-descriptions-item label="年级">{{ child.class?.grade || '-' }}</a-descriptions-item>
            <a-descriptions-item label="生日" v-if="child.birthDate">
              {{ formatDate(child.birthDate) }}
            </a-descriptions-item>
            <a-descriptions-item label="阅读次数">{{ child.readingCount }}</a-descriptions-item>
            <a-descriptions-item label="上课次数">{{ child.lessonCount }}</a-descriptions-item>
          </a-descriptions>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-cards">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);">
              <BookOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ child.stats.lessonRecords }}</div>
              <div class="stat-label">阅读记录</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);">
              <FileImageOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ child.stats.growthRecords }}</div>
              <div class="stat-label">成长档案</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);">
              <CheckSquareOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ child.stats.taskCompletions }}</div>
              <div class="stat-label">完成任务</div>
            </div>
          </div>
        </div>

        <!-- 快捷操作 -->
        <div class="quick-actions">
          <h3>快捷操作</h3>
          <div class="action-grid">
            <div class="action-item" @click="goToLessons">
              <BookOutlined />
              <span>查看阅读记录</span>
            </div>
            <div class="action-item" @click="goToTasks">
              <CheckSquareOutlined />
              <span>查看任务</span>
            </div>
            <div class="action-item" @click="goToGrowth">
              <FileImageOutlined />
              <span>成长档案</span>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  ArrowLeftOutlined,
  BookOutlined,
  FileImageOutlined,
  CheckSquareOutlined,
} from '@ant-design/icons-vue';
import { getChildProfile, type ChildProfile } from '@/api/parent';
import dayjs from 'dayjs';

const router = useRouter();
const route = useRoute();
const childId = computed(() => Number(route.params.id));

const loading = ref(false);
const child = ref<ChildProfile | null>(null);

const avatarColors = ['#52c41a', '#1890ff', '#fa8c16', '#eb2f96', '#722ed1'];
const getAvatarColor = (id: number) => avatarColors[id % avatarColors.length];
const formatDate = (date: string) => dayjs(date).format('YYYY-MM-DD');

const goBack = () => router.back();
const goToLessons = () => router.push(`/parent/lessons?childId=${childId.value}`);
const goToTasks = () => router.push(`/parent/tasks?childId=${childId.value}`);
const goToGrowth = () => router.push(`/parent/growth?childId=${childId.value}`);

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

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

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

.child-profile-view {
  .page-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;

    h2 {
      margin: 0;
    }
  }

  .info-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;

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

      h2 {
        margin: 0;
        font-size: 24px;
      }

      .tags {
        display: flex;
        gap: 8px;
        margin-top: 8px;
      }
    }
  }

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;

    .stat-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px;
      background: white;
      border-radius: 12px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

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

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

  .quick-actions {
    background: white;
    border-radius: 12px;
    padding: 24px;

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

    .action-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;

      .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: #fafafa;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
          background: $primary-light;
          color: $primary-color;
        }

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

        .anticon {
          font-size: 32px;
          margin-bottom: 8px;
        }

        span {
          font-size: 14px;
        }
      }
    }
  }
}

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

      h2 {
        font-size: 18px;
      }
    }

    .info-card {
      padding: 16px;
      margin-bottom: 16px;
      border-radius: 10px;

      .card-header {
        gap: 14px;
        margin-bottom: 16px;

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

        h2 {
          font-size: 18px;
        }

        .tags {
          gap: 6px;
          margin-top: 6px;
        }
      }

      :deep(.ant-descriptions) {
        .ant-descriptions-item-label {
          font-size: 12px;
        }
        .ant-descriptions-item-content {
          font-size: 13px;
        }
      }
    }

    .stats-cards {
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 16px;

      .stat-card {
        padding: 14px;
        gap: 12px;

        .stat-icon {
          width: 44px;
          height: 44px;
          font-size: 20px;
          border-radius: 10px;
        }

        .stat-content {
          .stat-value {
            font-size: 22px;
          }

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

    .quick-actions {
      padding: 16px;
      border-radius: 10px;

      h3 {
        font-size: 15px;
        margin-bottom: 12px;
      }

      .action-grid {
        grid-template-columns: 1fr;
        gap: 12px;

        .action-item {
          flex-direction: row;
          justify-content: flex-start;
          padding: 14px 16px;
          gap: 12px;

          .anticon {
            font-size: 22px;
            margin-bottom: 0;
          }

          span {
            font-size: 13px;
          }
        }
      }
    }
  }
}

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

    .stats-cards {
      .stat-card {
        padding: 16px;
      }
    }
  }
}
</style>
