GarminHealthLab/client/src/components/TrendInsight.tsx

import { useEffect, useRef, useState } from 'react';
import {
  apiClient, errorMessage, InsightMeta, TrendInsight as Insight,
} from '../services/api';
import './TrendInsight.css';

/**
 * Metric ids the backend's feature engineering knows, keyed by the id this app
 * uses. Two names differ (the sleep shares), the rest are identical.
 *
 * Kept as an explicit list rather than sent optimistically: the endpoint 400s
 * on an unknown metric, and a button that reliably fails is worse than no
 * button on the metrics this cannot explain.
 */
const BACKEND_METRIC: Record<string, string> = {
  steps: 'steps',
  intensityMinutes: 'intensityMinutes',
  heartRate: 'heartRate',
  heartRateVariability: 'heartRateVariability',
  stress: 'stress',
  bodyBatteryHigh: 'bodyBatteryHigh',
  respirationAvg: 'respirationAvg',
  sleepDuration: 'sleepDuration',
  sleepQuality: 'sleepQuality',
  deepShare: 'sleepDeepPct',
  remShare: 'sleepRemPct',
  trainingReadiness: 'trainingReadiness',
  enduranceScore: 'enduranceScore',
};

export function supportsInsight(metricId: string) {
  return metricId in BACKEND_METRIC;
}

const CONFIDENCE_LABEL: Record<string, string> = {
  high: '证据充分', medium: '证据一般', low: '证据薄弱',
};

interface Props {
  /** This app's metric id, e.g. `heartRateVariability`. */
  metricId: string;
  startDate: string;
  endDate: string;
}

/**
 * AI attribution for the span currently on the chart.
 *
 * The product spec asks for this on a brush selection over a desktop chart.
 * On a phone the equivalent gesture is the range selector that is already
 * there, so the panel explains whatever window the user has selected rather
 * than adding a drag interaction that fights the page's own scrolling.
 *
 * On demand, never on load: one generation takes minutes on the gateway, so
 * running it for every metric a user browses past would spend that on nothing.
 */
function TrendInsight({ metricId, startDate, endDate }: Props) {
  const [insight, setInsight] = useState<Insight | null>(null);
  const [meta, setMeta] = useState<InsightMeta | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const live = useRef(true);

  useEffect(() => {
    live.current = true;
    return () => { live.current = false; };
  }, []);

  // A new window is a different question; clear the old answer rather than
  // leaving it under a chart it no longer describes.
  useEffect(() => {
    setInsight(null);
    setMeta(null);
    setError('');
  }, [metricId, startDate, endDate]);

  const run = async (refresh?: boolean) => {
    const backend = BACKEND_METRIC[metricId];
    if (!backend || loading) return;
    setLoading(true);
    setError('');
    try {
      const data = await apiClient.getTrendInsight(backend, startDate, endDate, refresh);
      if (!live.current) return;
      setInsight(data.insight);
      setMeta(data.meta);
    } catch (err: any) {
      if (live.current) setError(errorMessage(err, '归因分析失败'));
    } finally {
      if (live.current) setLoading(false);
    }
  };

  if (!supportsInsight(metricId)) return null;

  return (
    <section className="ti">
      <div className="ti-head">
        <h3 className="sec-title">AI 归因</h3>
        {insight && !loading && (
          <button className="ti-link" onClick={() => run(true)}>重新分析</button>
        )}
      </div>

      {!insight && !loading && !error && (
        <>
          <p className="ti-hint">
            分析 {startDate} ~ {endDate} 这段区间内该指标的变化及其关联因素。
          </p>
          <button className="ti-run" onClick={() => run()}>分析这段区间</button>
        </>
      )}

      {loading && (
        <div className="ti-loading">
          <span className="ti-spinner" aria-hidden="true" />
          正在分析，通常需要 2–5 分钟
        </div>
      )}

      {error && <p className="ti-error">{error}</p>}

      {insight && (
        <div className="ti-body">
          {insight.summary && <p className="ti-summary">{insight.summary}</p>}

          {insight.drivers.map((d) => (
            <div className="ti-driver" key={d.factor + d.detail}>
              <span className="ti-factor">{d.factor}</span>
              <p>{d.detail}</p>
            </div>
          ))}

          {insight.caution && <p className="ti-caution">{insight.caution}</p>}

          <div className="ti-foot">
            <span>
              {meta?.source === 'ai' ? `AI 生成${meta.upstream ? ` · ${meta.upstream}` : ''}` : '规则引擎'}
            </span>
            <span>{CONFIDENCE_LABEL[insight.confidence]}</span>
          </div>
        </div>
      )}
    </section>
  );
}

export default TrendInsight;