import { useEffect, useState } from 'react';
import { apiClient, errorMessage, RatingBasis } from '../services/api';
import Screen from '../components/Screen';
import Skeleton from '../components/Skeleton';
import './BodyAge.css';

/**
 * Where every rating in the app comes from.
 *
 * A band that paints a number 偏低 is making a claim about the user's health.
 * This screen is the receipt for that claim — one row per metric, with the
 * source named, including the ones whose honest source is "general guidance,
 * no authoritative standard".
 */
function RatingBasisPage() {
  const [basis, setBasis] = useState<RatingBasis | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    apiClient
      .getRatingBasis()
      .then(setBasis)
      .catch((err) => setError(errorMessage(err, '加载失败')))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <Screen title="评分依据" backLink><Skeleton count={5} /></Screen>;
  if (error || !basis) {
    return (
      <Screen title="评分依据" backLink>
        <div className="screen-error">{error || '加载失败'}</div>
      </Screen>
    );
  }

  return (
    <Screen title="评分依据" backLink>
      <p className="ba-summary">{basis.note}</p>

      <section className="sec">
        <h3 className="sec-title">各指标参考区间</h3>
        <div className="ba-basis">
          {basis.bands.map((b) => (
            <div className="ba-basis-item" key={b.metric}>
              <div className="ba-basis-name">{b.metric}</div>
              <div className="ba-basis-detail rb-bands">{b.bands}</div>
              <div className="ba-basis-source">来源：{b.source}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="sec">
        <h3 className="sec-title">{basis.fitnessAge.title}</h3>
        <p className="ba-summary">{basis.fitnessAge.summary}</p>
        <div className="ba-basis">
          {basis.fitnessAge.steps.map((s) => (
            <div className="ba-basis-item" key={s.name}>
              <div className="ba-basis-name">{s.name}</div>
              <div className="ba-basis-detail">{s.detail}</div>
              <div className="ba-basis-source">来源：{s.source}</div>
            </div>
          ))}
        </div>
      </section>

      <p className="screen-disclaimer">{basis.fitnessAge.caveat}</p>
    </Screen>
  );
}

export default RatingBasisPage;