GarminHealthLab/client/src/pages/HealthPage.tsx

import { useEffect, useState } from 'react';
import { Link, f7 } from 'framework7-react';
import { apiClient, errorMessage, FitnessAge, HealthDay } from '../services/api';
import { METRICS, metricHref } from '../lib/metrics';
import MetricCard from '../components/charts/MetricCard';
import Skeleton from '../components/Skeleton';
import Screen from '../components/Screen';
import { daysAgo, today as todayIso } from '../lib/day';
import './Health.css';
import './Settings.css';

const WINDOW_DAYS = 30;

/* Sections name metric ids; the labels, units and accessors come from the
   registry so 今日 / 健康 / 趋势 cannot disagree about what a metric is. */
const SECTIONS: Array<{ title: string; items: string[] }> = [
  { title: '身体指标', items: ['heartRate', 'heartRateVariability', 'respirationAvg', 'spo2Avg'] },
  { title: '恢复', items: ['bodyBatteryHigh', 'stress', 'trainingReadiness', 'enduranceScore'] },
  { title: '睡眠', items: ['sleepDuration', 'sleepQuality', 'deepShare', 'remShare'] },
  { title: '活动', items: ['steps', 'intensityMinutes', 'floorsAscended', 'distance'] },
  { title: '能量', items: ['caloriesBurned', 'activeCalories', 'bmrCalories', 'sedentary'] },
  { title: '身体成分', items: ['weight', 'bodyFat', 'hydration', 'hillScore'] },
];

/* Screens that are not a single metric, so they get their own entries. */
const LINKS: Array<[string, string, string]> = [
  ['/body/', '身体成分与血压', '体重、体脂、肌肉量、血压记录'],
  ['/race/', '成绩预测', '5 公里到全马的预测完赛时间'],
  ['/challenges/', '挑战赛', '徽章挑战与好友挑战'],
];

function BodyAge({ data }: { data: FitnessAge | null }) {
  if (!data) return null;

  const go = () => f7.views.current.router.navigate('/body-age/');

  if (data.value == null) {
    return (
      <section className="sec">
        <h3 className="sec-title">身体年龄</h3>
        <button className="bodyage bodyage-empty" onClick={go} type="button">
          <span className="bodyage-missing">
            还差 {data.missing.join('、')} 才能推算
          </span>
          <span className="mcard-chevron" aria-hidden="true">›</span>
        </button>
      </section>
    );
  }

  const delta = data.delta ?? 0;

  return (
    <section className="sec">
      <h3 className="sec-title">身体年龄</h3>
      <button className="bodyage" onClick={go} type="button">
        <div className="bodyage-main">
          <span className="bodyage-value">{data.value}</span>
          <span className="bodyage-unit">岁</span>
        </div>
        <div className="bodyage-side">
          <span className={`bodyage-delta ${delta < 0 ? 'good' : delta > 0 ? 'warn' : ''}`}>
            {delta === 0
              ? '与实际年龄相当'
              : `比实际年龄${delta < 0 ? '年轻' : '大'} ${Math.abs(delta)} 岁`}
          </span>
          <span className="bodyage-note">
            实际 {data.chronologicalAge} 岁 · 看推算过程
          </span>
        </div>
        <span className="mcard-chevron" aria-hidden="true">›</span>
      </button>
    </section>
  );
}

function HealthPage() {
  const [days, setDays] = useState<HealthDay[]>([]);
  const [bodyAge, setBodyAge] = useState<FitnessAge | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const load = async () => {
      try {
                setDays(
          await apiClient.getHealthSummary(
            daysAgo(WINDOW_DAYS - 1), todayIso()
          )
        );
      } catch (err: any) {
        setError(errorMessage(err, '加载失败'));
      } finally {
        setLoading(false);
      }
    };
    load();
    // Body age is a separate, optional read: an empty profile must not stop
    // the rest of the page from rendering.
    apiClient.getFitnessAge().then(setBodyAge).catch(() => setBodyAge(null));
  }, []);

  if (loading) {
    return (
      <Screen title="健康" subtitle="每项指标的最新值与参考区间">
        <Skeleton count={8} />
      </Screen>
    );
  }

  if (error) {
    return (
      <Screen title="健康" subtitle="每项指标的最新值与参考区间">
        <div className="screen-error">{error}</div>
      </Screen>
    );
  }

  if (days.length === 0) {
    return (
      <Screen title="健康" subtitle="每项指标的最新值与参考区间">
        <div className="screen-empty">
          <p>还没有任何健康数据。</p>
          <Link href="/sync/" className="button button-fill button-round">
            去同步 Garmin 数据
          </Link>
        </div>
      </Screen>
    );
  }

  // The most recent day that actually recorded a given metric — showing "—"
  // because today's sleep has not synced yet would hide data that exists.
  const latest = (pick: (d: HealthDay) => number | null) => {
    for (let i = days.length - 1; i >= 0; i--) {
      const v = pick(days[i]);
      if (v != null) return { value: v, date: days[i].date };
    }
    return { value: null as number | null, date: null as string | null };
  };

  return (
    <Screen title="健康" subtitle="每项指标的最新值与参考区间">
      <BodyAge data={bodyAge} />

      {SECTIONS.map((section) => (
        <section className="sec" key={section.title}>
          <h3 className="sec-title">{section.title}</h3>
          <div className="mcard-grid">
            {section.items.map((id) => {
              const def = METRICS[id];
              if (!def) return null;
              const { value, date } = latest(def.pick);
              const stale = date != null && date !== days[days.length - 1].date;
              return (
                <MetricCard
                  key={id}
                  metric={def.range}
                  label={def.label}
                  value={value}
                  unit={def.unit}
                  decimals={def.decimals}
                  trend={days.map(def.pick)}
                  detail={stale ? `最近记录 ${date!.slice(5)}` : undefined}
                  onClick={() => f7.views.current.router.navigate(metricHref(id))}
                />
              );
            })}
          </div>
        </section>
      ))}

      <section className="sec">
        <h3 className="sec-title">更多</h3>
        <div className="set-rows">
          {LINKS.map(([href, label, sub]) => (
            <Link href={href} className="set-row" key={href}>
              <span className="set-label">
                {label}
                <span className="set-sub">{sub}</span>
              </span>
              <span className="set-chevron" aria-hidden="true">›</span>
            </Link>
          ))}
        </div>
      </section>

      <p className="screen-disclaimer">
        参考区间为一般人群的定位范围，非诊断标准。如有健康疑问请咨询专业医师。
      </p>
    </Screen>
  );
}

export default HealthPage;