// proto_trend.jsx — Trend detail screen
function TrendScreen() {
  const T = useTheme();
  const app = useApp();
  const { A, B, names, goal } = app;
  const [range, setRange] = React.useState('全部');
  const [who, setWho] = React.useState('both'); // 'A' | 'B' | 'both'
  const sliceN = range === '周' ? 7 : range === '月' ? 30 : A.series.length;
  const aS = A.series.slice(-Math.min(sliceN, A.series.length));
  const bS = B.series.slice(-Math.min(sliceN, B.series.length));
  const dS = A.days.slice(-Math.min(sliceN, A.days.length));
  const card = { background: T.card, borderRadius: T.r, boxShadow: T.shadow };

  const stat = (label, val, unit, color) => (
    <div style={{ flex: 1, textAlign: 'center' }}>
      <div style={{ fontFamily: T.NUM, fontSize: 23, fontWeight: 800, color: color || T.ink }}>{val}<span style={{ fontSize: 12, fontWeight: 600 }}>{unit}</span></div>
      <div style={{ fontSize: 11.5, color: T.faint, marginTop: 2 }}>{label}</div>
    </div>
  );

  const totalLost = (A.start - A.cur).toFixed(1);
  const avgPerWeek = (totalLost / Math.max(1, A.series.length / 7)).toFixed(1);
  const recent = [...A.series].slice(-6).reverse();

  return (
    <>
      <PageTitle title="体重趋势" sub={`记录 ${A.series.length} 天 · 坚持就是胜利`} />
      <div style={{ flex: 1, overflow: 'auto', padding: '8px 20px 28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* my stats row */}
        <div style={{ ...card, padding: '18px 12px', display: 'flex', alignItems: 'center' }}>
          {stat('已减重', totalLost, 'kg', T.good)}
          <div style={{ width: 1, height: 34, background: T.line }} />
          {stat('当前', A.cur, 'kg')}
          <div style={{ width: 1, height: 34, background: T.line }} />
          {stat('周均', avgPerWeek, 'kg', T.Ad)}
        </div>

        {/* chart */}
        <div style={{ ...card, padding: '16px 14px 14px' }}>
          {/* who filter */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 12, padding: '0 2px' }}>
            {[['both','两人'],['A',names.A],['B',names.B]].map(([k, lbl]) => (
              <button key={k} onClick={() => setWho(k)} style={{ border: 'none', borderRadius: 999, padding: '6px 14px', cursor: 'pointer', fontFamily: T.FONT, fontSize: 12.5, fontWeight: 700, background: who===k ? (k==='B'?T.Bs:k==='A'?T.As:T.bg2) : 'transparent', color: who===k ? (k==='B'?T.Bd:k==='A'?T.Ad:T.ink) : T.faint, outline: who===k?'none':`1px solid ${T.line}` }}>{lbl}</button>
            ))}
          </div>
          <DualChart a={who==='B'?bS:aS} b={bS} days={dS} goalA={who==='B'?goal.B:goal.A} w={314} h={188} showB={who==='both'} />
          {/* range */}
          <div style={{ display: 'flex', gap: 4, background: T.bg2, padding: 4, borderRadius: 12, marginTop: 14 }}>
            {['周','月','全部'].map(r => (
              <button key={r} onClick={() => setRange(r)} style={{ flex: 1, border: 'none', borderRadius: 9, padding: '7px 0', cursor: 'pointer', fontFamily: T.FONT, fontSize: 13.5, fontWeight: 700, background: range===r ? T.card : 'transparent', color: range===r ? T.ink : T.faint, boxShadow: range===r ? '0 1px 4px rgba(0,0,0,0.08)' : 'none' }}>{r}</button>
            ))}
          </div>
        </div>

        {/* records list */}
        <div style={{ ...card, padding: 6 }}>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: T.ink, padding: '12px 14px 8px' }}>最近记录</div>
          {recent.length === 0 && <div style={{ padding: '8px 14px 16px', fontSize: 13, color: T.faint }}>还没有记录，点下方 ＋ 打卡吧</div>}
          {recent.map((v, i) => {
            const prev = recent[i+1];
            const d = prev != null ? v - prev : 0;
            const day = A.days[A.days.length - 1 - i];
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', borderTop: i ? `1px solid ${T.line}` : 'none' }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: i===0 ? T.Ac : T.line, flexShrink: 0 }} />
                <span style={{ fontFamily: T.NUM, fontSize: 13.5, color: T.sub, width: 44 }}>{day}</span>
                <span style={{ fontFamily: T.NUM, fontSize: 17, fontWeight: 700, color: T.ink, flex: 1 }}>{v.toFixed(1)}<span style={{ fontSize: 12, color: T.faint }}> kg</span></span>
                {prev != null && (
                  <span style={{ fontFamily: T.NUM, fontSize: 13.5, fontWeight: 700, color: d <= 0 ? T.good : T.Bd, background: d<=0?T.goodS:T.Bs, padding: '3px 9px', borderRadius: 999 }}>{d<=0?'↓':'↑'}{Math.abs(d).toFixed(1)}</span>
                )}
                {i === 0 && <span style={{ fontSize: 11, color: T.faint }}>今天</span>}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}
window.TrendScreen = TrendScreen;