// proto_home.jsx — Home screen (combo layout, app-state driven)
function HomeScreen() {
  const T = useTheme();
  const app = useApp();
  const { A, B, names, goal, checkedToday, fire, openCheckin, like, poke } = app;
  const pct = Math.round(((A.start - A.cur) / (A.start - goal.A)) * 100);
  const toGoal = (A.cur - goal.A).toFixed(1);
  const lead = (A.weekLoss - B.weekLoss);
  const [range, setRange] = React.useState('周');
  const sliceN = range === '周' ? 7 : A.series.length;
  const aS = A.series.slice(-sliceN), bS = B.series.slice(-sliceN), dS = A.days.slice(-sliceN);
  const card = { background: T.card, borderRadius: T.r, padding: 18, boxShadow: T.shadow };
  const todayDelta = A.series.length > 1 ? (A.series[A.series.length-1] - A.series[A.series.length-2]) : 0;

  return (
    <>
      <PageTitle title={`${app.greet}，${names.A} ☀️`} sub={`${app.dateStr} · 第 ${A.streak} 天`}
        right={<div style={{ display: 'flex', alignItems: 'center', gap: 6, background: T.As, padding: '7px 12px', borderRadius: 999, whiteSpace: 'nowrap' }}><Flame size={16} /><span style={{ fontFamily: T.NUM, fontWeight: 700, color: T.Ad, fontSize: 15 }}>{A.streak}</span></div>} />

      <div style={{ flex: 1, overflow: 'auto', padding: '8px 20px 28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* dashboard card */}
        <div style={{ ...card, padding: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <Ring pct={pct} who="A" size={128} stroke={13}>
              <div style={{ fontFamily: T.NUM, fontSize: 18, fontWeight: 800, color: T.Ad }}>{pct}%</div>
              <div style={{ fontSize: 10, color: T.faint }}>达标</div>
            </Ring>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
                <span style={{ fontFamily: T.NUM, fontSize: 46, fontWeight: 800, lineHeight: 0.9, color: T.ink }}>{A.cur}</span>
                <span style={{ fontFamily: T.NUM, fontSize: 16, fontWeight: 600, color: T.sub, marginLeft: 2 }}>kg</span>
              </div>
              {checkedToday && <div style={{ display: 'flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap', background: T.goodS, color: T.good, padding: '4px 10px', borderRadius: 999, fontFamily: T.NUM, fontWeight: 700, fontSize: 13, alignSelf: 'flex-start' }}>{todayDelta <= 0 ? '↓' : '↑'}{Math.abs(todayDelta).toFixed(1)} 今日</div>}
              <div style={{ display: 'flex', gap: 14 }}>
                <div><div style={{ fontSize: 11, color: T.faint }}>起始</div><div style={{ fontFamily: T.NUM, fontWeight: 600, fontSize: 15, color: T.ink }}>{A.start}</div></div>
                <div style={{ width: 1, background: T.line }} />
                <div><div style={{ fontSize: 11, color: T.faint }}>距目标</div><div style={{ fontFamily: T.NUM, fontWeight: 600, fontSize: 15, color: T.Ad }}>{toGoal}kg</div></div>
              </div>
            </div>
          </div>
          <div style={{ height: 1, background: T.line, margin: '16px 0' }} />
          {!checkedToday ? (
            <button onClick={openCheckin} style={{ width: '100%', border: 'none', borderRadius: T.rBtn, padding: 14, cursor: 'pointer', background: `linear-gradient(135deg, ${T.Ac}, ${T.Ad})`, color: '#fff', fontFamily: T.FONT, fontSize: 16, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, boxShadow: T.dark?'none':'0 6px 16px rgba(200,90,40,0.28)' }}>
              <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#fff" strokeWidth="2.6" strokeLinecap="round"/></svg>记录今天的体重
            </button>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 42, height: 42, borderRadius: T.rSm, background: T.goodS, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <svg width="22" height="22" viewBox="0 0 24 24"><path d="M5 13l4 4 10-11" stroke={T.good} strokeWidth="2.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: T.ink }}>今天已打卡 · {A.cur} kg</div>
                <div style={{ fontSize: 12, color: T.good, marginTop: 1 }}>{todayDelta <= 0 ? `比昨天 ↓ ${Math.abs(todayDelta).toFixed(1)}kg，继续保持！` : '记得多喝水，明天加油！'}</div>
              </div>
              <button onClick={openCheckin} style={{ background: 'none', border: `1px solid ${T.line}`, color: T.sub, borderRadius: 10, padding: '6px 10px', fontFamily: T.FONT, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>修改</button>
            </div>
          )}
        </div>

        {/* trend card with PK */}
        <div style={{ ...card, padding: '16px 14px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12, padding: '0 4px' }}>
            <span style={{ fontSize: 14.5, fontWeight: 700, color: T.ink }}>体重趋势</span>
            <div style={{ display: 'flex', gap: 3, background: T.bg2, padding: 3, borderRadius: 10 }}>
              {['周','全部'].map(r => (
                <button key={r} onClick={() => setRange(r)} style={{ border: 'none', borderRadius: 8, padding: '5px 14px', cursor: 'pointer', fontFamily: T.FONT, fontSize: 12.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>
          <DualChart a={aS} b={bS} days={dS} goalA={goal.A} w={314} h={156} />
          <div style={{ height: 1, background: T.line, margin: '12px 4px' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 4px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, flex: 1 }}>
              <Avatar who="A" size={26} /><span style={{ fontSize: 12.5, color: T.sub, fontWeight: 600 }}>本周</span>
              <span style={{ fontFamily: T.NUM, fontSize: 19, fontWeight: 800, color: T.Ad }}>-{A.weekLoss}<span style={{ fontSize: 12 }}>kg</span></span>
            </div>
            <div style={{ width: 1, height: 22, background: T.line }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, flex: 1, justifyContent: 'flex-end' }}>
              <span style={{ fontFamily: T.NUM, fontSize: 19, fontWeight: 800, color: T.Bd }}>-{B.weekLoss}<span style={{ fontSize: 12 }}>kg</span></span>
              <span style={{ fontSize: 12.5, color: T.sub, fontWeight: 600 }}>本周</span><Avatar who="B" size={26} />
            </div>
          </div>
          <div style={{ textAlign: 'center', marginTop: 10, fontSize: 12.5, fontWeight: 700, color: lead>=0?T.good:T.Bd, background: lead>=0?T.goodS:T.Bs, borderRadius: 999, padding: '6px 0' }}>
            {lead >= 0 ? `🎉 本周你领先 ${lead.toFixed(1)}kg，势头不错！` : `💪 ${names.B} 本周快了 ${(-lead).toFixed(1)}kg，加把劲！`}
          </div>
        </div>

        {/* partner supervision */}
        <div style={{ ...card, background: T.bg2, border: `1px solid ${T.line}`, boxShadow: 'none' }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: T.sub, marginBottom: 12, letterSpacing: 1 }}>队友监督</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ position: 'relative', flexShrink: 0 }}>
              <Avatar who="B" size={46} />
              <div style={{ position: 'absolute', bottom: -2, right: -2, width: 16, height: 16, borderRadius: '50%', background: B.checkedToday ? T.good : T.faint, border: `2.5px solid ${T.bg2}` }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: T.ink }}>{names.B} · {B.checkedToday ? '今天已打卡' : '今天还没打卡'}</div>
              <div style={{ fontSize: 12.5, color: T.sub, marginTop: 1 }}>{B.cur}kg · 本周 ↓{B.weekLoss}kg</div>
            </div>
            <button onClick={() => like('B')} style={{ width: 40, height: 40, borderRadius: T.rSm, border: `1.5px solid ${app.liked ? T.Bc : T.line}`, background: app.liked ? T.Bs : T.card, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Heart size={20} filled={app.liked} />
            </button>
            <button onClick={() => poke('B')} style={{ padding: '0 16px', height: 40, borderRadius: T.rSm, border: 'none', background: `linear-gradient(135deg, ${T.Bc}, ${T.Bd})`, color: '#fff', fontFamily: T.FONT, fontWeight: 700, fontSize: 14, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0 }}>{B.checkedToday ? '点赞' : '催一下'}</button>
          </div>
        </div>
      </div>
    </>
  );
}
window.HomeScreen = HomeScreen;