GarminHealthLab/client/src/components/AiPanel.tsx

import { useCallback } from 'react';
import {
  apiClient, InsightScope, InsightMeta, ScopeInsight,
} from '../services/api';
import { usePolledInsight } from '../lib/insight';
import './AiPanel.css';

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

interface Props {
  scope: InsightScope;
  /** Identifies the item for per-item screens: an activity id, a date. */
  subject?: string;
  /** Heading. Defaults to the generic one. */
  title?: string;
}

function Badge({ meta }: { meta: InsightMeta }) {
  if (meta.source === 'ai') {
    return (
      <span className="aip-badge aip-badge-ai" title={meta.model ?? undefined}>
        AI 生成{meta.upstream ? ` · ${meta.upstream}` : ''}
      </span>
    );
  }
  if (meta.pending) {
    return (
      <span className="aip-badge aip-badge-pending">
        <span className="aip-spinner" aria-hidden="true" />
        排队生成中
      </span>
    );
  }
  return <span className="aip-badge" title={meta.reason}>直接计算</span>;
}

/**
 * One screen's AI reading.
 *
 * The same component on every screen: what differs between 睡眠 and 运动 is
 * entirely in the context the backend builds, so a new screen is one more
 * `<AiPanel scope="…" />` and a builder — not another card.
 *
 * It always renders something. The computed facts appear immediately, and the
 * model's interpretation replaces them when the coach's queue reaches this
 * screen — which opening the screen moves to the front of.
 */
function AiPanel({ scope, subject, title = 'AI 解读' }: Props) {
  const load = useCallback(async () => {
    const resp = await apiClient.getInsight(scope, { subject });
    return { data: resp.insight, meta: resp.meta };
  }, [scope, subject]);

  const { data, meta, loading, error, refresh } =
    usePolledInsight<ScopeInsight>(load);

  if (loading && !data) return <div className="aip-skeleton" aria-label="正在读取解读" />;
  if (error) return <section className="aip aip-error">{error}</section>;
  if (!data || !meta) return null;
  // Nothing to read yet on this screen — a card saying so is worse than none.
  if (meta.source === 'none') return null;

  return (
    <section className="aip">
      <div className="aip-head">
        <h3 className="sec-title">{title}</h3>
        <Badge meta={meta} />
      </div>

      {data.headline && <p className="aip-headline">{data.headline}</p>}

      {data.points.map((p) => (
        <div className="aip-point" key={p.title + p.detail}>
          <span className="aip-tag">{p.title}</span>
          <p>{p.detail}</p>
        </div>
      ))}

      {!!data.actions.length && (
        <ul className="aip-actions">
          {data.actions.map((a) => <li key={a}>{a}</li>)}
        </ul>
      )}

      {data.caution && <p className="aip-caution">{data.caution}</p>}

      <div className="aip-foot">
        <button className="aip-link" onClick={refresh} disabled={loading}>
          {loading ? '重新生成中…' : '重新生成'}
        </button>
        <span>{CONFIDENCE_LABEL[data.confidence]}</span>
      </div>
    </section>
  );
}

export default AiPanel;