GarminHealthLab/client/src/pages/ChallengesPage.tsx

import { useEffect, useMemo, useState } from 'react';
import { Link } from 'framework7-react';
import { apiClient, Challenge, errorMessage } from '../services/api';
import Screen from '../components/Screen';
import AiPanel from '../components/AiPanel';
import { FEATURES } from '../features';
import Skeleton from '../components/Skeleton';
import './Challenges.css';

const KIND_LABEL: Record<string, string> = {
  badge: '徽章挑战',
  adhoc: '好友挑战',
  available: '可参加',
  inprogress: '进行中',
};

/** Percentage complete, if the payload carries a target and a total. */
function progressOf(c: Challenge): number | null {
  const p = c.payload || {};
  const target = p.badgeTargetValue ?? p.targetValue ?? p.challengeTargetValue;
  const current = p.userRankValue ?? p.badgeProgressValue ?? p.currentValue;
  if (!target || current == null) return null;
  return Math.min(100, Math.round((Number(current) / Number(target)) * 100));
}

function ChallengesPage() {
  const [rows, setRows] = useState<Challenge[]>([]);
  const [kind, setKind] = useState<string>('all');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

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

  const kinds = useMemo(
    () => ['all', ...Array.from(new Set(rows.map((r) => r.kind)))],
    [rows]
  );
  const shown = kind === 'all' ? rows : rows.filter((r) => r.kind === kind);

  if (loading) return <Screen title="挑战赛" backLink><Skeleton count={5} /></Screen>;

  return (
    <Screen title="挑战赛" backLink subtitle={`共 ${rows.length} 项`}>
      {error && <div className="screen-error">{error}</div>}

      {rows.length === 0 ? (
        <div className="screen-empty">
          <p>还没有挑战赛数据。</p>
          <Link href="/sync/" className="button button-fill button-round">去同步</Link>
        </div>
      ) : (
        <>
          {FEATURES.ai && <AiPanel scope="challenges" title="AI 挑战赛解读" />}

          {kinds.length > 2 && (
            <div className="metric-tabs">
              {kinds.map((k) => (
                <button
                  key={k}
                  className={`metric-tab ${k === kind ? 'active' : ''}`}
                  onClick={() => setKind(k)}
                >
                  {k === 'all' ? '全部' : KIND_LABEL[k] ?? k}
                </button>
              ))}
            </div>
          )}

          <div className="chal-list">
            {shown.map((c, i) => {
              const pct = progressOf(c);
              return (
                <div className="chal" key={`${c.uuid}-${i}`}>
                  <div className="chal-head">
                    <span className="chal-name">{c.name || '未命名挑战'}</span>
                    <span className="chal-kind">{KIND_LABEL[c.kind] ?? c.kind}</span>
                  </div>
                  {(c.startDate || c.endDate) && (
                    <div className="chal-dates">
                      {c.startDate} {c.endDate ? `→ ${c.endDate}` : ''}
                    </div>
                  )}
                  {pct != null && (
                    <>
                      <div className="chal-bar">
                        <div className="chal-fill" style={{ width: `${pct}%` }} />
                      </div>
                      <div className="chal-pct">{pct}%</div>
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </>
      )}
    </Screen>
  );
}

export default ChallengesPage;