GarminHealthLab/client/src/pages/Sleep.tsx

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { apiClient, errorMessage, HealthDay } from '../services/api';
import Chart from '../components/charts/Chart';
import StatTile from '../components/charts/StatTile';
import Skeleton from '../components/Skeleton';
import './Pages.css';

const RANGES = [7, 14, 30, 90];
const H = 3600;

function avg(values: Array<number | null | undefined>): number | null {
  const present = values.filter((v): v is number => v != null);
  return present.length ? present.reduce((a, b) => a + b, 0) / present.length : null;
}

function Sleep() {
  const [days, setDays] = useState<HealthDay[]>([]);
  // 14 by default: the stacked chart needs bars wide enough to read the
  // thinnest stage and to give hover a ~24px hit target. Longer windows stay
  // available for the trend, where density matters less.
  const [range, setRange] = useState(14);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const load = async () => {
      setLoading(true);
      try {
        const end = new Date();
        const start = new Date(end.getTime() - (range - 1) * 86400000);
        setDays(
          await apiClient.getHealthSummary(
            start.toISOString().slice(0, 10),
            end.toISOString().slice(0, 10)
          )
        );
      } catch (err: any) {
        setError(errorMessage(err, '加载睡眠数据失败'));
      } finally {
        setLoading(false);
      }
    };
    load();
  }, [range]);

  const nights = days.filter((d) => d.sleepDuration != null);

  // Stage seconds are converted to hours here so the stacked bar and the
  // duration chart share one y-scale — a chart never carries two scales.
  const rows = nights.map((d) => ({
    date: d.date.slice(5),
    deep: d.sleep?.deepSeconds != null ? d.sleep.deepSeconds / H : null,
    light: d.sleep?.lightSeconds != null ? d.sleep.lightSeconds / H : null,
    rem: d.sleep?.remSeconds != null ? d.sleep.remSeconds / H : null,
    awake: d.sleep?.awakeSeconds != null ? d.sleep.awakeSeconds / H : null,
    quality: d.sleepQuality,
    spo2: d.sleepSpo2Avg,
    respiration: d.sleepRespirationAvg,
    stress: d.sleepStressAvg,
  }));

  const avgDeep = avg(rows.map((r) => r.deep));
  const avgRem = avg(rows.map((r) => r.rem));
  const avgLight = avg(rows.map((r) => r.light));
  const avgAwake = avg(rows.map((r) => r.awake));
  const avgDuration = avg(nights.map((d) => d.sleepDuration));
  const avgQuality = avg(nights.map((d) => d.sleepQuality));

  const totalStages = [avgDeep, avgLight, avgRem].reduce<number>(
    (sum, v) => sum + (v ?? 0), 0
  );
  const share = (v: number | null) =>
    v == null || totalStages === 0 ? undefined : `占 ${Math.round((v / totalStages) * 100)}%`;

  const hrs = (v: number | null, d = 1) => (v == null ? null : Math.round(v * 10 ** d) / 10 ** d);

  return (
    <div className="page">
      <header className="page-head">
        <div>
          <h2>睡眠</h2>
          <p className="subtitle">分期、评分与夜间生理指标</p>
        </div>
        <div className="range-tabs">
          {RANGES.map((r) => (
            <button
              key={r}
              className={`range-tab ${r === range ? 'active' : ''}`}
              onClick={() => setRange(r)}
            >
              {r} 天
            </button>
          ))}
        </div>
      </header>

      {error && <div className="error-message">{error}</div>}
      {loading && (
        <>
          <Skeleton count={6} />
          <div style={{ height: '1rem' }} />
          <Skeleton count={2} variant="chart" />
        </>
      )}

      {!loading && !error && nights.length === 0 && (
        <div className="empty-state">
          <p>所选区间内没有睡眠记录。</p>
          <Link to="/sync" className="btn btn-primary">去同步数据</Link>
        </div>
      )}

      {!loading && !error && nights.length > 0 && (
        <>
          <section className="section">
            <h3 className="section-title">{nights.length} 晚平均</h3>
            <div className="tile-grid">
              <StatTile label="总时长" value={hrs(avgDuration)} unit="小时" />
              <StatTile label="睡眠评分" value={hrs(avgQuality, 0)} unit="/100" />
              <StatTile label="深睡" value={hrs(avgDeep)} unit="小时" detail={share(avgDeep)} />
              <StatTile label="浅睡" value={hrs(avgLight)} unit="小时" detail={share(avgLight)} />
              <StatTile label="REM" value={hrs(avgRem)} unit="小时" detail={share(avgRem)} />
              <StatTile label="夜间清醒" value={hrs(avgAwake)} unit="小时" />
            </div>
          </section>

          <section className="section">
            <div className="chart-grid one-col">
              <Chart
                title="睡眠分期"
                unit="小时"
                subtitle="每晚各阶段时长堆叠；总高度即当晚睡眠总时长"
                data={rows}
                type="stacked-bar"
                height={280}
                series={[
                  { key: 'deep', label: '深睡', slot: 1, unit: '小时', decimals: 1 },
                  { key: 'light', label: '浅睡', slot: 2, unit: '小时', decimals: 1 },
                  { key: 'rem', label: 'REM', slot: 3, unit: '小时', decimals: 1 },
                  { key: 'awake', label: '清醒', slot: 4, unit: '小时', decimals: 1 },
                ]}
                footer="成人参考：深睡约占 13–23%，REM 约占 20–25%。"
              />
            </div>

            <div className="chart-grid">
              <Chart
                title="睡眠评分"
                unit="/100"
                data={rows}
                type="area"
                series={[{ key: 'quality', label: '评分', slot: 1 }]}
              />
              <Chart
                title="夜间血氧"
                unit="%"
                data={rows}
                type="line"
                series={[{ key: 'spo2', label: '血氧', slot: 1, unit: '%', decimals: 1 }]}
              />
              <Chart
                title="夜间呼吸频率"
                unit="次/分"
                data={rows}
                type="line"
                series={[
                  { key: 'respiration', label: '呼吸', slot: 1, unit: '次/分', decimals: 1 },
                ]}
              />
              <Chart
                title="睡眠压力"
                data={rows}
                type="line"
                series={[{ key: 'stress', label: '压力', slot: 1, decimals: 1 }]}
              />
            </div>
          </section>
        </>
      )}
    </div>
  );
}

export default Sleep;