gongxue-base/apps/taro/src/pages/student/profile/index.tsx

import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import { Button, Input, Text, View } from '@tarojs/components';
import { logout } from '@/services/auth';
import { checkActivationCode, loadEntitlements, loadOrders, loadSvipPlans, redeemActivationCode, type OrderItem, type SvipPlan } from '@/services/commerce';
import {
  loadLeaderboard,
  loadLearningStats,
  loadLearningTrend,
  loadPracticeHistory,
  type LeaderboardItem,
  type LearningStats,
  type LearningTrendItem,
  type PracticeHistoryItem,
} from '@/services/learning';
import { checkIn, loadBadges, loadExamCountdowns, loadProfile, type StudentProfile } from '@/services/profile';
import '../student.css';

function percent(value?: number | null) {
  return `${Math.round((value || 0) * 100)}%`;
}

function shortDate(value?: string | null) {
  if (!value) return '';
  return value.slice(5, 10);
}

function dateText(value?: string | null) {
  if (!value) return '暂无记录';
  return value.slice(0, 10);
}

function practiceTitle(item: PracticeHistoryItem) {
  return item.blueprintName || item.collectionName || item.contentNodeName || item.entryName || modeLabel(item.mode);
}

function modeLabel(mode?: string | null) {
  const normalized = String(mode || '');
  if (normalized === 'mock_exam') return '全真模拟';
  if (normalized === 'random') return '随机练习';
  if (normalized === 'wrong_review') return '错题复习';
  if (normalized === 'favorites') return '收藏练习';
  return '顺序练习';
}

function maxTrendAnswers(items: LearningTrendItem[]) {
  return Math.max(1, ...items.map(item => item.answeredCount || 0));
}

function trendBucket(value: number, maxValue: number) {
  if (value <= 0) return 'h-bucket-0';
  const ratio = maxValue ? value / maxValue : 0;
  const bucket = Math.max(1, Math.min(12, Math.ceil(ratio * 12)));
  return `h-bucket-${bucket}`;
}

function progressBucket(value: number) {
  const ratio = Math.max(0, Math.min(1, value || 0));
  const bucket = Math.max(0, Math.min(10, Math.round(ratio * 10)));
  return `w-bucket-${bucket}`;
}

function sessionStatusLabel(status?: string | null) {
  if (status === 'active') return '进行中';
  if (status === 'expired') return '已过期';
  return '已完成';
}

function sessionStatusClass(status?: string | null) {
  if (status === 'active') return 'warning';
  if (status === 'expired') return 'danger';
  return '';
}

export default function StudentProfilePage() {
  const [profile, setProfile] = useState<StudentProfile | null>(null);
  const [plans, setPlans] = useState<SvipPlan[]>([]);
  const [orders, setOrders] = useState<OrderItem[]>([]);
  const [badges, setBadges] = useState<Record<string, unknown>[]>([]);
  const [countdowns, setCountdowns] = useState<Record<string, unknown>[]>([]);
  const [leaderboard, setLeaderboard] = useState<LeaderboardItem[]>([]);
  const [currentRank, setCurrentRank] = useState<LeaderboardItem | null>(null);
  const [learningStats, setLearningStats] = useState<LearningStats | null>(null);
  const [learningTrend, setLearningTrend] = useState<LearningTrendItem[]>([]);
  const [practiceHistory, setPracticeHistory] = useState<PracticeHistoryItem[]>([]);
  const [activationCode, setActivationCode] = useState('');
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  function reload() {
    Promise.all([
      loadProfile().catch(() => ({ item: null })),
      loadSvipPlans().catch(() => ({ items: [] })),
      loadOrders().catch(() => ({ items: [] })),
      loadBadges().catch(() => ({ items: [] })),
      loadExamCountdowns().catch(() => ({ items: [] })),
      loadLeaderboard('questions').catch(() => ({ items: [], currentUser: null })),
      loadLearningStats(30).catch(() => ({ item: undefined })),
      loadLearningTrend(14).catch(() => ({ items: [] })),
      loadPracticeHistory({ limit: 6 }).catch(() => ({ items: [] })),
      loadEntitlements().catch(() => ({ summary: {} })),
    ]).then(([
      profilePayload,
      planPayload,
      orderPayload,
      badgePayload,
      countdownPayload,
      leaderboardPayload,
      statsPayload,
      trendPayload,
      historyPayload,
    ]) => {
      setProfile(profilePayload.item || null);
      setPlans(planPayload.items || []);
      setOrders(orderPayload.items || []);
      setBadges(badgePayload.items || []);
      setCountdowns(countdownPayload.items || []);
      setLeaderboard(leaderboardPayload.items || []);
      setCurrentRank(leaderboardPayload.currentUser || null);
      setLearningStats(statsPayload.item || null);
      setLearningTrend(trendPayload.items || []);
      setPracticeHistory(historyPayload.items || []);
    }).catch(nextError => setError(nextError instanceof Error ? nextError.message : '个人中心加载失败'));
  }

  useEffect(() => {
    reload();
  }, []);

  async function handleCheckIn() {
    try {
      const payload = await checkIn();
      setMessage(`签到成功，当前积分 ${String(payload.item?.score ?? '')}`);
      reload();
    } catch (nextError) {
      setError(nextError instanceof Error ? nextError.message : '签到失败');
    }
  }

  async function handleRedeem() {
    try {
      await checkActivationCode(activationCode);
      await redeemActivationCode(activationCode);
      setMessage('激活码兑换成功');
      setActivationCode('');
      reload();
    } catch (nextError) {
      setError(nextError instanceof Error ? nextError.message : '激活码兑换失败');
    }
  }

  async function handleLogout() {
    await logout();
    Taro.redirectTo({ url: '/pages/student/login/index' });
  }

  const maxAnswers = maxTrendAnswers(learningTrend);
  const answerStats = learningStats?.answers;
  const reportStats = learningStats?.reports;
  const wrongBook = learningStats?.wrongBook;
  const favoriteStats = learningStats?.favorites;
  const questionTypes = learningStats?.questionTypes || [];
  const bestPlan = plans[0];

  return (
    <View className='student-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>Profile</Text>
          <Text className='student-title'>{profile?.name || profile?.phone || '个人中心'}</Text>
          <Text className='student-subtitle'>{profile?.membership?.isSvip ? 'SVIP 生效中' : '普通用户'} · 积分 {profile?.score ?? 0}</Text>
        </View>
        <Button className='secondary-button' onClick={handleLogout}>退出</Button>
      </View>

      <View className='grid-two'>
        <View className='metric'><Text className='metric-value'>{String(answerStats?.totalAnswered ?? (profile?.stats?.answers as Record<string, unknown> | undefined)?.totalAnswered ?? 0)}</Text><Text className='metric-label'>累计答题</Text></View>
        <View className='metric'><Text className='metric-value'>{String((profile?.stats?.vocabulary as Record<string, unknown> | undefined)?.masteredWords ?? 0)}</Text><Text className='metric-label'>掌握单词</Text></View>
      </View>

      <View className='section-block'>
        <Text className='section-heading'>学习报告</Text>
        <View className='report-panel learning-report-panel'>
          <View className='grid-two'>
            <View className='metric compact-metric'>
              <Text className='metric-value'>{percent(answerStats?.accuracy)}</Text>
              <Text className='metric-label'>累计正确率</Text>
            </View>
            <View className='metric compact-metric'>
              <Text className='metric-value'>{String(answerStats?.todayAnswered ?? 0)}</Text>
              <Text className='metric-label'>今日答题</Text>
            </View>
            <View className='metric compact-metric'>
              <Text className='metric-value'>{String(wrongBook?.unresolvedWrong ?? 0)}</Text>
              <Text className='metric-label'>待解决错题</Text>
            </View>
            <View className='metric compact-metric'>
              <Text className='metric-value'>{String(reportStats?.bestScore ?? 0)}</Text>
              <Text className='metric-label'>模考/练习最高分</Text>
            </View>
          </View>
          <Text className='row-meta report-summary-line'>
            近 {String(learningStats?.windowDays || 30)} 天题型统计 · 最近答题 {dateText(answerStats?.latestAnsweredAt)} · 已完成报告 {String(reportStats?.reportCount || 0)} 份
          </Text>
        </View>
      </View>

      <View className='section-block'>
        <Text className='section-heading'>14 天趋势</Text>
        {learningTrend.length ? (
          <View className='trend-chart'>
            {learningTrend.map(item => {
              return (
                <View className='trend-column' key={item.date}>
                  <Text className='trend-value'>{String(item.answeredCount || 0)}</Text>
                  <View className='trend-bar-track'>
                    <View className={`trend-bar-fill ${trendBucket(item.answeredCount || 0, maxAnswers)}`} />
                  </View>
                  <Text className='trend-label'>{shortDate(item.date)}</Text>
                </View>
              );
            })}
          </View>
        ) : <View className='empty-state'>暂无趋势数据，完成练习后会自动生成。</View>}
      </View>

      <View className='section-block'>
        <Text className='section-heading'>题型表现</Text>
        {questionTypes.length ? (
          <View className='list-stack'>
            {questionTypes.slice(0, 6).map(item => (
              <View className='list-row' key={item.questionType}>
                <View className='split-row'>
                  <Text className='row-main'>{item.typeLabel || item.questionType}</Text>
                  <Text className='status-badge'>{percent(item.accuracy)}</Text>
                </View>
                <Text className='row-meta'>已答 {String(item.answeredCount)} · 正确 {String(item.correctCount)} · 错误 {String(item.wrongCount)}</Text>
                <View className='progress-track'>
                  <View className={`progress-fill ${progressBucket(item.accuracy)}`} />
                </View>
              </View>
            ))}
          </View>
        ) : <View className='empty-state'>暂无题型统计，开始刷题后这里会显示强弱项。</View>}
      </View>

      <View className='section-block'>
        <Text className='section-heading'>最近练习</Text>
        {practiceHistory.length ? (
          <View className='list-stack'>
            {practiceHistory.map(item => (
              <View className='list-row' key={item.id}>
                <View className='split-row'>
                  <Text className='row-main'>{practiceTitle(item)}</Text>
                  <Text className={`status-badge ${sessionStatusClass(item.status)}`}>{sessionStatusLabel(item.status)}</Text>
                </View>
                <Text className='row-meta'>
                  {modeLabel(item.mode)} · 已答 {String(item.answeredCount || 0)} / {String(item.questionCount || 0)} · 正确率 {percent(item.accuracy)}
                </Text>
                <Text className='row-meta'>开始 {dateText(item.startedAt)}{item.submittedAt ? ` · 交卷 ${dateText(item.submittedAt)}` : ''}</Text>
                <View className='toolbar compact-toolbar'>
                  {item.status === 'active' ? (
                    <Button className='primary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/practice/index?practiceSessionId=${item.id}` })}>继续</Button>
                  ) : null}
                  {item.reportId ? (
                    <Button className='secondary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/reports/index?practiceSessionId=${item.id}` })}>报告</Button>
                  ) : null}
                </View>
              </View>
            ))}
          </View>
        ) : <View className='empty-state'>还没有练习历史，可以先从题库入口开始。</View>}
      </View>

      <View className='section-block'>
        <Text className='section-heading'>目标与考试</Text>
        <View className='list-stack'>
          <View className='list-row'>
            <Text className='row-main'>{profile?.target?.regionName || '未选择地区'}{profile?.target?.schoolName ? ` · ${profile.target.schoolName}` : ''}</Text>
            <Text className='row-meta'>{profile?.target?.majorName || '暂无目标专业'}</Text>
          </View>
          {countdowns.slice(0, 3).map(item => (
            <View className='list-row' key={String(item.id || item.examName)}>
              <Text className='row-main'>{String(item.examName || '考试')}</Text>
              <Text className='row-meta'>剩余 {String(item.daysLeft ?? '-')} 天</Text>
            </View>
          ))}
        </View>
        <View className='toolbar wrap'>
          <Button className='secondary-button' onClick={() => Taro.navigateTo({ url: '/pages/student/region/index' })}>切换地区</Button>
          <Button className='secondary-button' onClick={() => Taro.navigateTo({ url: '/pages/student/review/index?type=wrong' })}>错题本</Button>
          <Button className='secondary-button' onClick={() => Taro.navigateTo({ url: '/pages/student/review/index?type=favorite' })}>收藏夹</Button>
          <Button className='secondary-button' onClick={() => Taro.navigateTo({ url: '/pages/student/reports/index' })}>练习报告</Button>
        </View>
      </View>

      <View className='section-block'>
        <Text className='section-heading'>会员套餐</Text>
        <View className='list-stack'>
          {plans.slice(0, 4).map(item => (
            <View className='list-row' key={item.id} onClick={() => Taro.navigateTo({ url: `/pages/student/checkout/index?planId=${encodeURIComponent(item.id)}${profile?.target?.regionId ? `&regionId=${encodeURIComponent(profile.target.regionId)}` : ''}` })}>
              <Text className='row-main'>{item.name} · ¥{String(item.price ?? 0)}</Text>
              <Text className='row-meta'>{item.days === -1 ? '永久' : `${item.days || 0} 天`} {item.badge ? ` · ${item.badge}` : ''}</Text>
            </View>
          ))}
        </View>
        <View className='toolbar wrap'>
          <Button className='primary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/checkout/index${bestPlan?.id ? `?planId=${encodeURIComponent(bestPlan.id)}` : profile?.target?.regionId ? `?regionId=${encodeURIComponent(profile.target.regionId)}` : ''}` })}>开通会员</Button>
        </View>
      </View>

      <View className='section-block'>
        <Text className='section-heading'>激活码</Text>
        <View className='toolbar'>
          <Input className='input' placeholder='输入激活码' value={activationCode} onInput={event => setActivationCode(String(event.detail.value || ''))} />
          <Button className='primary-button' onClick={handleRedeem}>兑换</Button>
        </View>
      </View>

      <View className='section-block'>
        <Text className='section-heading'>订单</Text>
        <View className='list-stack'>
          {orders.slice(0, 5).map(item => (
            <View className='list-row' key={item.id} onClick={() => Taro.navigateTo({ url: `/pages/student/order-detail/index?orderNo=${encodeURIComponent(item.orderNo)}` })}>
              <Text className='row-main'>{item.productName || item.orderNo}</Text>
              <Text className='row-meta'>{item.status} · ¥{((item.amountCents || 0) / 100).toFixed(2)}</Text>
            </View>
          ))}
        </View>
      </View>

      <View className='section-block'>
        <Text className='section-heading'>成长数据</Text>
        <View className='toolbar'>
          <Button className='primary-button' onClick={handleCheckIn}>签到</Button>
          <Button className='secondary-button' onClick={() => Taro.navigateTo({ url: '/pages/student/catalog/index' })}>刷题</Button>
        </View>
        <View className='grid-two'>
          <View className='metric'><Text className='metric-value'>{String(badges.length)}</Text><Text className='metric-label'>勋章</Text></View>
          <View className='metric'><Text className='metric-value'>{currentRank ? `第${String(currentRank.rank)}` : String(leaderboard.length)}</Text><Text className='metric-label'>{currentRank ? `7 日答题榜 · ${String(currentRank.value)} 题` : '排行榜样本'}</Text></View>
          <View className='metric'><Text className='metric-value'>{String(favoriteStats?.favoriteQuestions ?? 0)}</Text><Text className='metric-label'>收藏题目</Text></View>
          <View className='metric'><Text className='metric-value'>{percent(reportStats?.avgAccuracy)}</Text><Text className='metric-label'>报告平均正确率</Text></View>
        </View>
      </View>

      {message ? <Text className='success-text'>{message}</Text> : null}
      {error ? <Text className='error-text'>{error}</Text> : null}
    </View>
  );
}