GarminHealthLab/client/src/pages/Recommendations.tsx

import { useCallback, useEffect, useState } from 'react';
import {
  apiClient, errorMessage, AiRecommendations, ModelInfo, parseUtc,
} from '../services/api';
import './Recommendations.css';

const PRIORITY_LABEL: Record<string, string> = {
  high: '高',
  medium: '中',
  low: '低',
};

function Recommendations() {
  const [models, setModels] = useState<ModelInfo[]>([]);
  const [selected, setSelected] = useState<string>('');
  const [result, setResult] = useState<AiRecommendations | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const [regenerating, setRegenerating] = useState(false);

  const load = useCallback(async (model?: string, refresh?: boolean) => {
    setLoading(true);
    setRegenerating(Boolean(refresh || model));
    setError('');
    try {
      setResult(await apiClient.getAiRecommendations(model || undefined, refresh));
    } catch (err: any) {
      setError(errorMessage(err, '获取建议失败'));
    } finally {
      setLoading(false);
      setRegenerating(false);
    }
  }, []);

  useEffect(() => {
    const init = async () => {
      try {
        const list = await apiClient.getModels();
        setModels(list);
        setSelected(list.find((m) => m.default && m.configured)?.id ?? '');
      } catch {
        // The model list is a convenience; recommendations still work without it.
      }
      load();
    };
    init();
  }, [load]);

  const configured = models.filter((m) => m.configured);
  const meta = result?.meta;

  return (
    <div className="page">
      <h2>健康建议</h2>
      <p className="subtitle">基于你的历史数据生成，可切换不同的大模型</p>

      <div className="model-bar">
        <label htmlFor="model-select">模型</label>
        <select
          id="model-select"
          value={selected}
          onChange={(e) => {
            setSelected(e.target.value);
            load(e.target.value);
          }}
          disabled={loading || configured.length === 0}
        >
          <option value="">自动（按优先级依次尝试）</option>
          {models.map((m) => (
            <option key={m.id} value={m.id} disabled={!m.configured}>
              {m.id} · {(m.contextWindow / 1000).toLocaleString()}k
              {m.configured ? '' : '（未配置密钥）'}
            </option>
          ))}
        </select>

        <button
          className="btn btn-primary"
          onClick={() => load(selected, true)}
          disabled={loading}
        >
          {loading ? '生成中…' : '重新生成'}
        </button>
      </div>

      {regenerating && (
        <div className="notice">
          正在请求大模型重新分析，通常需要 1-3 分钟（推理模型会先推演再作答）。
          期间可以离开本页，结果会被缓存下来。
        </div>
      )}

      {configured.length === 0 && models.length > 0 && (
        <div className="notice">
          尚未配置任何模型密钥。在 <code>backend/.env</code> 中填入
          <code>GEMINI_API_KEY</code> 或 <code>NVIDIA_API_KEY</code> 即可启用 AI 建议；
          在此之前下面显示的是规则引擎的结果。
        </div>
      )}

      {error && <div className="error-message">{error}</div>}

      {meta && (
        <div className={`meta-bar ${meta.source}`}>
          {meta.source === 'ai' ? (
            <>
              <strong>AI 生成</strong> · 模型 {meta.model}
              {meta.upstream && `（上游 ${meta.upstream}）`}
              {' · '}分析了 {meta.days} 天数据
              {meta.cached && (
                <span className="fallback">
                  · 缓存结果
                  {meta.generatedAt &&
                    `，生成于 ${parseUtc(meta.generatedAt)?.toLocaleString('zh-CN')}`}
                </span>
              )}
              {meta.fallbackFrom && meta.fallbackFrom.length > 0 && (
                <span className="fallback">
                  （{meta.fallbackFrom.join('、')} 失败后自动切换）
                </span>
              )}
            </>
          ) : (
            <>
              <strong>规则引擎</strong>
              {meta.reason && <span className="fallback">· {meta.reason}</span>}
            </>
          )}
        </div>
      )}

      {loading && !result && <div className="page-loading">正在分析…</div>}

      <div className="rec-list">
        {result?.recommendations.map((rec) => (
          <article key={rec.id} className={`rec-card priority-${rec.priority}`}>
            <header className="rec-header">
              <span className="rec-category">{rec.category}</span>
              <span className={`rec-priority priority-${rec.priority}`}>
                {PRIORITY_LABEL[rec.priority] ?? rec.priority}
              </span>
            </header>
            <p className="rec-body">{rec.recommendation}</p>
            {rec.basedOn.length > 0 && (
              <footer className="rec-based-on">
                依据：{rec.basedOn.join('、')}
              </footer>
            )}
          </article>
        ))}
      </div>

      <p className="disclaimer">
        以上内容由数据分析生成，不构成医疗建议。如有健康问题请咨询专业医师。
      </p>
    </div>
  );
}

export default Recommendations;